/* =========================================================
   H.M. MASCHINEN – CUSTOM CSS
   BEREINIGTE GESAMTVERSION
   August 2026
   ========================================================= */


/* =========================================================
   1. DESKTOP DROPDOWN
   Clean / Minimal / Industrial
   ========================================================= */

@media (min-width: 992px) {

    #header .header-nav-main nav > ul > li {
        position: relative !important;
    }


    /* Dropdown */

    #header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {

        top: 100% !important;
        left: 0 !important;

        margin-top: -30px !important;

        min-width: 255px !important;

        padding: 10px 0 !important;

        background: #22333B !important;

        border: 0 !important;
        border-radius: 3px !important;

        box-shadow:
            0 12px 28px rgba(20, 32, 38, 0.20) !important;

        transform: none !important;
    }


    /* Links */

    #header .header-nav-main nav > ul > li.dropdown
    > .dropdown-menu > li > a {

        display: block !important;

        padding: 12px 22px !important;

        background: transparent !important;

        color: rgba(255,255,255,0.92) !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        letter-spacing: 0.15px !important;

        border: 0 !important;
        border-radius: 0 !important;

        text-decoration: none !important;

        transition:
            background-color 0.15s ease,
            color 0.15s ease !important;
    }


    /* Hover */

    #header .header-nav-main nav > ul > li.dropdown
    > .dropdown-menu > li > a:hover,

    #header .header-nav-main nav > ul > li.dropdown
    > .dropdown-menu > li > a:focus {

        background: rgba(255,255,255,0.06) !important;

        color: #69B0AE !important;
    }

}



/* =========================================================
   2. FOOTER – GRUNDSTIL
   ========================================================= */

.hm-footer {
    background: #22333B !important;

    color: rgba(255,255,255,0.78) !important;
}


/* Hauptbereich */

.hm-footer .hm-footer-main {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
}


/* Logo */

.hm-footer .hm-footer-logo {
    display: inline-block !important;

    margin-bottom: 12px !important;
}


.hm-footer .hm-footer-logo img {
    display: block !important;

    width: 145px !important;
    max-width: 100% !important;
    height: auto !important;
}


/* Firmenname */

