/* ========================================================= 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 Einleitung links / Text rechts ========================================================= */ /* ========================================================= TYPO3-FRAMES AUF VOLLE BREITE Einleitung und Mask-Maschinenauswahl sind jetzt getrennte Inhaltselemente und müssen deshalb beide die volle Maschinen-Seitenbreite erhalten. ========================================================= */ @media (min-width: 1200px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .main .frame:has(.hm-machine-overview), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .main .frame:has(.hm-machine-grid) { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================= GESAMTBEREICH ========================================================= */ .hm-machine-overview { width: 100% !important; margin: 0 !important; padding: 10px 0 35px 0 !important; box-sizing: border-box !important; } /* ========================================================= EINLEITUNG – GRUNDLAGE ========================================================= */ .hm-machine-overview-intro { width: 100% !important; max-width: 100% !important; margin: 0 0 34px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= EINLEITUNG – LINKS / RECHTS Überschrift links, kompletter Text rechts ========================================================= */ .hm-machine-overview-intro--split { display: grid !important; grid-template-columns: minmax(320px, 0.36fr) minmax(0, 0.64fr) !important; column-gap: 64px !important; align-items: start !important; } /* ========================================================= LINKE SEITE – ÜBERSCHRIFT ========================================================= */ .hm-machine-overview-intro-head { min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .hm-machine-overview-intro h2 { position: relative !important; margin: 0 !important; padding: 0 0 15px 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.22 !important; } /* Türkiser Unterstrich */ .hm-machine-overview-intro h2::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 42px !important; height: 2px !important; margin: 0 !important; background: #328685 !important; } /* ========================================================= RECHTE SEITE – EINLEITUNGSTEXT ========================================================= */ .hm-machine-overview-copy { width: 100% !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .hm-machine-overview-copy p { width: 100% !important; max-width: none !important; margin: 0 0 9px 0 !important; padding: 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.65 !important; } .hm-machine-overview-copy p:last-child { margin-bottom: 0 !important; } /* ========================================================= RASTER 3 Kacheln nebeneinander ========================================================= */ .hm-machine-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 22px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Jede Karte belegt 2 von 6 Rasterspalten */ .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; } /* ========================================================= 4. UND 5. KACHEL Falls auf anderen Übersichten 5 Kacheln vorhanden sind ========================================================= */ .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; } /* ========================================================= KACHEL – TEXTBEREICH ========================================================= */ .hm-machine-card-content { position: relative !important; padding: 20px 22px 21px 22px !important; background: #FFFFFF !important; } /* Türkiser Akzent */ .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; } /* ========================================================= KACHEL – Ü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; } /* ========================================================= KACHEL – LINK ========================================================= */ .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 ========================================================= */ @media (max-width: 991.98px) { /* Einleitung wieder untereinander */ .hm-machine-overview-intro--split { display: block !important; } .hm-machine-overview-intro-head { margin-bottom: 22px !important; } .hm-machine-overview-copy { max-width: 800px !important; } /* Zwei Kacheln nebeneinander */ .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 ========================================================= */ @media (max-width: 767.98px) { .hm-machine-overview { padding-top: 0 !important; } .hm-machine-overview-intro { margin-bottom: 24px !important; } .hm-machine-overview-intro h2 { font-size: 23px !important; } .hm-machine-overview-copy p { font-size: 14px !important; line-height: 1.65 !important; } /* Eine Kachel pro Reihe */ .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; } } /* ========================================================= MASCHINENOBERSEITEN – INHALTSBEREICHE Tafelscheren #page-20 Abkantpressen #page-50 Schwenkbiegemaschinen #page-27 Rundbiegemaschinen #page-32 Werkstattpressen #page-85 ========================================================= */ /* ========================================================= GEMEINSAME SEITENAUSWAHL ========================================================= */ /* ========================================================= SEITENBREITE Nur die fünf Maschinenoberseiten verbreitern ========================================================= */ @media (min-width: 1200px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .main > .container { width: 100% !important; max-width: 1440px !important; } } /* ========================================================= GRUNDBEREICH ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section { flex: 0 0 100%; width: 100%; max-width: 1380px; margin: 0 auto; padding: 62px 30px 66px; color: #46555A; box-sizing: border-box; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section--continuation { padding-top: 0; padding-bottom: 38px; } /* ========================================================= EINLEITUNGEN ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro { width: 100%; max-width: 1040px; margin: 0 0 38px 0; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro--compact { margin-bottom: 17px; } /* ========================================================= H2 ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro h2 { position: relative; margin: 0 0 26px 0; padding: 0 0 14px 0; color: #22333B; font-family: "Montserrat", "Open Sans", Arial, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.25; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: #328685; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section--continuation .hm-shears-intro h2 { font-size: 25px; } /* ========================================================= EINLEITUNGSTEXTE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro p { max-width: 950px; margin: 0 0 12px 0; color: #46555A; font-family: "Inter", "Open Sans", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro p:last-child { margin-bottom: 0; } /* ========================================================= ALLGEMEINES GRID ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-grid { width: 100%; box-sizing: border-box; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-grid--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } /* ========================================================= ZWEISPALTIG MIT TRENNLINIE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-grid--divided .hm-shears-panel:first-child { padding-right: 38px; border-right: 1px solid #E3E8E9; } /* ========================================================= PANELS ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-panel { min-width: 0; color: #46555A; box-sizing: border-box; } /* ========================================================= H3 ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-panel h3, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-head h3 { margin: 0 0 9px 0; color: #22333B; font-family: "Montserrat", "Open Sans", Arial, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.35; } /* ========================================================= NORMALE TEXTE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-panel p, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-body p { margin: 0 0 10px 0; color: #46555A; font-family: "Inter", "Open Sans", Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-panel p:last-child, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-body p:last-child { margin-bottom: 0; } /* ========================================================= LISTEN ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list { margin: 8px 0 0 0 !important; padding: 0 !important; list-style: none !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list li { position: relative; margin: 0 !important; padding: 10px 0 !important; color: #46555A; font-family: "Inter", "Open Sans", Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; list-style: none !important; border-bottom: 1px solid #E5E9EA; } /* Globale Aufzählungszeichen des Templates entfernen */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list li::before, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list li::after { content: none !important; display: none !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list li:last-child { border-bottom: 0; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list--compact li { padding-top: 7px !important; padding-bottom: 8px !important; } /* ========================================================= LINKLISTE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list li { display: block; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list strong { display: block; margin-bottom: 2px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list a { color: #22333B; text-decoration: none; transition: color 0.15s ease; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list a:hover, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list a:focus { color: #328685; text-decoration: none; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-link-list span { display: block; } /* ========================================================= GESTAPELTE MASCHINEN-/BAUFORM-BEREICHE 27 / 73 ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack { width: 100%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item { display: grid; grid-template-columns: minmax(230px, 0.27fr) minmax(0, 0.73fr); column-gap: 52px; width: 100%; padding: 19px 0; border-bottom: 1px solid #E3E8E9; box-sizing: border-box; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item:first-child { padding-top: 4px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item:last-child { padding-bottom: 0; border-bottom: 0; } /* ========================================================= STACK – LINKE SEITE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-head { min-width: 0; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-head h3 { margin-bottom: 7px; } /* ========================================================= STACK – RECHTE SEITE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-body { min-width: 0; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-features { margin: 8px 0 0 0 !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-features strong { color: #22333B; font-weight: 700; } /* ========================================================= MEHR-LINKS ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-more { display: inline-block; margin-top: 1px; color: #328685; font-family: "Montserrat", "Open Sans", Arial, sans-serif; font-size: 12.5px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: color 0.15s ease, transform 0.15s ease; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-more:hover, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-more:focus { color: #22333B; text-decoration: none; transform: translateX(3px); } /* ========================================================= VERGLEICHSTABELLE – WRAPPER ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table-wrap { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box !important; } /* ========================================================= VERGLEICHSTABELLE ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table { width: 100% !important; min-width: 1080px; margin: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; background: #FFFFFF !important; } /* ========================================================= TABELLENKOPF ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table thead th { margin: 0 !important; padding: 13px 14px !important; color: #FFFFFF !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: left !important; vertical-align: bottom !important; background-color: #22333B !important; border-top: 0 !important; border-bottom: 1px solid #D8E0E1 !important; } /* ========================================================= TABELLENZELLEN ========================================================= */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td { margin: 0 !important; padding: 14px !important; color: #46555A !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; vertical-align: top !important; background: #FFFFFF !important; border-bottom: 1px solid #E3E8E9 !important; } /* Erste Spalte */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td:first-child { color: #22333B !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td:first-child strong { color: #22333B !important; font-weight: 700 !important; } /* Einordnung – normale Textfarbe */ body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td:nth-child(2) { color: #46555A !important; font-weight: 400 !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody tr:last-child td { border-bottom: 0 !important; } /* ========================================================= TABELLE – HOVER ========================================================= */ @media (min-width: 992px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody tr:hover td { background: #F8FAFA !important; } } /* ========================================================= TABELLE – SPALTENBREITEN ========================================================= */ @media (min-width: 1200px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(1), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(1) { width: 15%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(2), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(2) { width: 9%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(3), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(3) { width: 18%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(4), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(4) { width: 16%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(5), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(5) { width: 23%; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table th:nth-child(6), body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table td:nth-child(6) { width: 19%; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section { width: 100%; padding: 52px 24px 56px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section--continuation { padding-top: 0; padding-bottom: 36px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-grid--2 { display: block; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-grid--divided .hm-shears-panel:first-child { margin-bottom: 34px; padding-right: 0; padding-bottom: 30px; border-right: 0; border-bottom: 1px solid #E3E8E9; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item { grid-template-columns: minmax(190px, 0.32fr) minmax(0, 0.68fr); column-gap: 32px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table { min-width: 1000px; font-size: 13.5px !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table thead th { padding: 11px 12px !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td { padding: 12px !important; font-size: 13.5px !important; } } /* ========================================================= MOBIL ========================================================= */ @media (max-width: 767.98px) { body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section { padding: 42px 18px 48px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section--continuation { padding-top: 0; padding-bottom: 28px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro h2 { font-size: 24px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-section--continuation .hm-shears-intro h2 { font-size: 21px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-intro p { font-size: 14.5px; line-height: 1.65; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-panel p, body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-body p { font-size: 14.5px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-list li { font-size: 14.5px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item { display: block; padding: 19px 0; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-item:first-child { padding-top: 3px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-stack-head { margin-bottom: 10px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-more { margin-top: 1px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table { min-width: 940px; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table thead th { font-size: 12px !important; } body:is( #page-20, #page-50, #page-27, #page-32, #page-85 ) .hm-shears-table tbody td { font-size: 13px !important; line-height: 1.45 !important; } } /* ========================================================= MASCHINEN-UNTERSEITEN Gemeinsames Layout für ALLE Maschinen-Unterseiten ========================================================= */ /* ========================================================= BREITE SEITENDARSTELLUNG ========================================================= */ @media (min-width: 1200px) { body:has(.hm-machine-detail) .main > .container { width: 100% !important; max-width: 1440px !important; } body:has(.hm-machine-detail) .main .frame:has(.hm-machine-detail) { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================= GESAMTBEREICH ========================================================= */ .hm-machine-detail { width: 100% !important; max-width: 1380px !important; margin: 0 auto !important; padding: 5px 30px 62px !important; color: #46555A; box-sizing: border-box !important; } /* ========================================================= KOMPAKTE EINLEITUNG ========================================================= */ .hm-machine-detail-lead { width: 100%; max-width: 1100px; margin: 0 0 10px 0 !important; padding: 0 !important; } .hm-machine-detail-lead p { margin: 0 !important; padding: 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.6 !important; text-indent: 0 !important; } /* ========================================================= VORTEILE / EINSATZBEREICH ========================================================= */ .hm-machine-detail-summary { display: grid; grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr); column-gap: 52px; width: 100%; max-width: 1100px; margin: 0 0 26px 0 !important; padding: 13px 0 15px !important; border-top: 1px solid #E3E8E9; border-bottom: 1px solid #E3E8E9; box-sizing: border-box !important; } .hm-machine-detail-summary-block { min-width: 0; margin: 0 !important; padding: 0 !important; } /* ========================================================= VORTEILE / EINSATZBEREICH – ÜBERSCHRIFTEN ========================================================= */ .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block h3 { position: static !important; margin: 0 0 8px 0 !important; padding: 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 1.3 !important; text-indent: 0 !important; border: 0 !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block h3::before, .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block h3::after { content: none !important; display: none !important; } /* ========================================================= VORTEILE ========================================================= */ .hm-machine-detail-summary-block ul { width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; } .hm-machine-detail-summary-block li { margin: 0 !important; padding: 3px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; text-indent: 0 !important; list-style: none !important; border: 0 !important; } .hm-machine-detail-summary-block li::before, .hm-machine-detail-summary-block li::after { content: none !important; display: none !important; } /* ========================================================= EINSATZBEREICH ========================================================= */ .hm-machine-detail-summary-block p { width: 100%; max-width: 760px; margin: 0 !important; padding: 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.55 !important; text-indent: 0 !important; } /* ========================================================= MASCHINENANGEBOTE ========================================================= */ .hm-machine-offers { width: 100%; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= ANGEBOTSGRUPPEN ========================================================= */ .hm-machine-offer-group { width: 100%; margin: 0 0 44px 0 !important; padding: 0 !important; box-sizing: border-box !important; } .hm-machine-offer-group:last-child { margin-bottom: 0 !important; } /* ========================================================= GRUPPENÜBERSCHRIFT ========================================================= */ .hm-machine-offer-group-head { width: 100%; margin: 0 0 17px 0 !important; padding: 0 !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-group-head h2 { position: relative !important; margin: 0 !important; padding: 0 0 11px 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; text-indent: 0 !important; border: 0 !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-group-head h2::before { content: none !important; display: none !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-group-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; display: block !important; width: 42px; height: 2px; background: #328685; } /* ========================================================= MASCHINENRASTER ========================================================= */ .hm-machine-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= MASCHINENKACHEL ========================================================= */ .hm-machine-offer-card { display: flex; flex-direction: column; min-width: 0; height: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; color: #46555A; background: #FFFFFF; border: 1px solid #DDE5E5; border-radius: 2px; box-shadow: 0 6px 18px rgba(34, 51, 59, 0.07); box-sizing: border-box !important; transition: transform 0.20s ease, box-shadow 0.20s ease, border-color 0.20s ease; } /* Komplett klickbare Maschinenkachel */ a.hm-machine-offer-card { color: #46555A !important; text-decoration: none !important; cursor: pointer; } a.hm-machine-offer-card:hover, a.hm-machine-offer-card:focus, a.hm-machine-offer-card:visited { color: #46555A !important; text-decoration: none !important; } .hm-machine-offer-card:hover { transform: translateY(-3px); border-color: #BFD1D1; box-shadow: 0 12px 28px rgba(34, 51, 59, 0.13); } /* ========================================================= BILDBEREICH ========================================================= */ .hm-machine-offer-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 220px; margin: 0 !important; padding: 0 !important; overflow: hidden; background: linear-gradient( 135deg, #EDF2F2 0%, #E5EBEB 100% ); color: #77878B; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; box-sizing: border-box !important; } .hm-machine-offer-image img { display: block; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; object-fit: cover; transition: transform 0.35s ease; } .hm-machine-offer-card:hover .hm-machine-offer-image img { transform: scale(1.035); } /* ========================================================= KACHELINHALT ========================================================= */ .hm-machine-offer-content { position: relative; display: flex; flex-direction: column; flex-grow: 1; margin: 0 !important; padding: 20px 22px 19px !important; background: #FFFFFF; box-sizing: border-box !important; } .hm-machine-offer-content::before { content: ""; position: absolute; top: 0; left: 22px; width: 38px; height: 3px; background: #328685; } /* ========================================================= MODELLBEZEICHNUNG Modern / kompakt / ruhig ========================================================= */ .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-content h3 { position: static !important; margin: 0 0 4px 0 !important; padding: 0 !important; color: #22333B !important; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -0.15px !important; text-indent: 0 !important; border: 0 !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-content h3::before, .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-content h3::after { content: none !important; display: none !important; } /* ========================================================= BAUREIHE Klein und dezent direkt unter dem Modellnamen ========================================================= */ .hm-machine-offer-series { margin: 0 0 14px 0 !important; padding: 0 !important; color: #77878B !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.35 !important; letter-spacing: 0.05px !important; } /* ========================================================= TECHNISCHE KURZANGABEN Bezeichnung fett / Wert normal ========================================================= */ .hm-machine-offer-specs { flex-grow: 1; width: 100%; margin: 0 0 7px 0 !important; padding: 0 !important; list-style: none !important; } .hm-machine-offer-specs li { display: grid; grid-template-columns: minmax(95px, max-content) minmax(0, 1fr); column-gap: 7px; align-items: baseline; margin: 0 !important; padding: 6px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.45 !important; list-style: none !important; border-bottom: 1px solid #E5E9EA; } .hm-machine-offer-specs li::before, .hm-machine-offer-specs li::after { content: none !important; display: none !important; } .hm-machine-offer-specs li:last-child { border-bottom: 0; } .hm-machine-offer-specs li strong { color: #34444A !important; font-weight: 700 !important; } .hm-machine-offer-specs li span { min-width: 0; color: #46555A !important; font-weight: 400 !important; } /* ========================================================= MASCHINE ANSEHEN ========================================================= */ .hm-machine-offer-link { display: inline-block; align-self: flex-start; margin-top: auto; color: #328685; font-family: "Montserrat", "Open Sans", Arial, sans-serif !important; font-size: 12.5px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: color 0.18s ease, transform 0.18s ease; } .hm-machine-offer-card:hover .hm-machine-offer-link { color: #266E6D; transform: translateX(3px); } /* ========================================================= GROSSER DESKTOP 4 Kacheln pro Reihe ========================================================= */ @media (min-width: 1200px) { .hm-machine-offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .hm-machine-offer-image { height: 190px; } .hm-machine-offer-content { padding: 14px 18px 17px !important; } .hm-machine-offer-content::before { left: 18px; width: 34px; } .hm-machine-offer-specs { margin-bottom: 11px !important; } .hm-machine-offer-specs li { padding: 6px 0 !important; font-size: 13.5px !important; } .hm-machine-offer-link { font-size: 12px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991.98px) { .hm-machine-detail { padding: 10px 24px 56px !important; } .hm-machine-detail-summary { grid-template-columns: minmax(220px, 0.38fr) minmax(0, 0.62fr); column-gap: 32px; } .hm-machine-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .hm-machine-offer-image { height: 210px; } } /* ========================================================= MOBIL ========================================================= */ @media (max-width: 767.98px) { .hm-machine-detail { padding: 8px 18px 48px !important; } .hm-machine-detail-lead { margin-bottom: 10px !important; } .hm-machine-detail-lead p { font-size: 14px !important; line-height: 1.6 !important; } .hm-machine-detail-summary { display: block; margin-bottom: 25px !important; padding: 13px 0 15px !important; } .hm-machine-detail-summary-block:first-child { margin-bottom: 16px !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block h3 { font-size: 15px !important; } .hm-machine-detail-summary-block p, .hm-machine-detail-summary-block li { font-size: 14px !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-group-head h2 { font-size: 23px !important; } .hm-machine-offer-grid { grid-template-columns: 1fr; gap: 18px; } .hm-machine-offer-image { height: 200px; } .hm-machine-offer-content { padding: 17px 18px 18px !important; } .hm-machine-offer-content::before { left: 18px; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-offer-content h3 { font-size: 19px !important; } .hm-machine-offer-specs li { font-size: 14px !important; } } /* ========================================================= MASCHINEN-UNTERSEITEN KORREKTUR LISTEN GEGEN main.css ========================================================= */ .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block ul > li { position: static !important; margin: 0 0 3px 0 !important; padding: 3px 0 !important; color: #46555A !important; font-family: "Inter", "Open Sans", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; text-indent: 0 !important; list-style: none !important; border: 0 !important; } .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block ul > li::before, .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block ul > li::after, .main .frame:not(:has(.rev_slider)) .hm-machine-detail .hm-machine-detail-summary-block ul > li::marker { content: none !important; display: none !important; }