/* ========================================================= 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; } } /* ========================================================= DESKTOP DROPDOWN – ZWEITE EBENE Gleiches Design wie Haupt-Dropdown ========================================================= */ @media (min-width: 992px) { #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu { 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; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .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; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu > li > a:hover, #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu > li > a:focus { background: rgba(255,255,255,0.06) !important; color: #69B0AE !important; } } /* Abstand zwischen erster und zweiter Dropdown-Ebene */ @media (min-width: 992px) { #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu { left: calc(100% + 8px) !important; margin-left: 0 !important; } /* Unsichtbare Brücke über den Abstand */ #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.dropdown-submenu::after { content: "" !important; position: absolute !important; top: 0 !important; right: -8px !important; width: 8px !important; height: 100% !important; background: transparent !important; } } /* ========================================================= 2. FOOTER MODERN / INDUSTRIELL / VIER SPALTEN / KOMPAKT ========================================================= */ .hm-footer { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #22333B !important; color: rgba(255,255,255,0.78) !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; } /* ========================================================= HAUPTBEREICH ========================================================= */ .hm-footer .container { max-width: 1180px !important; } .hm-footer .hm-footer-main { align-items: stretch !important; padding-top: 32px !important; padding-bottom: 28px !important; } .hm-footer .hm-footer-main > div { position: relative !important; padding-left: 26px !important; padding-right: 26px !important; } /* senkrechte Trennlinien Desktop */ @media (min-width: 992px) { .hm-footer .hm-footer-main > div:not(:first-child)::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 1px !important; background: rgba(255,255,255,0.10) !important; } } /* ========================================================= LOGO / FIRMA ========================================================= */ .hm-footer .hm-footer-company { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .hm-footer .hm-footer-logo { display: inline-block !important; margin: 0 0 12px 0 !important; padding: 0 !important; text-decoration: none !important; } .hm-footer .hm-footer-logo img { display: block !important; width: auto !important; max-width: 145px !important; height: auto !important; margin: 0 !important; } .hm-footer .hm-footer-company h3 { margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; } .hm-footer .hm-footer-company-text { margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,0.66) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.55 !important; } /* ========================================================= ÜBERSCHRIFTEN ========================================================= */ .hm-footer h4 { margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !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: 9px 0 14px 0 !important; background: #328685 !important; } /* ========================================================= PRODUKTE + SERVICE ========================================================= */ .hm-footer .hm-footer-products ul, .hm-footer .hm-footer-service ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .hm-footer .hm-footer-products ul li, .hm-footer .hm-footer-service ul li { position: relative !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border-bottom: 1px solid rgba(255,255,255,0.09) !important; } .hm-footer .hm-footer-products ul li:last-child, .hm-footer .hm-footer-service ul li:last-child { border-bottom: 0 !important; } .hm-footer .hm-footer-products ul li::before, .hm-footer .hm-footer-products ul li::after, .hm-footer .hm-footer-service ul li::before, .hm-footer .hm-footer-service ul li::after { content: none !important; display: none !important; } /* Links */ .hm-footer .hm-footer-products ul li a, .hm-footer .hm-footer-service ul li a { position: relative !important; display: block !important; margin: 0 !important; padding: 7px 22px 7px 0 !important; color: rgba(255,255,255,0.82) !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; text-decoration: none !important; transition: color 0.18s ease, padding-left 0.18s ease !important; } /* Pfeil rechts */ .hm-footer .hm-footer-products ul li a::after, .hm-footer .hm-footer-service ul li a::after { content: "›" !important; position: absolute !important; top: 50% !important; right: 2px !important; transform: translateY(-53%) !important; color: #4DA3A1 !important; font-family: Arial, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1 !important; } /* Hover */ .hm-footer .hm-footer-products ul li a:hover, .hm-footer .hm-footer-products ul li a:focus, .hm-footer .hm-footer-service ul li a:hover, .hm-footer .hm-footer-service ul li a:focus { padding-left: 4px !important; color: #69B0AE !important; } /* ========================================================= KONTAKT ========================================================= */ .hm-footer .hm-footer-contact-row { display: flex !important; align-items: flex-start !important; gap: 11px !important; margin: 0 0 13px 0 !important; color: rgba(255,255,255,0.80) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.45 !important; } .hm-footer .hm-footer-contact-row i { flex: 0 0 18px !important; width: 18px !important; margin-top: 2px !important; color: #58A7A5 !important; font-size: 13px !important; text-align: center !important; } .hm-footer .hm-footer-contact-row div { min-width: 0 !important; } .hm-footer .hm-footer-contact-row a { color: #FFFFFF !important; font-weight: 600 !important; text-decoration: none !important; overflow-wrap: anywhere !important; transition: color 0.18s ease !important; } .hm-footer .hm-footer-contact-row a:hover, .hm-footer .hm-footer-contact-row a:focus { color: #69B0AE !important; } /* ========================================================= ANFRAGE BUTTON ========================================================= */ .hm-footer .hm-footer-contact-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; margin: 1px 0 0 0 !important; padding: 8px 16px !important; background: #328685 !important; border: 1px solid #328685 !important; border-radius: 3px !important; color: #FFFFFF !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; box-shadow: none !important; } .hm-footer .hm-footer-contact-button:hover, .hm-footer .hm-footer-contact-button:focus { background: #276F6E !important; border-color: #276F6E !important; color: #FFFFFF !important; transform: translateY(-1px) !important; } /* ========================================================= UNTERE LEISTE ========================================================= */ .hm-footer .hm-footer-bottom { padding: 0 !important; background: #1B2C33 !important; border-top: 1px solid rgba(255,255,255,0.07) !important; } .hm-footer .hm-footer-bottom-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 30px !important; min-height: 48px !important; } .hm-footer .hm-footer-copyright { margin: 0 !important; color: rgba(255,255,255,0.55) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; } .hm-footer .hm-footer-legal { display: flex !important; align-items: center !important; gap: 16px !important; margin: 0 !important; } .hm-footer .hm-footer-legal a { color: rgba(255,255,255,0.64) !important; font-size: 12px !important; font-weight: 400 !important; text-decoration: none !important; } .hm-footer .hm-footer-legal a:hover, .hm-footer .hm-footer-legal a:focus { color: #69B0AE !important; } .hm-footer .hm-footer-legal span { margin: 0 !important; color: rgba(255,255,255,0.18) !important; font-size: 11px !important; } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 991.98px) { .hm-footer .hm-footer-main { row-gap: 34px !important; padding-top: 34px !important; padding-bottom: 30px !important; } .hm-footer .hm-footer-main > div { padding-left: 22px !important; padding-right: 22px !important; } } /* ========================================================= 3. FOOTER MOBIL ========================================================= */ @media (max-width: 767.98px) { .hm-footer .hm-footer-main { padding-top: 28px !important; padding-bottom: 26px !important; } .hm-footer .hm-footer-company { width: 100% !important; max-width: 100% !important; margin: 0 0 26px 0 !important; align-items: center !important; text-align: center !important; } .hm-footer .hm-footer-logo { margin-bottom: 12px !important; } .hm-footer .hm-footer-logo img { max-width: 130px !important; } .hm-footer .hm-footer-company h3 { font-size: 16px !important; } .hm-footer .hm-footer-company .hm-footer-line { margin-left: auto !important; margin-right: auto !important; } .hm-footer .hm-footer-company-text { font-size: 13px !important; text-align: center !important; } .hm-footer .hm-footer-products, .hm-footer .hm-footer-service, .hm-footer .hm-footer-contact { width: 100% !important; max-width: 100% !important; margin: 0 0 26px 0 !important; padding-left: 18px !important; padding-right: 18px !important; } .hm-footer .hm-footer-contact { margin-bottom: 0 !important; } .hm-footer h4 { font-size: 16px !important; } .hm-footer .hm-footer-products ul li a, .hm-footer .hm-footer-service ul li a { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 13.5px !important; } .hm-footer .hm-footer-contact-row { margin-bottom: 12px !important; font-size: 13px !important; } .hm-footer .hm-footer-bottom-inner { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 9px !important; min-height: 0 !important; padding-top: 15px !important; padding-bottom: 15px !important; text-align: center !important; } .hm-footer .hm-footer-legal { flex-wrap: wrap !important; justify-content: center !important; gap: 9px !important; } .hm-footer .hm-footer-copyright, .hm-footer .hm-footer-legal a { font-size: 11.5px !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; } } /* ========================================================= MASCHINEN – ÜBERSICHTSKACHELN 3 oben / 2 mittig darunter ========================================================= */ .hm-machine-overview { width: 100% !important; margin: 0 !important; padding: 10px 0 35px 0 !important; } /* ========================================================= EINLEITUNG ========================================================= */ .hm-machine-overview-intro { width: 100% !important; max-width: 100% !important; margin: 0 0 30px 0 !important; } .hm-machine-overview-intro h2 { margin: 0 0 12px 0 !important; padding: 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; } .hm-machine-overview-intro h2::after { content: "" !important; display: block !important; width: 42px !important; height: 3px !important; margin-top: 10px !important; background: #328685 !important; } .hm-machine-overview-intro p { max-width: 760px !important; margin: 0 !important; color: #46555A !important; font-size: 15px !important; line-height: 1.65 !important; } /* ========================================================= RASTER 6 Hilfsspalten = jede Karte belegt 2 ========================================================= */ .hm-machine-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; width: 100% !important; } /* Jede Karte = 1/3 der Breite */ .hm-machine-card { grid-column: span 2 !important; display: block !important; position: relative !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #DDE5E5 !important; border-radius: 2px !important; box-shadow: 0 5px 18px rgba(34, 51, 59, 0.07) !important; color: #22333B !important; text-decoration: none !important; transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease !important; } /* Zweite Reihe mittig */ .hm-machine-card:nth-child(4) { grid-column: 2 / span 2 !important; } .hm-machine-card:nth-child(5) { grid-column: 4 / span 2 !important; } /* ========================================================= KACHEL HOVER ========================================================= */ .hm-machine-card:hover, .hm-machine-card:focus { transform: translateY(-3px) !important; border-color: #AFCACA !important; box-shadow: 0 12px 30px rgba(34, 51, 59, 0.14) !important; text-decoration: none !important; } /* ========================================================= BILDBEREICH ========================================================= */ .hm-machine-card-image { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 220px !important; overflow: hidden !important; background: linear-gradient( 135deg, #EDF2F2 0%, #E4EAEA 100% ) !important; color: #77878B !important; font-size: 13px !important; font-weight: 500 !important; } /* Echte Bilder */ .hm-machine-card-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.35s ease !important; } .hm-machine-card:hover .hm-machine-card-image img { transform: scale(1.035) !important; } /* ========================================================= TEXTBEREICH ========================================================= */ .hm-machine-card-content { position: relative !important; padding: 20px 22px 21px 22px !important; background: #FFFFFF !important; } .hm-machine-card-content::before { content: "" !important; position: absolute !important; top: 0 !important; left: 22px !important; width: 38px !important; height: 3px !important; background: #328685 !important; } /* Überschrift */ .hm-machine-card-content h3 { margin: 0 0 9px 0 !important; padding: 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.25 !important; border: 0 !important; } .hm-machine-card-content h3::before, .hm-machine-card-content h3::after { content: none !important; display: none !important; } /* Linktext */ .hm-machine-card-link { display: inline-block !important; color: #328685 !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; transition: transform 0.18s ease, color 0.18s ease !important; } .hm-machine-card:hover .hm-machine-card-link { color: #266E6D !important; transform: translateX(3px) !important; } /* ========================================================= TABLET 2 Kacheln nebeneinander ========================================================= */ @media (max-width: 991.98px) { .hm-machine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .hm-machine-card, .hm-machine-card:nth-child(4), .hm-machine-card:nth-child(5) { grid-column: auto !important; } .hm-machine-card-image { height: 220px !important; } } /* ========================================================= MOBIL 1 Kachel pro Reihe ========================================================= */ @media (max-width: 767.98px) { .hm-machine-overview { padding-top: 0 !important; } .hm-machine-overview-intro { margin-bottom: 22px !important; } .hm-machine-overview-intro h2 { font-size: 23px !important; } .hm-machine-overview-intro p { font-size: 14px !important; } .hm-machine-grid { grid-template-columns: 1fr !important; gap: 18px !important; } .hm-machine-card, .hm-machine-card:nth-child(4), .hm-machine-card:nth-child(5) { grid-column: auto !important; } .hm-machine-card-image { height: 210px !important; } .hm-machine-card-content { padding: 17px 18px 18px 18px !important; } .hm-machine-card-content::before { left: 18px !important; } .hm-machine-card-content h3 { font-size: 19px !important; } } /* ========================================================= MASCHINEN – 2 KACHELN ZENTRIERT ========================================================= */ @media (min-width: 992px) { .hm-machine-grid--2 .hm-machine-card:nth-child(1) { grid-column: 2 / span 2 !important; } .hm-machine-grid--2 .hm-machine-card:nth-child(2) { grid-column: 4 / span 2 !important; } } /* ========================================================= HINWEISBANNER – WEBSITE WIRD ÜBERARBEITET ========================================================= */ .hm-site-notice { width: 100% !important; margin: 0 !important; padding: 11px 20px !important; background: #B42318 !important; color: #FFFFFF !important; text-align: center !important; font-family: "Open Sans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; border-bottom: 3px solid #8F1D14 !important; } .hm-site-notice strong { color: #FFFFFF !important; font-weight: 700 !important; } @media (max-width: 767.98px) { .hm-site-notice { padding: 10px 15px !important; font-size: 13px !important; line-height: 1.45 !important; } } /* ========================================================= SEITENHEADER – ZUR ÜBERSICHT ========================================================= */ .page-header .hm-page-header-nav { position: relative !important; width: max-content !important; max-width: 100% !important; margin: 0 0 0 auto !important; padding: 2px 0 2px 14px !important; border-left: 1px solid #AFCACA !important; text-align: left !important; } .page-header .hm-page-header-nav-label { display: block !important; margin: 0 0 4px 0 !important; padding: 0 !important; color: #77878B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 8px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.4px !important; text-transform: uppercase !important; text-align: left !important; } .page-header .hm-page-header-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .page-header .hm-page-header-links a { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: #328685 !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; text-decoration: none !important; } .page-header .hm-page-header-links a + a::before { content: "/" !important; display: inline-block !important; margin: 0 6px !important; color: #9AA7AA !important; font-weight: 400 !important; } .page-header .hm-page-header-links a:hover, .page-header .hm-page-header-links a:focus { color: #266E6D !important; text-decoration: underline !important; } /* Mobil */ @media (max-width: 767.98px) { .page-header .hm-page-header-nav { width: 100% !important; margin: 10px 0 0 0 !important; padding: 8px 0 0 0 !important; border-left: 0 !important; border-top: 1px solid #CBD8D8 !important; } .page-header .hm-page-header-nav-label { margin-bottom: 4px !important; } } /* ========================================================= STARTSEITE – PRODUKTÜBERSICHT / FP-PRODUCTS HELL, MODERN, BREIT, KOMPAKT ========================================================= */ /* --------------------------------------------------------- VIERER-REIHE --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 { align-items: stretch !important; width: 100% !important; margin-top: 28px !important; margin-left: -12px !important; margin-right: -12px !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 { display: flex !important; padding-left: 12px !important; padding-right: 12px !important; margin-bottom: 24px !important; } /* Auf großen Bildschirmen etwas breiter als der Textcontainer */ @media (min-width: 1280px) { #page-1 .row.align-items-baseline.mt-2 { width: calc(100% + 180px) !important; margin-left: -90px !important; margin-right: -90px !important; } } /* --------------------------------------------------------- KARTE --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box { position: relative !important; cursor: pointer !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #DDE4E5 !important; border-radius: 7px !important; box-shadow: 0 7px 24px rgba(34, 51, 59, 0.065) !important; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box:hover, #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box:has(a:focus-visible) { transform: translateY(-3px) !important; border-color: #C8D4D5 !important; box-shadow: 0 14px 34px rgba(34, 51, 59, 0.11) !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box:has(a:focus-visible) { outline: 2px solid #328685 !important; outline-offset: 2px !important; } /* Alte Akzentlinien entfernen */ #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box::before, #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box::after { content: none !important; display: none !important; } /* Alten Icon-Bereich ausblenden */ #page-1 .row.align-items-baseline.mt-2 .icon-box-icon { display: none !important; } /* --------------------------------------------------------- GESAMTER INHALT --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .icon-box-info { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* --------------------------------------------------------- ÜBERSCHRIFT --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .icon-box-info > h2 { margin: 0 !important; padding: 20px 18px 16px 18px !important; color: #22333B !important; background: #FFFFFF !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.2px !important; border: 0 !important; } #page-1 .row.align-items-baseline.mt-2 .icon-box-info > h2::before, #page-1 .row.align-items-baseline.mt-2 .icon-box-info > h2::after { content: none !important; display: none !important; } /* --------------------------------------------------------- TYPO3 FRAME --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .icon-box-info .frame { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* --------------------------------------------------------- TEXT/BILD-ELEMENT --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .icon-box-info .ce-textpic { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; } /* --------------------------------------------------------- BILDBEREICH --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .icon-box-info .ce-gallery { order: 1 !important; display: block !important; width: auto !important; margin: 0 18px !important; padding: 0 !important; overflow: hidden !important; border-radius: 5px !important; background: #EEF2F2 !important; } #page-1 .row.align-items-baseline.mt-2 .ce-gallery .ce-row, #page-1 .row.align-items-baseline.mt-2 .ce-gallery .ce-column, #page-1 .row.align-items-baseline.mt-2 .ce-gallery figure, #page-1 .row.align-items-baseline.mt-2 .ce-gallery .image { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Bilder */ #page-1 .row.align-items-baseline.mt-2 .ce-gallery img { display: block !important; width: 100% !important; max-width: none !important; height: 215px !important; margin: 0 !important; object-fit: cover !important; object-position: center center !important; border-radius: 5px !important; transition: transform 0.35s ease !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 > .icon-box:hover .ce-gallery img { transform: scale(1.025) !important; } /* --------------------------------------------------------- TEXTBEREICH --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .ce-bodytext { order: 2 !important; display: flex !important; flex: 0 0 145px !important; flex-direction: column !important; min-height: 145px !important; margin: 0 !important; /* Unten bleibt nur noch der benötigte Platz für "Mehr erfahren". */ padding: 14px 18px 42px 18px !important; background: #FFFFFF !important; } /* Normaler Text */ #page-1 .row.align-items-baseline.mt-2 .ce-bodytext p { margin: 0 0 6px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* --------------------------------------------------------- GESAMTE KARTE KLICKBAR --------------------------------------------------------- */ /* Der echte Link bleibt im HTML erhalten. Seine unsichtbare Klickfläche wird über die komplette Kachel gelegt – kein JavaScript und kein zusätzlicher Request. */ #page-1 .row.align-items-baseline.mt-2 .ce-bodytext a { position: absolute !important; inset: 0 !important; z-index: 10 !important; display: block !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-decoration: none !important; cursor: pointer !important; } /* Ursprünglichen Link-Absatz aus dem Layout nehmen */ #page-1 .row.align-items-baseline.mt-2 .ce-bodytext p:has(a) { margin: 0 !important; padding: 0 !important; height: 0 !important; } /* --------------------------------------------------------- SICHTBARES "MEHR ERFAHREN" bei allen Karten exakt auf gleicher Höhe --------------------------------------------------------- */ #page-1 .row.align-items-baseline.mt-2 .ce-bodytext::after { content: "Mehr erfahren →" !important; position: absolute !important; left: 18px !important; bottom: 16px !important; z-index: 6 !important; color: #328685 !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; pointer-events: none !important; } /* --------------------------------------------------------- TABLET – 2 x 2 --------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 991.98px) { #page-1 .row.align-items-baseline.mt-2 { width: 100% !important; margin-left: -10px !important; margin-right: -10px !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; } #page-1 .row.align-items-baseline.mt-2 .ce-gallery img { height: 220px !important; } #page-1 .row.align-items-baseline.mt-2 .ce-bodytext { flex-basis: 140px !important; min-height: 140px !important; } } /* --------------------------------------------------------- MOBIL – 1 SPALTE --------------------------------------------------------- */ @media (max-width: 767.98px) { #page-1 .row.align-items-baseline.mt-2 { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #page-1 .row.align-items-baseline.mt-2 > .col-lg-3 { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 18px !important; } #page-1 .row.align-items-baseline.mt-2 .icon-box-info > h2 { padding: 18px 17px 14px 17px !important; font-size: 19px !important; } #page-1 .row.align-items-baseline.mt-2 .ce-gallery { margin-left: 17px !important; margin-right: 17px !important; } #page-1 .row.align-items-baseline.mt-2 .ce-gallery img { height: 215px !important; } #page-1 .row.align-items-baseline.mt-2 .ce-bodytext { flex: 0 0 auto !important; min-height: 125px !important; padding: 14px 17px 40px 17px !important; } #page-1 .row.align-items-baseline.mt-2 .ce-bodytext::after { left: 17px !important; bottom: 14px !important; } } /* ========================================================= STARTSEITE – UNTERNEHMEN / SEO-ABSCHLUSSBEREICH RUHIG, OFFEN, INDUSTRIELL ========================================================= */ #page-1 .hm-home-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; max-width: 1180px; margin: 0 auto; padding: 62px 30px 66px 30px; color: #46555A; } /* ========================================================= EINLEITUNG ========================================================= */ #page-1 .hm-home-company-intro { grid-column: 1 / -1; max-width: 1040px; margin: 0 0 38px 0; } #page-1 .hm-home-company-intro h2 { position: relative; max-width: 100%; margin: 0 0 26px 0 !important; padding: 0 0 17px 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: -0.45px !important; } #page-1 .hm-home-company-intro h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: #328685; } #page-1 .hm-home-company-intro p { max-width: 950px; margin: 0 0 12px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.7 !important; } #page-1 .hm-home-company strong { color: #22333B; font-weight: 700; } /* ========================================================= ZWISCHENÜBERSCHRIFTEN ========================================================= */ #page-1 .hm-home-company-program h3, #page-1 .hm-home-company-text h3 { margin: 0 0 19px 0 !important; padding: 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: -0.15px !important; } #page-1 .hm-home-company-program h3::before, #page-1 .hm-home-company-program h3::after, #page-1 .hm-home-company-text h3::before, #page-1 .hm-home-company-text h3::after { content: none !important; display: none !important; } /* ========================================================= LIEFERPROGRAMM LINKS ========================================================= */ #page-1 .hm-home-company-program { box-sizing: border-box; padding: 0 42px 0 0; border-right: 1px solid #E3E8E9; } #page-1 .hm-home-company-program ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } #page-1 .hm-home-company-program li { position: relative; margin: 0 !important; padding: 10px 0 11px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; border-bottom: 1px solid #E5E9EA; } #page-1 .hm-home-company-program li:first-child { padding-top: 3px !important; } #page-1 .hm-home-company-program li:last-child { padding-bottom: 0 !important; border-bottom: 0; } #page-1 .hm-home-company-program li::before, #page-1 .hm-home-company-program li::after { content: none !important; display: none !important; } /* ========================================================= SERVICE / SONDERLÖSUNGEN / ZUBEHÖR RECHTS ========================================================= */ #page-1 .hm-home-company-text { box-sizing: border-box; display: block; margin: 0 !important; padding: 0 0 0 4px; border: 0 !important; } #page-1 .hm-home-company-text p { margin: 0 0 20px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.7 !important; } #page-1 .hm-home-company-text p:last-child { margin-bottom: 0 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { #page-1 .hm-home-company { display: block; padding: 52px 24px 56px 24px; } #page-1 .hm-home-company-intro { margin-bottom: 30px; } #page-1 .hm-home-company-intro h2 { font-size: 27px !important; } #page-1 .hm-home-company-program { margin-bottom: 30px; padding: 0 0 28px 0; border-right: 0; border-bottom: 1px solid #DDE4E5; } #page-1 .hm-home-company-text { padding-left: 0; } } /* ========================================================= MOBIL ========================================================= */ @media (max-width: 767.98px) { #page-1 .hm-home-company { padding: 42px 18px 48px 18px; } #page-1 .hm-home-company-intro { margin-bottom: 26px; } #page-1 .hm-home-company-intro h2 { margin-bottom: 22px !important; padding-bottom: 15px !important; font-size: 24px !important; line-height: 1.25 !important; } #page-1 .hm-home-company-intro p { font-size: 15px !important; line-height: 1.65 !important; } #page-1 .hm-home-company-program h3, #page-1 .hm-home-company-text h3 { font-size: 16px !important; } #page-1 .hm-home-company-program li { padding-top: 9px !important; padding-bottom: 10px !important; font-size: 14px !important; line-height: 1.55 !important; } #page-1 .hm-home-company-text p { font-size: 15px !important; line-height: 1.65 !important; } }