.hm-footer .hm-footer-company h3 {

    margin: 0 0 9px 0 !important;

    color: #FFFFFF !important;

    font-family:
        "Montserrat",
        "Open Sans",
        Arial,
        sans-serif !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* Beschreibung */

.hm-footer .hm-footer-company-text {

    margin: 12px 0 0 0 !important;

    color: rgba(255,255,255,0.64) !important;

    font-size: 13px !important;
    line-height: 1.6 !important;
}


/* Überschriften */

.hm-footer h4 {

    margin: 4px 0 9px 0 !important;

    color: #FFFFFF !important;

    font-family:
        "Montserrat",
        "Open Sans",
        Arial,
        sans-serif !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}


/* kleine türkise Linie */

.hm-footer .hm-footer-line {

    width: 32px !important;
    height: 2px !important;

    margin: 0 0 15px 0 !important;

    background: #328685 !important;
}


/* =========================================================
   FOOTER NAVIGATION
   ========================================================= */

.hm-footer .hm-footer-navigation ul {

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.hm-footer .hm-footer-navigation ul li {

    margin: 0 !important;
    padding: 0 !important;
}


.hm-footer .hm-footer-navigation ul li a {

    display: inline-block !important;

    padding: 4px 0 !important;

    color: rgba(255,255,255,0.76) !important;

    font-size: 13.5px !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    transition: color 0.18s ease !important;
}


.hm-footer .hm-footer-navigation ul li a:hover,
.hm-footer .hm-footer-navigation ul li a:focus {

    color: #6AB0AE !important;
}


/* =========================================================
   FOOTER KONTAKT
   ========================================================= */

.hm-footer .hm-footer-contact-row {

    display: flex !important;
    align-items: flex-start !important;

    gap: 11px !important;

    margin-bottom: 10px !important;

    color: rgba(255,255,255,0.76) !important;

    font-size: 13.5px !important;
    line-height: 1.5 !important;
}


.hm-footer .hm-footer-contact-row i {

    width: 17px !important;

    margin-top: 3px !important;

    color: #5DA3A1 !important;

    font-size: 13px !important;

    text-align: center !important;
}


.hm-footer .hm-footer-contact-row a {

    color: rgba(255,255,255,0.86) !important;

    text-decoration: none !important;
}


.hm-footer .hm-footer-contact-row a:hover {

    color: #6AB0AE !important;
}


/* =========================================================
   FOOTER UNTERE LEISTE
   ========================================================= */

.hm-footer .hm-footer-bottom {

    padding: 12px 0 !important;

    background: rgba(0,0,0,0.14) !important;

    border-top:
        1px solid rgba(255,255,255,0.06) !important;
}


.hm-footer .hm-footer-bottom-inner {

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    min-height: 0 !important;
}


.hm-footer .hm-footer-legal,
.hm-footer .hm-footer-copyright {

    color: rgba(255,255,255,0.50) !important;

    font-size: 12px !important;
    line-height: 1.4 !important;
}


.hm-footer .hm-footer-legal a {

    color: rgba(255,255,255,0.58) !important;

    text-decoration: none !important;
}


.hm-footer .hm-footer-legal a:hover {

    color: #FFFFFF !important;
}


.hm-footer .hm-footer-legal span {

    margin: 0 8px !important;

    color: rgba(255,255,255,0.20) !important;
}



/* =========================================================
   3. FOOTER MOBIL
   kompakt / Navigation ausgeblendet
   ========================================================= */

@media (max-width: 767.98px) {

    .hm-footer .hm-footer-main {

        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }


    /* Navigation mobil weg */

    .hm-footer .hm-footer-navigation {

        display: none !important;
    }


    /* Firma */

    .hm-footer .hm-footer-company {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 16px 0 !important;

        text-align: center !important;
    }


    .hm-footer .hm-footer-logo {

        display: inline-block !important;

        margin: 0 0 6px 0 !important;
    }


    .hm-footer .hm-footer-logo img {

        width: 115px !important;
        max-width: 115px !important;

        height: auto !important;
    }


    .hm-footer .hm-footer-company h3 {

        margin: 0 0 5px 0 !important;

        font-size: 14px !important;
        line-height: 1.25 !important;

        text-align: center !important;
    }


    .hm-footer .hm-footer-company-text {

        display: none !important;
    }


    .hm-footer .hm-footer-company .hm-footer-line {

        width: 30px !important;

        margin: 0 auto !important;
    }


    /* Kontakt */

    .hm-footer .hm-footer-contact {

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        text-align: center !important;
    }


    .hm-footer .hm-footer-contact h4 {

        margin: 0 0 5px 0 !important;

        font-size: 14px !important;

        text-align: center !important;
    }


    .hm-footer .hm-footer-contact .hm-footer-line {

        width: 30px !important;

        margin: 0 auto 10px auto !important;
    }


    .hm-footer .hm-footer-contact-row {

        display: flex !important;

        align-items: flex-start !important;
        justify-content: center !important;

        gap: 8px !important;

        margin: 0 0 6px 0 !important;

        font-size: 12px !important;
        line-height: 1.35 !important;

        text-align: left !important;
    }


    .hm-footer .hm-footer-contact-row i {

        width: 15px !important;

        margin-top: 2px !important;

        font-size: 12px !important;
    }


    .hm-footer .hm-footer-contact .btn {

        margin-top: 5px !important;

        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }


    /* untere Leiste */

    .hm-footer .hm-footer-bottom {

        padding: 9px 0 !important;
    }


    .hm-footer .hm-footer-bottom-inner {

        display: block !important;

        min-height: 0 !important;

        text-align: center !important;
    }


    .hm-footer .hm-footer-legal {

        font-size: 11px !important;
        line-height: 1.3 !important;
    }


    .hm-footer .hm-footer-legal span {

        margin: 0 5px !important;
    }


    .hm-footer .hm-footer-copyright {

        margin-top: 5px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;
    }

}



/* =========================================================
   4. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 991px) {

    #header .header-nav-main nav {

        background: #22333B !important;
    }


    /* Hauptmenü */

    #header .header-nav-main nav > ul > li {

        margin: 0 !important;

        border: 0 !important;
    }


    #header .header-nav-main nav > ul > li > a {

        display: block !important;

        padding: 13px 16px !important;

        background: transparent !important;

        color: rgba(255,255,255,0.92) !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;

        letter-spacing: 0.15px !important;

        border: 0 !important;
        border-bottom:
            1px solid rgba(255,255,255,0.06) !important;

        text-decoration: none !important;

        opacity: 1 !important;
    }


    /* Hover / aktiv */

    #header .header-nav-main nav > ul > li > a:hover,
    #header .header-nav-main nav > ul > li > a:focus,
    #header .header-nav-main nav > ul > li.active > a {

        background: rgba(255,255,255,0.06) !important;

        color: #69B0AE !important;
    }


    /* Pfeile */

    #header .header-nav-main nav > ul > li.dropdown > a::after,
    #header .header-nav-main nav > ul > li.dropdown > a i {

        color: rgba(255,255,255,0.65) !important;

        opacity: 1 !important;
    }


    /* Untermenü */

    #header .header-nav-main nav > ul > li .dropdown-menu {

        position: static !important;

        float: none !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 5px 0 7px 0 !important;

        background: rgba(0,0,0,0.12) !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }


    #header .header-nav-main nav > ul > li
    .dropdown-menu > li {

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    #header .header-nav-main nav > ul > li
    .dropdown-menu > li > a {

        display: block !important;

        padding: 10px 16px 10px 30px !important;

        background: transparent !important;

        color: rgba(255,255,255,0.88) !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;

        border: 0 !important;

        text-decoration: none !important;
    }


    #header .header-nav-main nav > ul > li
    .dropdown-menu > li > a:hover,

    #header .header-nav-main nav > ul > li
    .dropdown-menu > li > a:focus {

        background: rgba(255,255,255,0.05) !important;

        color: #69B0AE !important;
    }

}



