/* Brücke Eclipse 2.x (Themer 2.15) -> EclipseX 6.3.3, Contao-5-Update 28.10.2026. Regeln aus dem alten Theme-CSS, die EclipseX nicht mehr mitbringt. Eingebunden in fe_page*.html5 nach customize.css. */ body { font-family: "Source Sans Pro", sans-serif; } /* Offcanvas oben: live ohne Inhalt und ohne Auslöser, war nie sichtbar */ #offcanvas-top { display: none; } /* Top-Leiste: lose Module statt Autogrid-Artikel -> Floats wie Eclipse 2.x */ #top { font-size: 0.93rem; } #top .inside.topbar { overflow: hidden; } #top .mod_top_phone { float: left; margin-right: 15px; } #top .mod_top_mail { float: left; } #top .mod_socials { float: right; margin-left: 15px; } #top .mod_socials a { line-height: 35px; } #top .mod_socials a i { width: 35px; height: auto; border-radius: 0; line-height: 37.5px; } #top .top_metanavi { float: right; } #top .mod_langswitcher { display: none; } /* Cookie-Banner (mod_cookiebar_slim) */ .cookiebar_slim { position: fixed; bottom: 0; left: 0; width: 100%; color: rgb(255,255,255); background: rgb(0,0,0); z-index: 100000000000; box-shadow: 0 0 2px 2px rgba(0,0,0,0.1); display: none; } .cookiebar_open .cookiebar_slim { display: block; } .cookiebar_slim_overlay { z-index: 10000000; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; background: rgba(0,0,0,0.6); display: none; } .cookiebar_open .cookiebar_slim_overlay { display: block; } .cookiebar_slim .contentwrap { padding-top: 15px; padding-bottom: 15px; } .cookiebar_slim .autogrid_row { align-items: center; } .cookiebar_slim .buttons { text-align: right; } .cookiebar_slim .cookiebar_button { display: inline-block; } .cookiebar_slim .cookiebar_button a { padding: 5px; min-width: 140px; margin: 5px 0; } .cookiebar_slim .content a { color: rgb(255,255,255); text-decoration: underline; } .cookiebar_slim .content { line-height: 1.5; } .hide_optin .mod_cookiebar_optin_slim { display: none !important; } body.fixed-header.cookiebar_open #top_link { opacity: 1; bottom: 70px; } @media (max-width: 767px) { .cookiebar_slim .cookiebar_button { display: block; } } /* ===== Kunden-CSS (customize.css) mit Autogrid-1.x-Selektoren, automatisch umgeschrieben auf .autogrid_row/.column/.attributes (grid-css-bridge.py; nicht mehr vorhandene IDs ausgelassen) ===== */ .hexbg .ce_bgimage-outer .ce_bgimage-inside.contentwrap.pt-xxs.pb-xxs .autogrid_row { display: -ms-grid !important; display: grid !important; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "top bottom"; } .hexbg .column.one_half { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: top; width: 80%; left:20%; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: bottom; width: 100%; left: 0%; top: 40%; } #article-12508 .column.one_half:first-child { padding-left:4%; } .column.one_fourth .attributes:nth-child(2) { margin-top: 7%; } .cta .column.two_third { width: 60.667%; margin-left: 4%; } .cta .column.two_third { flex: 0 0 auto; } /* Breite wie früher, sonst bricht die Zeile um */ @media only screen and (max-width: 1800px) { #informationen .contentwrap .autogrid_row { margin-right: 20%; } } @media only screen and (max-width: 1620px) { .tripletopbild .column.one_half { left:3%; } } @media only screen and (max-width: 1333px) { #informationen .contentwrap .autogrid_row { margin-left: 1%; } } @media only screen and (max-width: 1240px) { .hexbg .ce_bgimage-outer .ce_bgimage-inside.contentwrap.pt-xxs.pb-xxs .autogrid_row { display: -ms-grid !important; display: grid !important; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: minmax(100px, 1fr) !important; grid-template-rows: minmax(100px, 1fr) !important; grid-template-areas: "top bottom"; } .hexbg .column.one_half { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: top; width: 100%; left:0%; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 2; grid-area: bottom; width: 100%; top: 45%; } .hexbg .column.one_half { -ms-grid-row: 1; -ms-grid-column: 1; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 2; } .hexbg .column.one_half { -ms-grid-row: 1; -ms-grid-column: 1; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 2; } } @media only screen and (max-width: 1000px) { .hexbg .ce_bgimage-outer .ce_bgimage-inside.contentwrap.pt-xxs.pb-xxs .autogrid_row { display: -ms-grid !important; display: grid !important; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: minmax(100px, 1fr) !important; grid-template-rows: minmax(100px, 1fr) !important; grid-template-areas: "bottom" "top"; } .hexbg .ce_bgimage-outer .ce_bgimage-inside.contentwrap.pt-xxs.pb-xxs .autogrid_row { height: 100%; } #article-12746 .hexbg .column.hextext.one_half, #article-12774 .hexbg .column.hextext.one_half, #article-12802 .hexbg .column.hextext.one_half { margin-top: 0%; } .hexbg .column.one_half { -ms-grid-row: 2; -ms-grid-column: 1; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 1; } .hexbg .column.one_half { -ms-grid-row: 2; -ms-grid-column: 1; } .hexbg .column.hextext.one_half { -ms-grid-row: 1; -ms-grid-column: 1; } } @media only screen and (max-width: 767px) { #article-12746 .hexbg .column.hextext.one_half, #article-12774 .hexbg .column.hextext.one_half, #article-12802 .hexbg .column.hextext.one_half { margin-top: 10%; } .hexbg .column.one_half { top:5%; } .hexbg .column.hextext.one_half { top:0% !important; } #article-12568 .column.one_fourth { position: relative; } .tripletopbild .column.one_half { left: 0%; } .cta .column.two_third { margin-left: 0%; } .cta .column.two_third { flex: 0 0 100%; width: 100%; } .hexbg .column.one_half { left: 5%; } .hexbg .column.hextext.one_half { left: 0%; } .kleine_hex_seitlich .column.one_fourth { left: 7%; padding: 0% !important; margin-top:25px; } } @media only screen and (max-width: 450px) { .ce_bgimage_93517 .column.one_fourth { transform: translateY(35px); -webkit-transform: translateY(35px); -moz-transform: translateY(35px); -ms-transform: translateY(35px); -o-transform: translateY(35px); } } /* ===== Artikel-Autogrid (tl_article.autogrid, Autogrid 1.x) gibt es in EclipseX nicht mehr: Artikelpaare 12700/12697 (Dienstleistungen) und 12726/12727 (Wohnkultur) nebeneinander ===== */ #main > .inside:has(> #article-12700), #main > .inside:has(> #article-12726) { display: flex; flex-wrap: wrap; } #main > .inside:has(> #article-12700) > *, #main > .inside:has(> #article-12726) > * { flex: 0 0 100%; min-width: 0; } #main > .inside > #article-12700, #main > .inside > #article-12697, #main > .inside > #article-12726, #main > .inside > #article-12727 { flex: 0 0 50%; max-width: 50%; padding: 0 !important; } .ce_bgimage_93200, .ce_bgimage_93572 { padding-left: 20%; padding-right: 5%; height: 100%; } .ce_bgimage_93145, .ce_bgimage_93585 { height: 100%; padding-right: 20%; padding-left: 5%; } @media only screen and (max-width: 1620px) { .ce_bgimage_93145, .ce_bgimage_93585 { padding-right: 5%; } .ce_bgimage_93200, .ce_bgimage_93572 { padding-left: 5%; } } @media only screen and (max-width: 767px) { #main > .inside > #article-12700, #main > .inside > #article-12697, #main > .inside > #article-12726, #main > .inside > #article-12727 { flex: 0 0 100%; max-width: 100%; } #article-12726 h2, #article-12727 h2 { margin-top: 0px !important; padding-top: 60px; } .ce_bgimage_93200, .ce_bgimage_93572, .ce_bgimage_93145, .ce_bgimage_93585 { padding-left: 10%; padding-right: 10%; height: 100%; } } @media only screen and (max-width: 450px) { .ce_bgimage_93200, .ce_bgimage_93572, .ce_bgimage_93145, .ce_bgimage_93585 { padding-left: 4%; padding-right: 4%; } #article-12726 h2, #article-12727 h2 { margin-top: 0px !important; padding-top: 40px; } } /* ===== Kundenzusätze aus der alten files/cto_layout/css/styles.css (Abgleich mit mze.de; das EclipseX-Paket hat die Datei ersetzt) ===== */ .ce_iconbox.version2 strong { font-size: 1.35em; font-style: italic; font-weight: 800; text-transform: uppercase; } .two-col-list ul { width: 100%; padding-left: unset; overflow: visible; list-style-position: inside; column-count: 2; } #main .LV_validation_message { color: red !important; } /* ===== Elemente, deren Bild in EclipseX über .image_container statt .image positioniert wird (Kundenregeln zielen auf .image) ===== */ .ce_authorbox.style2 .image { float: left; width: 30%; } .ce_authorbox.style2 .image .image_container { float: none; width: auto; } .ce_testimonial_version4 .image { position: absolute; top: 0; } .ce_testimonial_version4 .image .image_container { position: static; } @media only screen and (max-width: 767px) { .ce_authorbox.style2 .image { width: 100%; float: none; } } /* ===== Buttons (ce_hyperlink) wie Eclipse 2.x; EclipseX setzt den Text in ein , das die Kundenregel „#main span“ einfärbt ===== */ :root { --hyperlink-default-font-size: 0.9rem; --hyperlink-default-padding-top: 12px; --hyperlink-default-padding-bottom: 12px; --hyperlink-default-padding-left: 20px; --hyperlink-default-padding-right: 20px; --hyperlink-default-min-width: 190px; } #main .ce_hyperlink a span, #footer .ce_hyperlink a span { color: inherit; } /* Kundenregeln „.bg-lightgray *“ / „.bg-darkgray *“ sind !important und treffen auch das */ .ce_hyperlink .hyperlink_txt span { color: inherit !important; } /* Größen: Eclipse 2.x wide → btn-size-large, large → btn-size-medium */ .ce_hyperlink.btn-size-large a { padding: 15px 50px; font-size: var(--hyperlink-default-font-size); } .ce_hyperlink.btn-size-medium a { padding: 20px 30px; font-size: var(--hyperlink-default-font-size); min-width: 190px; } /* Hover wie Eclipse 2.x (link-white, link-white outline); btn-accent behält nur die Deckkraft 0.8 */ .ce_hyperlink.btn-white a:hover { background: #204085; border-color: #fff; color: #fff; } .ce_hyperlink.btn-white-outline a:hover { background: #fff; border-color: #fff; color: #252525; } /* ===== Formulare (form.style5): EclipseX rundet Felder und Absenden-Button, Eclipse 2.x nicht ===== */ form.style5 input, form.style5 select, form.style5 textarea { border-radius: 0; padding: 15px; } input.submit, button.submit { border-radius: 3px; } form.style5 input.submit, form.style5 button.submit { padding: 15px 20px; font-size: 0.8rem; } /* ===== Artikel-Klassen pt-0/pb-0: EclipseX setzt den Innenabstand auf .container im Artikel, nicht auf den Artikel ===== */ .mod_article.pt-0 > .container { padding-top: 0 !important; } .mod_article.pb-0 > .container { padding-bottom: 0 !important; } /* ===== Überschriften: EclipseX gibt aus, Theme-Regeln .hN schlagen die Kundenregeln hN -> wiederholt als hN.hN (hfix.py über customize.css + Theme-Designer-CSS) ===== */ h1.h1, h2.h2, h3.h3, h4.h4, h5.h5, h6.h6 {font-family: 'Open Sans', sans-serif !important; color: #434f4f;} h1.h1 {font-style: italic; text-transform: uppercase; font-weight: 800; font-size: 2.7rem;} h2.h2 {font-style: italic; text-transform: uppercase; font-weight: 800; font-size: 2.3rem;} h3.h3 {font-style: italic; text-transform: uppercase; font-weight: 800; font-size: 2.0rem;} #article-12816 h3.h3 {font-size: 1.5rem;} #article-12501 h3.h3 {padding-left: 10px;} .acc2 .image_title a h3.h3 {display: block; color: #fff; text-decoration: none; padding: 20px; font-size: 24px; text-align: center; padding-top:10%;} .ce_authorbox_content h6.h6 {color: white !important;} #article-12489 h2.h2 {color: white !important;} .newsteaser-v4 .content h6.h6 {text-align: left;} .newsteaser-v4 .content h6.h6 {min-height:50px;} #article-12496 .newsteaser-v4 h6.h6 {color: #434f4f;} #article-13119 .newsteaser-v4 h6.h6 {color: #434f4f;} @media only screen and (max-width: 1920px) { h1.h1 {font-size: 2.4rem;} } @media only screen and (max-width: 1920px) { h2.h2 {font-size: 2.0rem;} } @media only screen and (max-width: 1920px) { h3.h3 {font-size: 1.7rem;} } @media only screen and (max-width: 1620px) { .ce_bgimage_93572 > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > h2.h2:nth-child(1) {max-width: 400px;} } @media only screen and (max-width: 767px) { h1.h1 {font-size: 1.9rem;} } @media only screen and (max-width: 767px) { h2.h2 {font-size: 1.6rem;} } @media only screen and (max-width: 767px) { h3.h3 {font-size: 1.4rem;} } @media only screen and (max-width: 767px) { .cta h3.h3 {margin-top: 10px;} } @media only screen and (max-width: 767px) { .accordian ul li h3.h3 {text-decoration: underline !important;} } @media only screen and (max-width: 767px) { .accordian ul li:hover h3.h3 {padding-top:20%;} } @media only screen and (max-width: 767px) { .mod_article:first-of-type > .ce_headline_extended > h2.h2 {margin-top:100px;} } @media only screen and (max-width: 767px) { .acc2 .image_title a h3.h3 {padding-top:1%;} } @media only screen and (max-width: 767px) { #article-12489 h2.h2, #article-12703 h2.h2, #autogrid_wrapper_12726 h2.h2, #article-12761 h2.h2 {margin-top: 120px !important;} } @media only screen and (max-width: 767px) { #autogrid_wrapper_12726 h2.h2 {margin-top: 0px !important; padding-top: 60px;} } @media only screen and (max-width: 450px) { h1.h1 {font-size: 1.6rem;} } @media only screen and (max-width: 450px) { h2.h2 {font-size: 1.4rem;} } @media only screen and (max-width: 450px) { h3.h3 {font-size: 1.2rem;} } @media only screen and (max-width: 450px) { #article-12489 h2.h2, #article-12703 h2.h2, #autogrid_wrapper_12726 h2.h2, #article-12761 h2.h2 {margin-top: 40px !important;} } @media only screen and (max-width: 450px) { #autogrid_wrapper_12726 h2.h2 {margin-top: 0px !important; padding-top: 40px;} } .divider-v2 h1.h1:after, .divider-v2 h2.h2:after, .divider-v2 h3.h3:after, .divider-v2 h4.h4:after, .dividerv h5.h5:after, .divider-v2 h6.h6:after {background: #204085;} .mod_faqpage h3.h3:before {color: #204085;} .newslist h2.h2 {color: #204085;} .color-accent h1.h1, .color-accent h2.h2, .color-accent h3.h3, .color-accent h4.h4, .color-accent h5.h5, .color-accent h6.h6 {color: #204085;} .ce_headertext h1.h1:after, .ce_headertext h2.h2:after, .ce_headertext h3.h3:after, .ce_headertext h4.h4:after, .ce_headertext h5.h5:after, .ce_headertext h6.h6:after {background: #204085;} .newslist-timeline-both h4.h4:before {border-color: #204085;} .ce_linkbox h4.h4 {color: #204085;} .newsteaser_v7:hover h5.h5 {color: #204085;} .mod_eventlist_v3 h4.h4 {color: #204085;} .mod_portfoliolist_demos .item h5.h5:hover {color: #204085;} #footer h1.h1, #footer h2.h2, #footer h3.h3, #footer h4.h4, #footer h5.h5, #footer h6.h6 {color: #ffffff;} /* ===== Farben: EclipseX-Akzent (Standard Pink) = Theme-Designer-Farbe; mobiler Menü-Auslöser im blauen Header weiß, ohne Text (wie live) ===== */ :root { --accentColor: #204085; } .header .mmenu_trigger { color: #fff; } .header .mmenu_trigger .label { display: none; } .header .mmenu_trigger .burger .burger_lines, .header .mmenu_trigger .burger .burger_lines:before, .header .mmenu_trigger .burger .burger_lines:after { background: #fff; } .header .mmenu_trigger .burger.open .burger_lines { background: transparent; } /* ===== Rückmeldung 28.10. (Wohnkultur u. a.) ===== */ /* Überschriften in Elementen mit „weiße Schrift“: die hN.hN-Kundenregel (#434f4f) darf .color-white nicht schlagen */ .color-white h1.h1, .color-white h2.h2, .color-white h3.h3, .color-white h4.h4, .color-white h5.h5, .color-white h6.h6, .txt-color-white h1.h1, .txt-color-white h2.h2, .txt-color-white h3.h3, .txt-color-white h4.h4, .txt-color-white h5.h5, .txt-color-white h6.h6, .bg-darkgray h1.h1, .bg-darkgray h2.h2, .bg-darkgray h3.h3, .bg-darkgray h4.h4, .bg-darkgray h5.h5, .bg-darkgray h6.h6 { color: #fff; } #informationen .bg-lightgray h1.h1, #informationen .bg-lightgray h2.h2, #informationen .bg-lightgray h3.h3, #informationen .bg-lightgray h4.h4, #informationen .bg-lightgray h5.h5, #informationen .bg-lightgray h6.h6 { color: white !important; } /* Nach-oben-Button wie Eclipse 2.x: weißes Sechseck (Kundenregel), ohne Fortschrittsring */ #top_link.top-link { width: 45px; height: 45px; border-radius: 0; background: rgba(255,255,255,0.9); -webkit-clip-path: polygon(26.5% 5%, 73.5% 5%, 100% 50%, 73.5% 95%, 26.5% 95%, 0% 50%); clip-path: polygon(26.5% 5%, 73.5% 5%, 100% 50%, 73.5% 95%, 26.5% 95%, 0% 50%); } #top_link.top-link .progress-ring { display: none; } #top_link.top-link a { width: 100%; height: 100%; color: #434f4f; font-size: 16px; background: none; } /* FAQ/Akkordeon wie Eclipse 2.x: Kasten je Eintrag statt Trennlinie; EclipseX-Toggler ist ein