/* =========================================================
   5. MOBILE STATIC HERO
   Desktop Slider / Mobile statischer Hero
   ========================================================= */


/* Desktop: Mobile Hero aus */

.hm-mobile-hero {
    display: none;
}


@media (max-width: 767.98px) {

    /* =====================================================
       TYPO3 FRAME
       Keine künstliche feste Höhe mehr
       ===================================================== */

    .main .frame:has(#hmMobileHero) {

        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    .main .frame:has(#hmMobileHero) .frame-container,
    .main .frame:has(#hmMobileHero) .frame-inner,
    .main .frame:has(#hmMobileHero) .ce-bodytext {

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       REVOLUTION SLIDER MOBIL AUS
       ===================================================== */

    #revolutionSlider,
    #revolutionSlider_wrapper,
    .slider-container:has(#revolutionSlider) {

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }


    /* =====================================================
       MOBILER HERO
       ===================================================== */

    html body #hmMobileHero {

        display: block !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 255px !important;
        min-height: 255px !important;
        max-height: 255px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #22333B !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO BILD
       ===================================================== */

    html body #hmMobileHero > img {

        display: block !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        z-index: 0 !important;

        width: 100% !important;
        max-width: none !important;

        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;
        object-position: 50% 30% !important;
    }


    /* =====================================================
       OVERLAY
       ===================================================== */

    html body #hmMobileHero .hm-mobile-hero-overlay {

        display: block !important;

        position: absolute !important;

        inset: 0 !important;

        z-index: 1 !important;

        background:
            linear-gradient(
                90deg,
                rgba(20,37,44,0.92) 0%,
                rgba(20,37,44,0.72) 55%,
                rgba(20,37,44,0.24) 100%
            ) !important;
    }


    /* =====================================================
       TEXTBLOCK
       ===================================================== */

    html body #hmMobileHero .hm-mobile-hero-content {

        display: block !important;

        position: absolute !important;

        top: 30px !important;
        left: 15px !important;
        right: 15px !important;
        bottom: auto !important;

        z-index: 2 !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #FFFFFF !important;

        text-align: left !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       OVERLINE
       ===================================================== */

    html body #hmMobileHeroOverline {

        display: block !important;

        width: 100% !important;

        margin: 0 0 9px 0 !important;
        padding: 0 !important;

        color: #55AAA8 !important;
        -webkit-text-fill-color: #55AAA8 !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        letter-spacing: 0.2px !important;

        text-transform: uppercase !important;

        text-shadow: none !important;

        opacity: 1 !important;
    }


    /* Falls TYPO3 die Overline doch entfernt */

    html body #hmMobileHero
    .hm-mobile-hero-content:not(:has(#hmMobileHeroOverline))::before {

        content:
            "PRÄZISION. ZUVERLÄSSIGKEIT. QUALITÄT.";

        display: block !important;

        margin: 0 0 9px 0 !important;
        padding: 0 !important;

        color: #55AAA8 !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        letter-spacing: 0.2px !important;

        text-transform: uppercase !important;
    }


    /* =====================================================
       H1
       ===================================================== */

    html body #hmMobileHero h1 {

        display: block !important;

        margin: 0 0 7px 0 !important;
        padding: 0 !important;

        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;

        text-align: left !important;
    }


    /* =====================================================
       BESCHREIBUNG
       ===================================================== */

    html body #hmMobileHero
    .hm-mobile-hero-content > p:not(:empty) {

        display: block !important;

        margin: 0 0 10px 0 !important;
        padding: 0 !important;

        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;

        font-size: 10.5px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;

        text-align: left !important;
    }


    /* =====================================================
       LEERE TYPO3 / RTE ELEMENTE ENTFERNEN
       ===================================================== */

    html body #hmMobileHero
    .hm-mobile-hero-content > p:empty,

    html body #hmMobileHero
    .hm-mobile-hero-content > a:empty,

    html body #hmMobileHero
    .hm-mobile-hero-content > div:empty {

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    html body #hmMobileHero
    .hm-mobile-hero-content
    > p:has(> a:empty) {

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       BUTTON CONTAINER
       ===================================================== */

    html body #hmMobileHero
    .hm-mobile-hero-cta {

        display: block !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        box-shadow: none !important;
    }


    /* =====================================================
       HERO BUTTON
       ===================================================== */

    html body #hmMobileHeroButton:not(:empty) {

        -webkit-appearance: none !important;
        appearance: none !important;

        display: inline-flex !important;

        position: relative !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 9px 14px !important;

        background: #328685 !important;
        background-image: none !important;

        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;

        border: 0 !important;
        border-radius: 2px !important;

        outline: 0 !important;

        box-shadow: none !important;

        font-family:
            "Montserrat",
            "Open Sans",
            Arial,
            sans-serif !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-align: center !important;
        text-decoration: none !important;
        text-transform: none !important;

        text-shadow: none !important;

        transform: none !important;

        clip-path: none !important;
        filter: none !important;

        cursor: pointer !important;

        box-sizing: border-box !important;
    }


    /* leere zweite Link-Kopie weg */

    html body #hmMobileHeroButton:empty {

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }


    /* mögliche Theme-Effekte entfernen */

    html body #hmMobileHeroButton::before,
    html body #hmMobileHeroButton::after {

        content: none !important;

        display: none !important;
    }


    /* Hover */

    html body #hmMobileHeroButton:not(:empty):hover,
    html body #hmMobileHeroButton:not(:empty):focus {

        background: #286F6E !important;

        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;

        text-decoration: none !important;

        border: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }

}



/* =========================================================
   6. MOBILE CONTENT + SERVICEBANNER
   volle Breite / kompakt / ausgewogen
   ========================================================= */

@media (max-width: 767.98px) {

    /* =====================================================
       TYPO3 CONTENT FRAMES MOBILE VOLLE BREITE
       ===================================================== */

    .main .container-fluid.main-con > .row > .frame {

        flex: 0 0 100% !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* H3 Einrückung entfernen */

    .main .frame:not(:has(.rev_slider)) h3 {

        padding-left: 0 !important;
    }


    /* Bilder mobil sauber halten */

    .main .frame:not(:has(.rev_slider)) img {

        max-width: 100% !important;

        height: auto !important;
    }


    /* =====================================================
       SERVICE FRAME
       ===================================================== */

    .main .frame:has(.hm-service-banner) {

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;
    }


    /* =====================================================
       SERVICEBANNER
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner {

        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 10px 0 !important;
        padding: 0 !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;

        background: #18323B !important;

        box-shadow:
            0 0 0 100vmax #18323B !important;

        clip-path:
            inset(0 -100vmax) !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       SERVICE INHALT
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    > .hm-service-banner-content {

        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 9px 15px !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       SERVICE TITELBEREICH
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-intro {

        display: block !important;

        position: static !important;

        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin-top: -35px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;

        padding: 0 !important;

        transform: none !important;

        border: 0 !important;

        text-align: center !important;
    }


    /* großes Werkzeugicon mobil weg */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-icon {

        display: none !important;
    }


    /* innerer Titelcontainer */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-intro > div {

        display: block !important;

        position: static !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        text-align: center !important;
    }


    /* Titel */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-title {

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 2px 0 !important;
        padding: 0 !important;

        color: #FFFFFF !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        letter-spacing: 0 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow: visible !important;

        text-align: center !important;
    }


    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-title span {

        padding: 0 4px !important;

        color: #328685 !important;

        font-size: inherit !important;
    }


    /* Unterzeile */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-intro p {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255,255,255,0.82) !important;

        font-size: 10.5px !important;
        line-height: 1.25 !important;

        text-align: center !important;
    }


    /* =====================================================
       SERVICE LEISTUNGEN – 2 SPALTEN
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-links {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 2px 14px !important;

        margin: 7px 0 5px 0 !important;
        padding: 6px 0 2px 0 !important;

        border-top:
            1px solid rgba(255,255,255,0.14) !important;

        box-sizing: border-box !important;
    }


    /* Einzelne Leistungen */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-item {

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        position: static !important;

        flex: none !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 2px !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* Retro-Fit mittig */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-item:last-child {

        grid-column: 1 / -1 !important;

        width: 50% !important;
        max-width: 50% !important;

        justify-self: center !important;
    }


    /* =====================================================
       ICONS
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-item i {

        margin: 0 0 3px 0 !important;

        color: #FFFFFF !important;

        font-size: 17px !important;
        line-height: 1 !important;
    }


    /* Texte */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-item span {

        display: block !important;

        width: 100% !important;

        color: #FFFFFF !important;

        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;

        text-align: center !important;
    }


    /* =====================================================
       SERVICE BUTTON
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-button {

        position: static !important;

        width: 100% !important;

        margin: 2px 0 0 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }


    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-button a {

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;

        padding: 8px 14px !important;

        font-size: 11px !important;
        line-height: 1.15 !important;
    }


    /* =====================================================
       SERVICE BILD MOBIL AUS
       ===================================================== */

    html body .main .frame:not(:has(.rev_slider))
    .hm-service-banner
    .hm-service-image {

        display: none !important;
    }

}