/*
 * pm_template J6 overrides (loaded after the ported J3 CSS chain).
 * Rules to bridge gaps between J3 (BS2.3) markup expectations and the
 * J6 (BS5) module + nav output. Will be folded into the M5 SCSS pass later.
 */

/* ----- ETO quick-links + Careers (eto-jobs) row — pixel-match J3 -----
   These are the same rules as J3 styles.css lines 1251-1285, 1330-1335,
   1606-1637, restated here with !important so they always win regardless of
   load order, browser cache, or any module-style override. Markup expected:
       <div class="below_page_split">
         <div class="container">
           <div class="row-fluid row">
             <div id="module_NNN" class="quick-links span6 col-12 col-md-6">
               <h3>ETO quick links</h3>   (Show Title = Yes in admin)
               …content…
             </div>
             <div id="module_NNN" class="eto-jobs span6 col-12 col-md-6">
               <h3>Careers at ETO</h3>    (Show Title = Yes in admin)
               <ul><li><a>…</a></li>…</ul>
             </div>
           </div>
         </div>
       </div>
*/
.below_page_split {
    background: #f0f0f1 !important;
    position: relative !important;
    overflow-x: hidden !important;
    margin-top: 100px !important;
    margin-bottom: 70px !important;
}

/* ----- Home hero Smart Slider 3 pagination -----
   J3's home slider reserved a white pagination band below the image. Smart
   Slider 3 renders the bullets as absolute controls, so J6 needs explicit
   space below the slide and the controls moved into that space. */
body.frontpage #banner .banner_home,
body.is_frontpage #banner .banner_home {
    position: relative !important;
    padding-bottom: 87px !important;
}

body.frontpage #banner .banner_home .n2-section-smartslider,
body.frontpage #banner .banner_home .n2-ss-align,
body.frontpage #banner .banner_home .n2-ss-slider,
body.frontpage #banner .banner_home .n2-ss-slider-wrapper-inside,
body.is_frontpage #banner .banner_home .n2-section-smartslider,
body.is_frontpage #banner .banner_home .n2-ss-align,
body.is_frontpage #banner .banner_home .n2-ss-slider,
body.is_frontpage #banner .banner_home .n2-ss-slider-wrapper-inside {
    overflow: visible !important;
}

body.frontpage #banner .banner_home .n2-ss-slider-wrapper-inside .n2-ss-slider-controls-absolute-center-bottom,
body.is_frontpage #banner .banner_home .n2-ss-slider-wrapper-inside .n2-ss-slider-controls-absolute-center-bottom {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 87px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-flow: column !important;
    visibility: visible !important;
    pointer-events: none !important;
}

body.frontpage #banner .banner_home .n2-ss-control-bullet,
body.is_frontpage #banner .banner_home .n2-ss-control-bullet {
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding-top: 38px !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body.frontpage #banner .banner_home .nextend-bullet-bar,
body.is_frontpage #banner .banner_home .nextend-bullet-bar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    visibility: visible !important;
}

body.frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet,
body.is_frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #d3d3d4 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet.n2-active,
body.frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet:hover,
body.frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet:focus,
body.is_frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet.n2-active,
body.is_frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet:hover,
body.is_frontpage #banner .banner_home .nextend-bullet-bar .n2-bullet:focus {
    background: #7b7c7f !important;
}

/* Final mobile drawer pass: target the rendered J6 collapse directly so
   Bootstrap/nav defaults cannot enlarge the menu or hide the parent arrows. */
@media (max-width: 991px) {
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #ececec !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li > a,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li > a {
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 15px 56px 14px 24px !important;
        color: #111 !important;
        background: #fff !important;
        border: 0 !important;
        font-size: 18px !important;
        line-height: 31px !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.active > a.nav-link,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.current > a.nav-link,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.active > a.nav-link,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.current > a.nav-link {
        background: #0065b3 !important;
        color: #fff !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.parent > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.dropdown > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.parent > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.dropdown > a.nav-link::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 22px !important;
        width: 0 !important;
        height: 0 !important;
        margin: -6px 0 0 0 !important;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-top: 16px solid currentColor !important;
        border-bottom: 0 !important;
        transform: none !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.parent.pm-submenu-open > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.dropdown.pm-submenu-open > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.parent.pm-submenu-open > a.nav-link::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.dropdown.pm-submenu-open > a.nav-link::after {
        transform: rotate(180deg) !important;
        margin-top: -9px !important;
    }

    body.pm-template #mainmenu-collapse.show .dropdown-menu,
    body.pm-template #mainmenu-collapse.show .nav-child,
    body.pm-template #mainmenu-collapse.show .mod-menu__sub {
        display: none !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f7f7f7 !important;
    }

    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .dropdown-menu,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .nav-child,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .mod-menu__sub {
        display: block !important;
    }

    body.pm-template #mainmenu-collapse.show .dropdown-menu a,
    body.pm-template #mainmenu-collapse.show .nav-child a,
    body.pm-template #mainmenu-collapse.show .mod-menu__sub a {
        display: block !important;
        padding: 12px 24px 12px 42px !important;
        color: #111 !important;
        font-size: 18px !important;
        line-height: 24px !important;
        text-transform: uppercase !important;
        background: #f7f7f7 !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra {
        display: block !important;
        padding: 34px 0 80px !important;
        text-align: left !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra h3 {
        display: block !important;
        margin: 0 !important;
        padding: 0 24px 10px !important;
        color: #111 !important;
        font-size: 27px !important;
        line-height: 33px !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra a {
        padding: 15px 24px 14px !important;
        color: #111 !important;
        font-size: 18px !important;
        line-height: 31px !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }
}

/* Final mobile footer pass: loaded after every footer/grid rule. */
@media screen and (max-width: 767px) {
    #footer.footer_container,
    .footer_container {
        padding: 42px 0 !important;
        overflow: hidden !important;
    }

    #footer .container.footer_inner,
    .footer_container .footer_inner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #footer .container.footer_inner > .row-fluid,
    #footer .container.footer_inner > .row,
    .footer_container .footer_inner > .row-fluid,
    .footer_container .footer_inner > .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #footer .footer_inner .module,
    #footer .footer_inner .moduletable,
    #footer .footer_inner .module:first-child,
    .footer_container .footer_inner .module,
    .footer_container .footer_inner .moduletable,
    .footer_container .footer_inner .module:first-child {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #footer .footer_inner .module h3,
    #footer .footer_inner .moduletable h3,
    .footer_container .footer_inner .module h3,
    .footer_container .footer_inner .moduletable h3 {
        min-height: 0 !important;
        margin: 0 0 36px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 26px !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    #footer .footer_inner .module ul,
    #footer .footer_inner .moduletable ul,
    #footer .footer_inner .module .nav,
    #footer .footer_inner .moduletable .nav,
    #footer .footer_inner .module .mod-menu,
    #footer .footer_inner .moduletable .mod-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer .footer_inner .module li,
    #footer .footer_inner .moduletable li,
    #footer .footer_inner .module .nav li,
    #footer .footer_inner .moduletable .nav li,
    #footer .footer_inner .module .mod-menu li,
    #footer .footer_inner .moduletable .mod-menu li {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #909090 !important;
        text-align: left !important;
    }

    #footer .footer_inner .module a,
    #footer .footer_inner .moduletable a,
    #footer .footer_inner .module .nav li a,
    #footer .footer_inner .moduletable .nav li a,
    #footer .footer_inner .module .mod-menu li a,
    #footer .footer_inner .moduletable .mod-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        color: #e8e8e8 !important;
        font-size: 17px !important;
        line-height: 28px !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #facebook_like {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 24px 0 0 !important;
        text-align: center !important;
    }

    #facebook_like .custom,
    #facebook_like p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

@media screen and (max-width: 767px) {
    #footer.footer_container,
    .footer_container {
        padding: 42px 0 !important;
        overflow: hidden !important;
    }

    #footer .container.footer_inner,
    .footer_container .footer_inner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #footer .container.footer_inner > .row-fluid,
    #footer .container.footer_inner > .row,
    .footer_container .footer_inner > .row-fluid,
    .footer_container .footer_inner > .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #footer .footer_inner .module,
    #footer .footer_inner .moduletable,
    #footer .footer_inner .module:first-child,
    .footer_container .footer_inner .module,
    .footer_container .footer_inner .moduletable,
    .footer_container .footer_inner .module:first-child {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #footer .footer_inner .module h3,
    #footer .footer_inner .moduletable h3,
    .footer_container .footer_inner .module h3,
    .footer_container .footer_inner .moduletable h3 {
        min-height: 0 !important;
        margin: 0 0 36px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 26px !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    #footer .footer_inner .module ul,
    #footer .footer_inner .moduletable ul,
    #footer .footer_inner .module .nav,
    #footer .footer_inner .moduletable .nav,
    #footer .footer_inner .module .mod-menu,
    #footer .footer_inner .moduletable .mod-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer .footer_inner .module li,
    #footer .footer_inner .moduletable li,
    #footer .footer_inner .module .nav li,
    #footer .footer_inner .moduletable .nav li,
    #footer .footer_inner .module .mod-menu li,
    #footer .footer_inner .moduletable .mod-menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
        border-bottom: 1px solid #909090 !important;
        text-align: left !important;
    }

    #footer .footer_inner .module a,
    #footer .footer_inner .moduletable a,
    #footer .footer_inner .module .nav li a,
    #footer .footer_inner .moduletable .nav li a,
    #footer .footer_inner .module .mod-menu li a,
    #footer .footer_inner .moduletable .mod-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        color: #e8e8e8 !important;
        font-size: 17px !important;
        line-height: 28px !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #facebook_like {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 24px 0 0 !important;
        text-align: center !important;
        clear: both !important;
    }

    #facebook_like .custom,
    #facebook_like p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

/* Mobile active search: compact overlay that stays inside the 412px header. */
@media (max-width: 991px) {
    body.pm-template #topbar .pm-search.active {
        width: 214px !important;
        height: 48px !important;
        margin-right: 8px !important;
    }

    body.pm-template #topbar .pm-search.active form {
        width: 214px !important;
        height: 48px !important;
    }

    body.pm-template #topbar .pm-search.active input[type="search"] {
        top: -11px !important;
        right: -54px !important;
        width: 214px !important;
        max-width: calc(100vw - 168px) !important;
        height: 48px !important;
        padding: 0 72px 0 8px !important;
        border: 1px solid #005ca9 !important;
        font-size: 16px !important;
        line-height: 46px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.pm-template #topbar .pm-search.active .pm-search-close {
        top: -11px !important;
        right: -18px !important;
        width: 34px !important;
        height: 48px !important;
        line-height: 48px !important;
    }

    body.pm-template #topbar .pm-search.active .pm-search-close::before {
        font-size: 24px !important;
        line-height: 48px !important;
    }

    body.pm-template #topbar .pm-search.active .pm-search-submit {
        top: -11px !important;
        right: -52px !important;
        width: 34px !important;
        height: 48px !important;
        line-height: 48px !important;
    }

    body.pm-template #topbar .pm-search.active .pm-search-submit::before {
        font-size: 27px !important;
        line-height: 48px !important;
    }
}
.below_page_split > .container,
.below_page_split .row-fluid,
.below_page_split .row {
    position: relative !important;
}
.below_page_split .row-fluid,
.below_page_split .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.below_page_split .quick-links,
.below_page_split .eto-jobs {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.quick-links {
    padding: 40px 0 50px !important;
}
.quick-links h3 {
    color: #005ca9 !important;
    font-size: 36px !important;
    line-height: 38px !important;
    text-align: left !important;
    margin-bottom: 8px !important;
}
.quick-links h4,
.quick-links p:first-of-type {
    text-align: left !important;
    margin-bottom: 18px !important;
}
.quick-links a {
    color: #005ca9 !important;
    font-weight: bold !important;
}
.quick-links p {
    color: #666 !important;
    margin: 18px 0 !important;
}
.quick-links p a:hover {
    color: #666 !important;
    text-decoration: underline !important;
}
/* eto-jobs: blue right-half band via :before, white headings + links */
.eto-jobs {
    position: relative !important;
}
.eto-jobs:before {
    content: "" !important;
    background: #005ca9 !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: -9999px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    z-index: 0 !important;
}
.eto-jobs > * {
    position: relative !important;
    z-index: 1 !important;
}
.eto-jobs,
.eto-jobs h3,
.eto-jobs p,
.eto-jobs ul,
.eto-jobs li,
.eto-jobs a {
    color: #fff !important;
}
.eto-jobs {
    padding: 40px 20px 40px 40px !important;
}
.eto-jobs h3 {
    margin-bottom: 25px !important;
}
.eto-jobs ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}
.eto-jobs ul li {
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.eto-jobs ul li:last-child {
    border-bottom: 0 !important;
}
.eto-jobs ul li a {
    font-size: 18px !important;
    line-height: 26px !important;
    color: #fff !important;
    text-decoration: none !important;
}
.eto-jobs ul li a:hover {
    color: #cfe6ff !important;
    text-decoration: underline !important;
}

@media screen and (max-width: 767px) {
    .below_page_split {
        overflow-x: visible !important;
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        background: #f0f0f1 !important;
    }

    .below_page_split > .container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .below_page_split .row-fluid,
    .below_page_split .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .below_page_split .quick-links,
    .below_page_split .eto-jobs {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .quick-links {
        padding: 40px 10px !important;
        background: #f0f0f1 !important;
    }

    .quick-links h3 {
        margin: 0 0 18px !important;
        font-size: 40px !important;
        line-height: 48px !important;
    }

    .quick-links p {
        margin: 18px 0 !important;
        font-size: 21px !important;
        line-height: 34px !important;
    }

    .eto-jobs {
        padding: 40px 10px 76px !important;
        background: #0066b3 !important;
    }

    .eto-jobs:before {
        display: none !important;
    }

    .eto-jobs h3 {
        margin: 0 0 42px !important;
        color: #fff !important;
        font-size: 40px !important;
        line-height: 48px !important;
        font-weight: 700 !important;
    }

    .eto-jobs p {
        margin: 0 0 24px !important;
        color: #fff !important;
    }

    .eto-jobs p:last-child {
        margin-bottom: 0 !important;
    }

    .eto-jobs p a,
    .eto-jobs .custom a {
        color: #fff !important;
        font-size: 21px !important;
        line-height: 34px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
    }
}

/* ----- Hide com_content custom-fields list globally -----
   J6 renders article custom fields as `<ul class="fields-container">` above
   the article body (the "0,00 / 20,20" list you saw on the homepage). J3 did
   not show this, so we hide it the same sr-only way as .page-header — kept
   in DOM for screen readers + microdata, removed visually. To re-enable on
   a single page, override with `.fields-container { position: static; … }`
   in a per-page custom CSS. */
.fields-container,
ul.fields-container,
dl.fields-container {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ----- Frontpage component/module bridge -----
   J3 frontpage uses one static intro article, then below_content modules. */
body.frontpage #page,
body.is_frontpage #page {
    margin-bottom: 0 !important;
}

body.frontpage #component_wrapper,
body.frontpage #component,
body.is_frontpage #component_wrapper,
body.is_frontpage #component {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.frontpage #below_content,
body.is_frontpage #below_content {
    margin-top: 0 !important;
}

body.frontpage #k2static.pm-frontpage-intro,
body.is_frontpage #k2static.pm-frontpage-intro {
    width: 1180px !important;
    max-width: calc(100vw - 60px) !important;
    margin: 70px auto 76px !important;
    padding: 0 !important;
    text-align: center !important;
}

body.frontpage #k2static.pm-frontpage-intro .itemBody,
body.is_frontpage #k2static.pm-frontpage-intro .itemBody,
body.frontpage #k2static.pm-frontpage-intro .itemFullText,
body.is_frontpage #k2static.pm-frontpage-intro .itemFullText {
    margin: 0 !important;
    padding: 0 !important;
}

body.frontpage #k2static.pm-frontpage-intro .itemFullText > h1,
body.is_frontpage #k2static.pm-frontpage-intro .itemFullText > h1,
body.frontpage #k2static.pm-frontpage-intro .itemFullText > h3.header,
body.is_frontpage #k2static.pm-frontpage-intro .itemFullText > h3.header {
    margin: 0 0 42px !important;
    color: #005ca9 !important;
    font-size: 40px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

body.frontpage #k2static.pm-frontpage-intro .itemFullText p,
body.is_frontpage #k2static.pm-frontpage-intro .itemFullText p {
    width: 920px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: #848484 !important;
    font-size: 24px !important;
    line-height: 38px !important;
    font-weight: 400 !important;
    text-align: left !important;
}

body.frontpage #k2static.pm-frontpage-intro .itemFullText p:empty,
body.is_frontpage #k2static.pm-frontpage-intro .itemFullText p:empty {
    display: none !important;
}

body.frontpage #below_content .spotlight-wrap,
body.is_frontpage #below_content .spotlight-wrap {
    width: 100vw !important;
    margin: 76px 0 70px calc(50% - 50vw) !important;
    padding: 50px 0 !important;
    box-sizing: border-box !important;
    background: #f0f0f1 !important;
    position: relative !important;
}

body.frontpage #below_content .spotlight-wrap > h3,
body.frontpage #below_content .spotlight-wrap .pm-spotlight-item,
body.frontpage #below_content .spotlight-wrap .panel-body,
body.is_frontpage #below_content .spotlight-wrap > h3,
body.is_frontpage #below_content .spotlight-wrap .panel-body,
body.is_frontpage #below_content .spotlight-wrap .pm-spotlight-item {
    width: 1180px !important;
    max-width: calc(100vw - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.frontpage #below_content .spotlight-wrap > h3,
body.frontpage #below_content .spotlight-wrap .panel-body > h3,
body.is_frontpage #below_content .spotlight-wrap .panel-body > h3,
body.is_frontpage #below_content .spotlight-wrap > h3 {
    margin-top: 0 !important;
    margin-bottom: 34px !important;
    padding-left: calc(49.2% + 38px) !important;
    box-sizing: border-box !important;
    color: #005ca9 !important;
    font-size: 40px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

body.frontpage #below_content .spotlight-wrap .panel-body,
body.is_frontpage #below_content .spotlight-wrap .panel-body {
    position: relative !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.frontpage #below_content .spotlight-wrap .panel-body > h3,
body.is_frontpage #below_content .spotlight-wrap .panel-body > h3 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
}

body.frontpage #below_content .spotlight-wrap .pm-spotlight-item,
body.is_frontpage #below_content .spotlight-wrap .pm-spotlight-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 38px !important;
}

body.frontpage #below_content .spotlight-wrap .intro-left,
body.is_frontpage #below_content .spotlight-wrap .intro-left {
    flex: 0 0 49.2% !important;
}

body.frontpage #below_content .spotlight-wrap .intro-left img,
body.is_frontpage #below_content .spotlight-wrap .intro-left img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

body.frontpage #below_content .spotlight-wrap .intro-right,
body.is_frontpage #below_content .spotlight-wrap .intro-right {
    flex: 1 1 auto !important;
    margin-top: 78px !important;
    color: #777 !important;
}

body.frontpage #below_content .spotlight-wrap .intro-right h4,
body.is_frontpage #below_content .spotlight-wrap .intro-right h4 {
    margin: 0 0 56px !important;
    color: #666 !important;
    font-size: 28px !important;
    line-height: 34px !important;
    font-weight: 700 !important;
}

body.frontpage #below_content .spotlight-wrap .intro-right h4 a,
body.is_frontpage #below_content .spotlight-wrap .intro-right h4 a {
    color: #666 !important;
    text-decoration: none !important;
}

body.frontpage #below_content .spotlight-wrap .intro-right p,
body.frontpage #below_content .spotlight-wrap .mod-articles-category-introtext,
body.is_frontpage #below_content .spotlight-wrap .intro-right p,
body.is_frontpage #below_content .spotlight-wrap .mod-articles-category-introtext {
    color: #777 !important;
    font-size: 21px !important;
    line-height: 34px !important;
    font-weight: 400 !important;
}

body.frontpage #below_content .spotlight-wrap .intro-right p,
body.is_frontpage #below_content .spotlight-wrap .intro-right p {
    margin: 0 0 19px !important;
}

div[itemprop="articleBody"] {
    position: relative;
}


@media screen and (max-width: 767px) {
    body.frontpage #below_content .spotlight-wrap,
    body.is_frontpage #below_content .spotlight-wrap {
        width: 100vw !important;
        margin: 0 0 40px calc(50% - 50vw) !important;
        padding: 40px 0 !important;
    }

    body.frontpage #below_content .spotlight-wrap .panel-body,
    body.frontpage #below_content .spotlight-wrap .pm-spotlight-item,
    body.is_frontpage #below_content .spotlight-wrap .panel-body,
    body.is_frontpage #below_content .spotlight-wrap .pm-spotlight-item {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.frontpage #below_content .spotlight-wrap .panel-body > h3,
    body.is_frontpage #below_content .spotlight-wrap .panel-body > h3 {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        margin: 0 0 20px !important;
        padding: 0 10px !important;
        font-size: 40px !important;
        line-height: 48px !important;
    }

    body.frontpage #below_content .spotlight-wrap .pm-spotlight-item,
    body.is_frontpage #below_content .spotlight-wrap .pm-spotlight-item {
        display: block !important;
    }

    body.frontpage #below_content .spotlight-wrap .intro-left,
    body.is_frontpage #below_content .spotlight-wrap .intro-left {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.frontpage #below_content .spotlight-wrap .intro-left img,
    body.is_frontpage #below_content .spotlight-wrap .intro-left img {
        width: 100% !important;
        max-width: none !important;
    }

    body.frontpage #below_content .spotlight-wrap .intro-right,
    body.is_frontpage #below_content .spotlight-wrap .intro-right {
        display: block !important;
        width: auto !important;
        margin: 20px 0 0 !important;
        padding: 0 10px !important;
    }

    body.frontpage #below_content .spotlight-wrap .intro-right h4,
    body.is_frontpage #below_content .spotlight-wrap .intro-right h4 {
        margin: 0 0 56px !important;
        font-size: 28px !important;
        line-height: 34px !important;
    }
}

body.frontpage #below_content .our-reference,
body.is_frontpage #below_content .our-reference {
    display: block !important;
    margin: 0 auto 100px !important;
    padding: 0 !important;
    text-align: center !important;
}

body.frontpage #below_content .mod_pm_carousel.our-reference,
body.is_frontpage #below_content .mod_pm_carousel.our-reference {
    width: 1180px !important;
    max-width: calc(100vw - 60px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
    position: relative !important;
}

body.frontpage #below_content .our-reference > h3,
body.frontpage #below_content .our-reference .module-title,
body.is_frontpage #below_content .our-reference > h3,
body.is_frontpage #below_content .our-reference .module-title {
    margin: 0 0 70px !important;
    color: #005ca9 !important;
    font-size: 40px !important;
    line-height: 48px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* .pm-carousel-wrap is the positioning context for both the fallback buttons
   and the Owl nav arrows — it carries the width/centering previously on .owl-carousel */
body.frontpage #below_content .our-reference .pm-carousel-wrap,
body.is_frontpage #below_content .our-reference .pm-carousel-wrap {
    position: relative !important;
    width: 900px !important;
    max-width: calc(100vw - 180px) !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

body.frontpage #below_content .our-reference .owl-carousel,
body.is_frontpage #below_content .our-reference .owl-carousel {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

body.frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded),
body.is_frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body.frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded) > .ext-item-wrap,
body.is_frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded) > .ext-item-wrap {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 33.333333% !important;
}

body.frontpage #below_content .our-reference .owl-stage,
body.is_frontpage #below_content .our-reference .owl-stage {
    display: flex !important;
    align-items: center !important;
}

body.frontpage #below_content .our-reference .owl-item,
body.frontpage #below_content .our-reference .ext-item-wrap,
body.frontpage #below_content .our-reference .ext-itemimage,
body.frontpage #below_content .our-reference .ext-moduleitemimage,
body.is_frontpage #below_content .our-reference .owl-item,
body.is_frontpage #below_content .our-reference .ext-item-wrap,
body.is_frontpage #below_content .our-reference .ext-itemimage,
body.is_frontpage #below_content .our-reference .ext-moduleitemimage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 120px !important;
    text-align: center !important;
}

body.frontpage #below_content .our-reference .ext-itemimage img,
body.is_frontpage #below_content .our-reference .ext-itemimage img {
    display: block !important;
    width: auto !important;
    max-width: 250px !important;
    max-height: 105px !important;
    object-fit: contain !important;
}

/* --- Fallback nav buttons (.pm-reference-nav) ---
   Shown before Owl loads; positioned relative to .pm-carousel-wrap which
   is the same size as the carousel stage. */
body.frontpage #below_content .our-reference .pm-reference-nav,
body.is_frontpage #below_content .our-reference .pm-reference-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #888 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
    font-size: 66px !important;
    line-height: 82px !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    z-index: 5 !important;
}
body.frontpage #below_content .our-reference .pm-reference-prev,
body.is_frontpage #below_content .our-reference .pm-reference-prev {
    left: -80px !important;
}
body.frontpage #below_content .our-reference .pm-reference-next,
body.is_frontpage #below_content .our-reference .pm-reference-next {
    right: -80px !important;
}
body.frontpage #below_content .our-reference .pm-reference-nav:hover,
body.frontpage #below_content .our-reference .pm-reference-nav:focus,
body.is_frontpage #below_content .our-reference .pm-reference-nav:hover,
body.is_frontpage #below_content .our-reference .pm-reference-nav:focus {
    color: #555 !important;
    background: transparent !important;
    outline: none !important;
}

/* Hide fallback buttons once Owl has initialised */
body.frontpage #below_content .our-reference .pm-carousel-wrap .owl-loaded ~ .pm-reference-nav,
body.is_frontpage #below_content .our-reference .pm-carousel-wrap .owl-loaded ~ .pm-reference-nav {
    display: none !important;
}

/* --- Owl 2.x nav (.owl-nav, no .owl-controls wrapper) ---
   .owl-nav uses top/bottom:0 instead of height:100% — height:100% resolves
   to zero on an absolutely positioned child of a height:auto container. */
body.frontpage #below_content .our-reference .owl-carousel .owl-nav,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
}
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next {
    pointer-events: auto !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 52px !important;
    height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #888 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 66px !important;
    line-height: 82px !important;
    text-align: center !important;
    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;
}
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev {
    left: -80px !important;
}
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next {
    right: -80px !important;
}
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev:hover,
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next:hover,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev:hover,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next:hover {
    color: #555 !important;
}
/* Owl 2.x nav text is inside <span> */
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev span,
body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next span,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev span,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next span {
    display: block !important;
    line-height: 82px !important;
    font-size: 66px !important;
    font-family: Arial, sans-serif !important;
}
body.frontpage #below_content .our-reference .owl-carousel .owl-dots,
body.is_frontpage #below_content .our-reference .owl-carousel .owl-dots {
    display: none !important;
}

@media (max-width: 1023px) {
    body.frontpage #below_content .our-reference .pm-carousel-wrap,
    body.is_frontpage #below_content .our-reference .pm-carousel-wrap {
        max-width: calc(100vw - 120px) !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
    body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
    body.frontpage #below_content .our-reference .pm-reference-prev,
    body.is_frontpage #below_content .our-reference .pm-reference-prev {
        left: 0 !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
    body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
    body.frontpage #below_content .our-reference .pm-reference-next,
    body.is_frontpage #below_content .our-reference .pm-reference-next {
        right: 0 !important;
    }
}

@media (max-width: 767px) {
    body.frontpage #below_content .our-reference,
    body.is_frontpage #below_content .our-reference {
        margin-bottom: 40px !important;
    }

    body.frontpage #below_content .mod_pm_carousel.our-reference,
    body.is_frontpage #below_content .mod_pm_carousel.our-reference {
        width: 100% !important;
        max-width: none !important;
    }

    body.frontpage #below_content .our-reference > h3,
    body.frontpage #below_content .our-reference .module-title,
    body.is_frontpage #below_content .our-reference > h3,
    body.is_frontpage #below_content .our-reference .module-title {
        margin-bottom: 70px !important;
    }

    body.frontpage #below_content .our-reference .pm-carousel-wrap,
    body.is_frontpage #below_content .our-reference .pm-carousel-wrap {
        width: 70% !important;
        max-width: 70% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel,
    body.is_frontpage #below_content .our-reference .owl-carousel,
    body.frontpage #below_content .our-reference .owl-stage-outer,
    body.is_frontpage #below_content .our-reference .owl-stage-outer {
        width: 100% !important;
        overflow: hidden !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded) > .ext-item-wrap,
    body.is_frontpage #below_content .our-reference .owl-carousel:not(.owl-loaded) > .ext-item-wrap {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    body.frontpage #below_content .our-reference .owl-item,
    body.frontpage #below_content .our-reference .ext-item-wrap,
    body.frontpage #below_content .our-reference .ext-itemimage,
    body.frontpage #below_content .our-reference .ext-moduleitemimage,
    body.is_frontpage #below_content .our-reference .owl-item,
    body.is_frontpage #below_content .our-reference .ext-item-wrap,
    body.is_frontpage #below_content .our-reference .ext-itemimage,
    body.is_frontpage #below_content .our-reference .ext-moduleitemimage {
        height: 120px !important;
    }

    body.frontpage #below_content .our-reference .ext-itemimage img,
    body.is_frontpage #below_content .our-reference .ext-itemimage img {
        max-width: 100% !important;
        max-height: 105px !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
    body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-prev,
    body.frontpage #below_content .our-reference .pm-reference-prev,
    body.is_frontpage #below_content .our-reference .pm-reference-prev {
        left: -52px !important;
    }

    body.frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
    body.is_frontpage #below_content .our-reference .owl-carousel .owl-nav .owl-next,
    body.frontpage #below_content .our-reference .pm-reference-next,
    body.is_frontpage #below_content .our-reference .pm-reference-next {
        right: -52px !important;
    }
}

/* ----- Page-header: two contexts need different treatment -----
   1. body > .page-header  = template-level section header (CAREERS, green section titles, etc.)
      Rendered by index.php above breadcrumb. styles.css supplies background-color:#005ca9 +
      padding + inset shadow. We only strip BS5's border-bottom.
   2. #component .page-header  = article title inside com_content (e.g. "We open doors").
      Rendered by the com_content article override. Should look like J3's h2.itemTitle:
      blue text on white, no background box. */

/* Undo sr-only / clip tricks on all .page-header elements */
.page-header {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border-bottom: none !important;
    margin: 0 !important;
}

/* Template-level section header: white uppercase text, styles.css handles the blue bg */
body > .page-header h1,
body > .page-header h2 {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Article title inside component: transparent bg, blue text — mirrors J3 h2.itemTitle */
#component .page-header {
    background: transparent !important;
    box-shadow: none !important;
    padding: 20px 0 5px !important;
    text-align: center !important;
}
#component .page-header h1,
#component .page-header h2 {
    color: #005ca9 !important;
    font-size: 36px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}

body.option-com_content.view-article.green #component .item-page > [itemprop="articleBody"] {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.option-com_content.view-article.green #component .item-page > [itemprop="articleBody"] > p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* ----- Topbar: horizontal, menus left, language + search right (like J3) ----- */
#topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 0 18px;
}
#topbar .moduletable {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0;
}
/* Push language switcher + search to the right edge of the topbar — and keep
   them right-aligned regardless of per-language module order. We match on
   every plausible J6 hook (mod-type-* class, module suffix, the legacy
   `mod_languages` body class some custom modules emit, and any module whose
   admin Class Suffix contains the token `pm-right`). The `!important` is
   required because some Cassiopeia-derived rules and per-language module
   styles set their own margin: 0 with higher specificity. */
#topbar .moduletable.mod-type-languages,
#topbar .moduletable.mod-type-finder,
#topbar .moduletable.mod-type-search,
#topbar .moduletable[class*="mod_languages"],
#topbar .moduletable[class*="languages"],
#topbar .moduletable[class*="pm-right"] {
    margin-left: auto !important;
}
/* If both languages and search are present, only the FIRST in DOM order is
   pushed right; the second sits next to it. */
#topbar .moduletable.mod-type-languages ~ .moduletable.mod-type-finder,
#topbar .moduletable.mod-type-languages ~ .moduletable.mod-type-search,
#topbar .moduletable.mod-type-finder ~ .moduletable.mod-type-languages,
#topbar .moduletable.mod-type-search ~ .moduletable.mod-type-languages {
    margin-left: 18px !important;
}
#topbar ul,
#topbar nav ul,
#topbar .mod-menu,
#topbar .nav,
#topbar .menu {
    display: inline-flex;
    /* flex-wrap: wrap; */
    gap: 0 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#topbar ul li,
#topbar nav ul li,
#topbar .mod-menu li {
    display: inline-block;
    list-style: none;
}
/* J3 set #topbar { color: white } because J3 had a dark topbar background.
   J6's topbar wrapper has a white/transparent background, so we override
   the inherited white text to a readable dark grey. */
#topbar,
#topbar a {
    color: #444;
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 18px;
    font-size: 18px;
    line-height: 1;
}
#topbar a:hover { color: #000; }

/* mod_finder search input inline + small */
#topbar .mod-finder,
#topbar .js-finder-searchform,
#topbar form.js-finder-searchform,
#topbar .finder {
    display: inline-block;
    vertical-align: middle;
}
#topbar input[type="search"],
#topbar input[type="text"] {
    height: 26px;
    width: 160px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

/* ----- Footer: visual port of J3 styles.css lines 1640-1700 (with bumped contrast) ----- */
.footer_container,
#footer.footer_container {
    background: #505050 !important;
    color: #e8e8e8 !important;
    padding: 42px 0;
}
/* J6 body color:#333 leaks into footer — force inherit so children
   pick up #e8e8e8 instead of the dark body color. */
#footer.footer_container *,
#footer.footer_container p,
#footer.footer_container span,
#footer.footer_container li {
    color: #e8e8e8 !important;
}
#footer.footer_container h1,
#footer.footer_container h2,
#footer.footer_container h3,
#footer.footer_container h4,
#footer.footer_container h5,
#footer.footer_container h6 {
    color: #ffffff !important;
}
.footer_container .footer_inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.footer_container .footer_inner .module h3,
.footer_container .footer_inner .moduletable h3 {
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 12px;
}
/* CRITICAL: BS5 .nav is display:flex — force vertical stack so each item
   gets its own line, exactly like J3. */
.footer_container .footer_inner .module ul,
.footer_container .footer_inner .moduletable ul,
.footer_container .footer_inner .module .nav,
.footer_container .footer_inner .moduletable .nav,
.footer_container .footer_inner .module .mod-menu,
.footer_container .footer_inner .moduletable .mod-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    flex-direction: column;
}
.footer_container .footer_inner .module ul li,
.footer_container .footer_inner .moduletable ul li,
.footer_container .footer_inner .module .nav li,
.footer_container .footer_inner .moduletable .nav li,
.footer_container .footer_inner .module .mod-menu li,
.footer_container .footer_inner .moduletable .mod-menu li {
    border-bottom: 1px solid #909090;
    padding: 0;
    display: list-item;
    width: 100%;
    position: relative;
}
/* J3 animated white underline that grows on hover. */
.footer_container .footer_inner .module ul li:before,
.footer_container .footer_inner .moduletable ul li:before,
.footer_container .footer_inner .module .nav li:before,
.footer_container .footer_inner .moduletable .nav li:before,
.footer_container .footer_inner .module .mod-menu li:before,
.footer_container .footer_inner .moduletable .mod-menu li:before {
    content: "";
    background: #fff;
    width: 0%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
    display: inline-block;
    transition: all 0.5s ease 0s;
}
.footer_container .footer_inner .module ul li:hover:before,
.footer_container .footer_inner .moduletable ul li:hover:before,
.footer_container .footer_inner .module .nav li:hover:before,
.footer_container .footer_inner .moduletable .nav li:hover:before,
.footer_container .footer_inner .module .mod-menu li:hover:before,
.footer_container .footer_inner .moduletable .mod-menu li:hover:before {
    width: 100%;
}
.footer_container .footer_inner .module a,
.footer_container .footer_inner .moduletable a,
#footer.footer_container a {
    color: #e8e8e8 !important;
    font-weight: 700;
    padding: 10px 0;
    display: block;
    text-decoration: none !important;
}
.footer_container .footer_inner .module a:hover,
.footer_container .footer_inner .moduletable a:hover,
#footer.footer_container a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: inherit;
}
/* Heading row inside .nav (when mod_menu uses default_heading layout) ---
   J3 has NO border under the heading row, and a 35px top margin. */
.footer_container .footer_inner .module .nav li.heading,
.footer_container .footer_inner .moduletable .nav li.heading,
.footer_container .footer_inner .module .mod-menu li.heading,
.footer_container .footer_inner .moduletable .mod-menu li.heading {
    border-bottom: 0;
}
.footer_container .footer_inner .module .nav li.heading h3,
.footer_container .footer_inner .moduletable .nav li.heading h3,
.footer_container .footer_inner .module .mod-menu li.heading h3,
.footer_container .footer_inner .moduletable .mod-menu li.heading h3 {
    margin-top: 35px;
}
.footer_container .footer_inner .module .nav li.heading:hover:before,
.footer_container .footer_inner .moduletable .nav li.heading:hover:before,
.footer_container .footer_inner .module .mod-menu li.heading:hover:before,
.footer_container .footer_inner .moduletable .mod-menu li.heading:hover:before {
    width: 0;
}

/* ----- Social icon row (mod_custom at position 'facebook' or hardcoded fallback) ----- */
#facebook_like {
    text-align: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #707070;
}
#facebook_like ul,
#facebook_like .pm-social,
#facebook_like ul.pm-social,
#facebook_like .custom ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 18px;
    justify-content: center;
    border: 0;
    width: auto;
}
#facebook_like li,
#facebook_like ul li,
#facebook_like .pm-social li,
#facebook_like .custom ul li {
    border: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    width: auto !important;
}
#facebook_like li:before,
#facebook_like .custom ul li:before { display: none !important; content: none !important; }
#facebook_like a {
    color: #ccc !important;
    font-size: 22px;
    line-height: 1;
    padding: 0 !important;
    display: inline-block !important;
    text-decoration: none !important;
    background: transparent !important;
}
#facebook_like a:hover { color: #fff !important; }

/* ----- Language switcher: plain text (ZH | EN | DE) matching J3 topbar ----- */

/* Container */
#topbar .mod-languages,
#topbar .moduletable .mod-languages {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* Bootstrap dropdown wrapper: keep inline, never absolute */
#topbar .mod-languages .dropdown {
    display: inline-flex !important;
    align-items: center !important;
    position: static !important;
}

/* Active-language toggle button: strip all button chrome, look like plain text */
#topbar .mod-languages .dropdown-toggle,
#topbar .mod-languages button.btn,
#topbar .mod-languages button.dropdown-toggle {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;   /* override #topbar a { margin-right: 18px } */
    color: #222 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    cursor: default !important;
    display: inline !important;
    vertical-align: middle !important;
}
/* Remove Bootstrap caret */
#topbar .mod-languages .dropdown-toggle::after {
    display: none !important;
}

/* Dropdown menu: always visible, static, inline row */
#topbar .mod-languages .dropdown-menu,
#topbar .mod-languages ul.dropdown-menu {
    display: inline-flex !important;
    position: static !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    min-width: 0 !important;
    float: none !important;
    transform: none !important;
    inset: auto !important;
}

/* Dropdown items: inline */
#topbar .mod-languages .dropdown-menu li,
#topbar .mod-languages ul.dropdown-menu li {
    display: inline-flex !important;
    align-items: center !important;
}

/* Hide active lang from dropdown-menu — already shown by the toggle */
#topbar .mod-languages .dropdown-menu .lang-active,
#topbar .mod-languages .dropdown-menu li.active {
    display: none !important;
}

/* Non-active lang links */
#topbar .mod-languages .dropdown-menu a,
#topbar .mod-languages ul.dropdown-menu a {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: #444 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    display: inline !important;
}
#topbar .mod-languages .dropdown-menu a:hover,
#topbar .mod-languages ul.dropdown-menu a:hover {
    color: #000 !important;
    background: none !important;
}

/* === LIST MODE (Use Dropdown: No, Active Language: No) === */
#topbar .mod-languages ul.mod-list,
#topbar ul.pm-language-list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#topbar .mod-languages ul.mod-list li,
#topbar ul.pm-language-list li {
    display: inline-flex !important;
    align-items: center !important;
}
#topbar .mod-languages ul.mod-list li + li::before,
#topbar ul.pm-language-list li + li::before {
    content: none !important;
}
#topbar .mod-languages .mod-list .lang-active a,
#topbar .mod-languages .mod-list li.active a,
#topbar .pm-language-list .lang-active a,
#topbar .pm-language-list li.active a {
    font-weight: 400 !important;
    color: #7d7d7d !important;
}

/* === HIDE ALL FLAGS (img tags, flag-icon spans, SVG) === */
#topbar .mod-languages img,
#topbar .mod-languages .dropdown-toggle img,
#topbar .mod-languages .dropdown-toggle span[class*="flag"],
#topbar .mod-languages .mod-list a img,
#topbar .pm-language-list a img,
#topbar .flag-icon,
#topbar .lang-flag,
#topbar .language-flag,
#topbar [class*="flag-icon"],
#topbar .mod-languages svg {
    display: none !important;
}

/* ----- Header: logo area sizing (matches J3 — center aligned, 34px bottom margin) ----- */
#header {
    text-align: center;
    margin-bottom: 34px;
}
#header_left {
    text-align: center;
}
#header_left img {
    max-width: 100%;
    height: auto;
    max-height: 120px; /* match J3 rendered size */
}

/* MAP J3-style class names ("social instagram", "social twitter", etc.) to
   FontAwesome 6 brand glyphs. The user's existing J3 mod_custom uses FA4
   classes (<i class="fa fa-instagram">) which don't render in FA6 — these
   :before rules render the correct glyph regardless of the inline <i> tag. */
#facebook_like .social,
#facebook_like a.social {
    width: 28px;
    height: 28px;
    text-align: center;
    overflow: hidden;
}
#facebook_like .social i,
#facebook_like a.social i { display: none !important; }
#facebook_like .social:before,
#facebook_like a.social:before {
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease; 
}
#facebook_like a.social:hover:before{
    color:#005ca9;
} 
#facebook_like .social.instagram:before,
#facebook_like a.instagram:before        { content: "\f16d"; }
#facebook_like .social.twitter:before,
#facebook_like a.twitter:before          { content: "\e61b"; } /* fa-x-twitter */
#facebook_like .social.x-twitter:before,
#facebook_like a.x-twitter:before        { content: "\e61b"; }
#facebook_like .social.linkedin:before,
#facebook_like a.linkedin:before         { content: "\f0e1"; } /* fa-linkedin (square) */
#facebook_like .social.youtube:before,
#facebook_like a.youtube:before          { content: "\f167"; }
#facebook_like .social.facebook:before,
/* #facebook_like a.facebook:before         { content: "\f39e"; } /* fa-facebook-f (clean f) <-- code seems to not work so taking other code*/
#facebook_like a.facebook:before         { content: "\f09a"; } /* fa-facebook-f (clean f) */
#facebook_like .social.xing:before,
#facebook_like a.xing:before             { content: "\f168"; }

/* ----- below_below_page_split wrapper ----- */
.below_below_page_split {
    background: #fff;
    overflow: hidden;
}

/* ----- ETO-News 3-column homepage block (mod_articles_category, suffix .pm-eto-news or .eto-news) ----- */
/* Module title — centered, brand-blue heading. Cassiopeia/J6 default chrome
   tends to wrap module title in <h3>; we cover both .moduletable and .module
   wrappers as well as common chrome variants used by pm_template.
   Also covers .eto-news suffix (the DB value used before migration). */
.moduletable.pm-eto-news,
.module.pm-eto-news,
.moduletable.eto-news,
.module.eto-news {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 40px 20px 50px;
    box-sizing: border-box;
}
.moduletable.pm-eto-news > h3,
.module.pm-eto-news > h3,
.moduletable.pm-eto-news > .module-title,
.module.pm-eto-news > .module-title,
.moduletable.pm-eto-news > .moduletitle,
.module.pm-eto-news > .moduletitle,
.moduletable.eto-news > h3,
.module.eto-news > h3,
.moduletable.eto-news > .module-title,
.module.eto-news > .module-title,
.moduletable.eto-news > .moduletitle,
.module.eto-news > .moduletitle {
    color: #005ca9;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 28px 0;
}

/* Card grid — pure CSS flexbox, no Bootstrap grid dependency */
.pm-eto-news-grid .pm-eto-news-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.pm-eto-news-grid .pm-eto-news-item {
    width: 33.3333%;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
@media (max-width: 767px) {
    .pm-eto-news-grid .pm-eto-news-item { width: 100%; }
}
.pm-eto-news-grid .pm-eto-news-card {
    background: #fff;
    overflow: hidden;
}
/* .pm-eto-news-grid .pm-eto-news-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
} */
.pm-eto-news-grid .pm-eto-news-card__imglink {
    display: block;
    overflow: hidden;
    background: #f0f0f1;
}
.pm-eto-news-grid .pm-eto-news-card__imglink--placeholder {
    aspect-ratio: 16 / 9;
    background: #005ca9;
}
.pm-eto-news-grid .pm-eto-news-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.pm-eto-news-grid .pm-eto-news-card:hover .pm-eto-news-card__img {
    transform: scale(1.04);
}
.pm-eto-news-grid .pm-eto-news-card__body {
    padding: 15px 0 10px;
}
.pm-eto-news-grid .pm-eto-news-card__title {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
    margin: 0 0 15px 0;
}
.pm-eto-news-grid .pm-eto-news-card__title a {
    color: #6d6e71;
    text-decoration: none;
}
.pm-eto-news-grid .pm-eto-news-card__title a:hover {
    color: #005ca9;
    text-decoration: none;
}
.pm-eto-news-grid .pm-eto-news-card__meta {
    margin-bottom: 10px;
    font-size: 18px;
}
.pm-eto-news-grid .pm-eto-news-card__date {
    display: block;
    color: #666;
    font-weight: 600;
    margin-bottom: 2px;
}
.pm-eto-news-grid .pm-eto-news-card__cat {
    display: block;
    margin-bottom: 8px;
}
.pm-eto-news-grid .pm-eto-news-card__cat a {
    color: #005ca9;
    text-decoration: none;
    font-weight: 400;
}
.pm-eto-news-grid .pm-eto-news-card__cat a:hover { text-decoration: underline; }
.pm-eto-news-grid .pm-eto-news-card__intro {
    color: #666;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
}
.pm-eto-news-grid .pm-eto-news-card__intro strong {
    font-weight: normal;
}
.pm-eto-news-grid .pm-eto-news-card__intro p:last-child { margin-bottom: 0; }
.pm-eto-news-grid .pm-eto-news-card__readmore-link {
    color: #005ca9;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
}
.pm-eto-news-grid .pm-eto-news-card__readmore-link:hover { color: #003e74; text-decoration: underline; }
.pm-eto-news-grid .pm-eto-news-card__readmore-link:hover span { margin-left: 8px; }

/* ----- Segment page parallax: fix for J6 -----
   Float containment: clearfix ::after replaces overflow:hidden so the parent
   height equals the float height without creating a clipping rect that would
   cut off the full-bleed ::before pseudo-element.
   background-position:50% 20% shifts the image upward so the car/scenery
   (upper portion) is visible through the tiles even when the section is in the
   lower half of the viewport. */
.submenu_products {
    overflow: visible !important;
    background-attachment: fixed !important;
    background-position: 50% 20% !important;
    background-size: cover !important;
}
.submenu_products::after {
    content: '';
    display: block;
    clear: both;
}

.menu.flat.segment.submenu_products {
    width: 100%;
}

/* ----- Products: grey items block — full viewport width -----
   #k2products_items lives inside #page.container (Bootstrap 5 max-width).
   Full-bleed technique: shift left by 50vw, pull back by 50% of own width. */
#k2products_items {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* ----- Products CBP grid: constrain images to column width -----
   In J3, K2 resized images to an explicit pixel width via imageWidth.
   In J6, images are rendered at their natural size which overflows the CBP
   column and breaks the grid. width:100% on the img fills the CBP column. */
#k2products_items .catItemImage img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
#k2products_items .itemContainer {
    overflow: hidden;
}

/* ----- Segment parallax blocks: full-bleed background, tiles at container width -----
   Two contexts:
   A) Modules in #below_content (outside #page.container, full viewport width):
      green/orange/blue/news — published as mod_menu to below_content position.
      Padding mirrors Bootstrap 5 .container breakpoints so tiles align with
      the article text above which is inside #page.container.
   B) Article HTML inside #page.container (careers .background_image_jobs):
      Element is already container-width; keep original 35px / 165px padding. */
.background_image_green,
.background_image_orange,
.background_image_blue,
.background_image_news,
.background_image_jobs {
    position: relative;
    z-index: 0;
    background-image: none !important;
}

/* Constrain tiles to 1140px when segment is inside article content (not #below_content) */
body.option-com_content.view-article [itemprop="articleBody"] .background_image_green,
body.option-com_content.view-article [itemprop="articleBody"] .background_image_orange,
body.option-com_content.view-article [itemprop="articleBody"] .background_image_blue,
body.option-com_content.view-article [itemprop="articleBody"] .background_image_news,
body.option-com_content.view-article [itemprop="articleBody"] .background_image_jobs {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}


/* Only apply container-matching padding to elements in #below_content */
#below_content .background_image_green,
#below_content .background_image_orange,
#below_content .background_image_blue,
#below_content .background_image_news,
#below_content .background_image_jobs {
    padding-left:  12px !important;
    padding-right: 12px !important;
}
@media (min-width: 576px) {
    #below_content .background_image_green,
    #below_content .background_image_orange,
    #below_content .background_image_blue,
    #below_content .background_image_news,
    #below_content .background_image_jobs {
        padding-left:  calc((100vw - 540px) / 2) !important;
        padding-right: calc((100vw - 540px) / 2) !important;
    }
}
@media (min-width: 768px) {
    #below_content .background_image_green,
    #below_content .background_image_orange,
    #below_content .background_image_blue,
    #below_content .background_image_news,
    #below_content .background_image_jobs {
        padding-left:  calc((100vw - 720px) / 2) !important;
        padding-right: calc((100vw - 720px) / 2) !important;
    }
}
@media (min-width: 992px) {
    #below_content .background_image_green,
    #below_content .background_image_orange,
    #below_content .background_image_blue,
    #below_content .background_image_news,
    #below_content .background_image_jobs {
        padding-left:  calc((100vw - 960px) / 2) !important;
        padding-right: calc((100vw - 960px) / 2) !important;
    }
}
@media (min-width: 1200px) {
    #below_content .background_image_green,
    #below_content .background_image_orange,
    #below_content .background_image_blue,
    #below_content .background_image_news,
    #below_content .background_image_jobs {
        padding-left:  calc((100vw - 1170px) / 2) !important;
        padding-right: calc((100vw - 1170px) / 2) !important;
    }
}
@media (min-width: 1400px) {
    #below_content .background_image_green,
    #below_content .background_image_orange,
    #below_content .background_image_blue,
    #below_content .background_image_news,
    #below_content .background_image_jobs {
        padding-left:  calc((100vw - 1320px) / 2) !important;
        padding-right: calc((100vw - 1320px) / 2) !important;
    }
}

/* Full-bleed background via ::before — keeps background photo edge-to-edge
   while tiles stay within container bounds above. left:calc(50%-50vw) works
   for any element width: 50% of element - 50vw positions left edge at x=0. */
.background_image_green::before,
.background_image_orange::before,
.background_image_blue::before,
.background_image_news::before,
.background_image_jobs::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50% 20%;
    background-repeat: no-repeat;
    z-index: -1;
}

.background_image_green::before  { background-image: url(/images/content/automobil.jpg); }
.background_image_orange::before { background-image: url(/images/content/nutzfahrzeuge.jpg); }
.background_image_blue::before   { background-image: url(/images/content/industrie.jpg); }
.background_image_news::before   { background-image: url(/images/content/news.jpg); }
.background_image_jobs::before   { background-image: url(/images/content/jobs.jpg); }

/* Category description block above the filter bar.
   J3 styled this via #k2products .itemListCategory h2 in segments.css.
   J6 renders it in #k2products_description, so we restate the same rule here. */
#k2products_description {
    padding-top: 40px;
    padding-bottom: 10px;
}
#k2products_description h2 {
    text-align: center !important;
    margin: 20px 0 35px !important;
    color: #005ca9 !important;
    font-size: 36px !important;
    font-weight: normal !important;
}

/* Product segment detail pages: restore the J3/K2 article structure. */
#k2products.pm-product-segment {
    margin-bottom: 0;
}

#k2products.pm-product-segment .itemHeader {
    margin-bottom: 0;
    text-align: center;
}

#k2products.pm-product-segment .itemTitle {
    max-width: 1040px;
    margin: 42px auto 38px;
    line-height: 1.18;
}

#k2products.pm-product-segment .itemIntroText {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 40px !important;
    color: #666;
    font-size: 18px;
    line-height: 1.55;
    text-align: left !important;
}

#k2products.pm-product-segment .itemIntroText p {
    margin: 0 0 16px;
}

#k2products.pm-product-segment .pm-product-detail-toggle {
    display: block !important;
    width: 260px;
    min-width: 260px;
    margin: 36px auto 0;
    padding: 14px 22px;
    -webkit-appearance: none;
    appearance: none;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #d9d9d9 !important;
    color: #005ca9 !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

#k2products.pm-product-segment .pm-product-detail-toggle:hover,
#k2products.pm-product-segment .pm-product-detail-toggle:focus {
    background: #cfcfcf;
    color: #005ca9;
}

#k2products.pm-product-segment .pm-product-detail {
    margin-top: 44px;
}

#k2products.pm-product-segment .itemFullText > .row-fluid {
    display: flex !important;
    align-items: flex-start !important;
    gap: 48px !important;
}

#k2products.pm-product-segment .itemFullText > .row-fluid > .span6 {
    float: none !important;
    width: calc(50% - 24px) !important;
    max-width: calc(50% - 24px) !important;
    margin: 0 !important;
}

#k2products.pm-product-segment .itemFullText h3 {
    margin: 0 0 30px !important;
    color: #005ca9 !important;
    font-size: 32px !important;
    font-weight: 700;
    line-height: 1.2 !important;
}

#k2products.pm-product-segment .itemFullText p {
    color: #666 !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
}

#k2products.pm-product-segment .itemFullText img {
    display: block;
    max-width: 100%;
    height: auto;
}

#below_content .segment_product_items.grey_back {
    width: 100%;
    margin-top: 63px;
}

/* Product detail pages: restore the J3/K2 two-column product layout. */
#k2products.pm-product-detail {
    margin-bottom: 100px;
}

#k2products.pm-product-detail .itemHeader {
    margin-bottom: 46px;
    text-align: center;
}

#k2products.pm-product-detail .itemTitle {
    margin: 44px 0 14px;
    color: #005ca9;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
}

#k2products.pm-product-detail .itemTags {
    margin-top: 20px;
    text-align: center;
}

#k2products.pm-product-detail .pm-product-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 54px;
}

#k2products.pm-product-detail .itemImageBlock {
    flex: 0 0 31%;
    width: 31%;
    max-width: 31%;
    margin-top: 14px;
}

#k2products.pm-product-detail .itemImageBlock img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
}

#k2products.pm-product-detail .itemFullText {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    color: #666;
    font-size: 18px;
    line-height: 1.45;
}

#k2products.pm-product-detail .itemFullText h4 {
    margin: 0 0 10px;
    color: #666;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

#k2products.pm-product-detail .itemFullText p {
    margin: 0 0 16px;
    color: #666;
    font-size: 18px;
    line-height: 1.45;
}

#k2products.pm-product-detail .itemFullText ul {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

#k2products.pm-product-detail .itemFullText table {
    width: 90%;
    margin: 0 0 30px;
    border-collapse: collapse;
    background-color: #e5e5e5;
    color: #666;
    font-size: 18px;
    line-height: 30px;
}

#k2products.pm-product-detail .itemFullText table tr:nth-child(2n + 1) {
    background-color: #cacaca;
}

#k2products.pm-product-detail .itemFullText table tr:first-child {
    background-color: #005ca9;
    color: #fff;
    font-weight: 700;
}

#k2products.pm-product-detail .itemFullText table td {
    padding: 2px 8px;
    border: 1px solid #fff;
}

#k2products.pm-product-detail .itemFullText table td:first-child {
    width: 60%;
}

@media (max-width: 767px) {
    #k2products.pm-product-segment .itemTitle {
        margin-top: 30px;
        font-size: 30px !important;
    }

    #k2products.pm-product-segment .itemIntroText,
    #k2products.pm-product-segment .itemFullText p {
        font-size: 16px;
    }

    #k2products.pm-product-segment .itemFullText > .row-fluid {
        display: block !important;
    }

    #k2products.pm-product-segment .itemFullText > .row-fluid > .span6 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #k2products.pm-product-detail .itemTitle {
        margin-top: 30px;
        font-size: 30px;
    }

    #k2products.pm-product-detail .pm-product-detail-row {
        display: block;
    }

    #k2products.pm-product-detail .itemImageBlock {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 36px;
    }

    #k2products.pm-product-detail .itemFullText {
        width: 100%;
        font-size: 16px;
    }

    #k2products.pm-product-detail .itemFullText h4 {
        font-size: 22px;
    }

    #k2products.pm-product-detail .itemFullText p,
    #k2products.pm-product-detail .itemFullText table {
        font-size: 16px;
    }

    #k2products.pm-product-detail .itemFullText table {
        width: 100%;
    }
}

/* Careers job overview hero: mirrors the J3 page image between title and intro */
#jobs_overview .pm-jobs-hero {
    margin: 0 0 95px;
    line-height: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#jobs_overview .pm-jobs-hero img {
    display: block;
    width: 100%;
    height: auto;
}

#jobs_overview .pm-jobs-hero + .introtext {
    margin-top: 0;
}

#jobs_overview > .container.above_html_text:first-child {
    padding-bottom: 34px;
}

/* Careers > Career start category: restore the J3/K2 teaser list layout */
#k2blog.pm-career-start {
    margin-bottom: 100px;
}

#k2blog.pm-career-start .itemListCategory {
    text-align: center;
    margin: 48px 0 72px;
}

#k2blog.pm-career-start .itemListCategory h2 {
    color: #005ca9;
    font-size: 36px;
    font-weight: normal;
    line-height: 1.2;
    margin: 0;
}

#k2blog.pm-career-start .itemContainer {
    margin-bottom: 92px;
}

#k2blog.pm-career-start .catItemView {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

#k2blog.pm-career-start .catItemImage {
    flex: 0 0 32.26%;
    width: 32.26%;
}

#k2blog.pm-career-start .catItemImage img {
    display: block;
    width: 100%;
    height: auto;
}

#k2blog.pm-career-start .catItemBody {
    flex: 1 1 auto;
    min-width: 0;
}

#k2blog.pm-career-start h4.catItemTitle {
    margin: 6px 0 12px;
}

#k2blog.pm-career-start h4.catItemTitle a {
    color: #005ca9;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.25;
}

#k2blog.pm-career-start .catItemIntroText p {
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

#k2blog.pm-career-start .catItemReadMore {
    text-align: right;
    margin-top: 16px;
}

#k2blog.pm-career-start .catItemReadMore a {
    color: #005ca9;
    font-size: 18px;
    font-weight: bold;
}

/* Career start child article: match legacy J3/K2 top layout */
#component .pm-career-start-article .pm-career-start-title {
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto !important;
    padding: 35px 15px 32px !important;
}

#component .pm-career-start-article .pm-career-start-title h2 {
    color: #005ca9 !important;
    font-size: 36px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.pm-career-start-article .pm-career-start-hero {
    line-height: 0;
    margin: 0 0 18px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 3.34 / 1;
    overflow: hidden;
}

.pm-career-start-article .pm-career-start-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.pm-career-start-article .pm-career-start-body {
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto 100px;
    padding: 0 15px;
    position: relative;
}

.pm-career-start-article .pm-career-start-body > p:first-child {
    margin-top: 0;
}

.pm-career-start-article .pm-career-start-body h3 {
    color: #005ca9;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    margin: 44px 0 33px;
}

.pm-career-start-article .pm-career-start-body h3:first-child {
    margin-top: 0;
}

.pm-career-start-article .pm-career-start-body p {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 18px;
}

.pm-career-start-article .pm-career-start-body .btn_full {
    max-width: 430px;
    margin: 0 0 5px;
}

.pm-career-start-article .pm-career-start-body img.dual_partner {
    position: absolute;
    right: 20%;
    bottom: 30%;
}

.pm-career-start-article .pm-career-start-body img.dual_partner.en {
    bottom: 30%;
}

@media (max-width: 991px) {
    .pm-career-start-article .pm-career-start-body img.dual_partner {
        right: 15px;
    }
}

@media (max-width: 767px) {
    .pm-career-start-article .pm-career-start-body img.dual_partner {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        margin: 30px 0 0;
    }
}

@media (max-width: 767px) {
    #k2blog.pm-career-start .catItemView {
        display: block;
    }

    #k2blog.pm-career-start .catItemImage {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    #k2blog.pm-career-start .catItemReadMore {
        text-align: left;
    }
}

/* Careers > Working at ETO: legacy J3/K2 article and career image block */
#component .pm-working-at-eto .pm-working-title {
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto !important;
    padding: 35px 15px 47px !important;
}

#component .pm-working-at-eto .pm-working-title h2 {
    color: #005ca9 !important;
    font-size: 36px !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center;
}

.pm-working-at-eto .pm-working-body {
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto 112px;
    padding: 0 15px;
}

.pm-working-at-eto .pm-working-body h3 {
    color: #005ca9;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
}


.pm-working-at-eto .pm-working-body p {
    font-size: 18px;
    line-height: 1.65;
}

.pm-working-at-eto .pm-working-body a {
    color: #005ca9;
}

.pm-working-at-eto .pm-working-slider {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1920 / 700;
    overflow: hidden;
}

.pm-working-at-eto .pm-working-smart-slider {
    line-height: normal;
}

.pm-working-at-eto .pm-working-smart-slider .n2-section-smartslider,
.pm-working-at-eto .pm-working-smart-slider [id^="n2-ss-"][id$="-align"],
.pm-working-at-eto .pm-working-smart-slider [id^="n2-ss-"][id$="-align"] > div {
    width: 100% !important;
    max-width: none !important;
}

.pm-working-at-eto .pm-working-slider-track,
.pm-working-at-eto .pm-working-slide {
    width: 100%;
    height: 100%;
}

.pm-working-at-eto .pm-working-slide {
    position: absolute;
    inset: 0;
    display: none;
}

.pm-working-at-eto .pm-working-slide.active {
    display: block;
}

.pm-working-at-eto .pm-working-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.pm-working-at-eto .pm-working-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(245, 245, 245, 0.8);
    text-align: center;
    line-height: 1.4;
    padding: 18px 120px 20px;
}

.pm-working-at-eto .pm-working-caption .bootstrap-carousel-description p {
    color: #005ca9;
    font-size: 18px;
    line-height: 30px;
    margin: 0 0 12px;
}

.pm-working-at-eto .pm-working-caption .bootstrap-carousel-description p:first-child {
    display: none;
}

.pm-working-at-eto .pm-working-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 58px;
    height: 96px;
    margin-top: -48px;
    border: 0;
    background: transparent;
    opacity: 0.9;
}

.pm-working-at-eto .pm-working-slider-arrow::before {
    content: "";
    position: absolute;
    top: 16px;
    width: 54px;
    height: 54px;
    border-top: 8px solid #fff;
    border-left: 8px solid #fff;
}

.pm-working-at-eto .pm-working-slider-prev {
    left: 100px;
}

.pm-working-at-eto .pm-working-slider-next {
    right: 100px;
}

.pm-working-at-eto .pm-working-slider-prev::before {
    left: 12px;
    transform: rotate(-45deg);
}

.pm-working-at-eto .pm-working-slider-next::before {
    right: 12px;
    transform: rotate(135deg);
}

.pm-working-at-eto .pm-working-mobile-caption {
    display: none;
}

@media (max-width: 767px) {
    #component .pm-working-at-eto .pm-working-title {
        padding: 30px 15px !important;
    }

    .pm-working-at-eto .pm-working-body {
        margin-bottom: 60px;
    }

	.pm-working-at-eto .pm-working-body h3 {
	    font-size: 26px;
	}

    .pm-working-at-eto .pm-working-slider {
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
    }

    .pm-working-at-eto .pm-working-smart-slider,
    .pm-working-at-eto .pm-working-smart-slider .n2-section-smartslider,
    .pm-working-at-eto .pm-working-smart-slider [id^="n2-ss-"][id$="-align"],
    .pm-working-at-eto .pm-working-smart-slider [id^="n2-ss-"][id$="-align"] > div,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slider-1,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slider-2,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slider-3,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slide-backgrounds,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slide-background,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slide-background-image,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slider-4 {
        height: 224px !important;
        min-height: 224px !important;
        max-height: 224px !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slide,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-preserve-size {
        height: 224px !important;
        min-height: 224px !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slide-background-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-layers-container,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-layer,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-item-content,
    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 [data-hide-mobileportrait="1"] {
        display: block !important;
    }

	.pm-working-at-eto .pm-working-slider-arrow {
	    width: 36px;
	    height: 58px;
	    margin-top: -29px;
    }

    .pm-working-at-eto .pm-working-slider-arrow::before {
        width: 30px;
        height: 30px;
        border-width: 6px;
    }

    .pm-working-at-eto .pm-working-caption {
        position: relative;
        padding: 12px 15px;
    }

    .pm-working-at-eto .pm-working-caption .bootstrap-carousel-description p {
        font-size: 15px;
        line-height: 20px;
        margin: 0;
    }

    .pm-working-at-eto .pm-working-slider-prev {
        left: 24px;
    }

	.pm-working-at-eto .pm-working-slider-next {
	    right: 24px;
	}

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .n2-ss-slider-controls {
        z-index: 40 !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .nextend-arrow {
        opacity: 0.9 !important;
    }

    .pm-working-at-eto .pm-working-smart-slider #n2-ss-4 .nextend-arrow img {
        width: 44px !important;
        height: 44px !important;
    }

    .pm-working-at-eto .pm-working-mobile-caption {
        display: block;
        box-sizing: border-box;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 16px 28px 18px;
        background: #fff;
        color: #005ca9;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
}

.working-with-eto-slider{
    margin-bottom: -100px;
}


@media (max-width: 979px) {
    .working-with-eto-slider .n2-ss-slider-wrapper-inside > div:last-of-type {
        position: static;
    }
}


/* ----- Header mirror pass: match the live J3 header geometry ----- */
/* All four properties mirror #footer .container.footer_inner so both
   containers render at exactly 1170px, centered, with border-box sizing. */
body > .container.topbar {
    max-width: 1170px !important;
    width: 1170px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body > .container.topbar #topbar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 13px !important;
    min-height: 31px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

body > .container.topbar #topbar .pm-topbar-left,
body > .container.topbar #topbar .pm-topbar-right {
    display: flex !important;
    align-items: flex-start !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

body > .container.topbar #topbar .pm-topbar-left {
    margin-left: 0 !important;
}

body > .container.topbar #topbar .pm-topbar-right {
    margin-left: auto !important;
}

body > .container.topbar #topbar .pm-topbar-left > .moduletable,
body > .container.topbar #topbar .pm-topbar-right > .moduletable {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 1200px) {
    body > .container.topbar #topbar {
        padding-right: 0 !important;
    }
}

#topbar .menu.flat,
#topbar .mod-menu,
#topbar .nav,
#topbar .menu {
    text-align: left !important;
}

#topbar,
#topbar a {
    color: #7d7d7d !important;
    font-size: 18px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}

#topbar a {
    margin-right: 25px !important;
}

body > .container.topbar #header {
    padding-top: 44px !important;
    margin-bottom: 55px !important;
    text-align: center !important;
}

/* Footer inner container: pin to same 1170px / 15px-pad grid as the topbar so the
   right edge of language-switcher + search aligns with the footer columns (J3 parity).
   Without this, J6 Bootstrap 5 defaults to max-width:1170px with 12px gutter, which
   shifts the footer/topbar right edges apart. */
#footer .container.footer_inner {
    max-width: 1170px !important;
    width: 1170px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Footer modules row: cancel the BS5 .row negative gutter margin so the first footer
   column starts at the same X+15px left edge as the topbar and page content.
   In J3, row-fluid had no negative margin; adding .row in J6 shifted the footer 12px left. */
#footer .container.footer_inner > .row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Main content container: keep article text on the same page grid as header/footer.
   padding-left must match the topbar/footer containers (15px) so all sections share
   the same left edge (X+15px). The BS5 .row inside adds margin-left:-12px and each
   col-md-* adds padding-left:+12px — the two cancel, leaving the net offset at +15px. */
body > #page.container {
    width: 1170px !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}


body > #page.container .container {
    padding-left: 0 !important;
}

body > #above_content.container {
    padding-left: 15px !important;
}

body > #above_content.container > .moduletable.mod-type-breadcrumbs,
body > #above_content.container > .moduletable.mod-type-breadcrumbs.container {
    padding-left: 0 !important;
    max-width: 1170px;
}

body > #above_content.container .breadcrumb {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

body > #page.container #breadcrumb {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    transform: none !important;
}

body > #page.container #breadcrumb .breadcrumb {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#header_left,
#header_left .moduletable,
#header_left .custom {
    text-align: center !important;
}

#header_left img {
    width: 535px !important;
    max-width: 535px !important;
    max-height: none !important;
    height: auto !important;
}

#mainmenu_wrapper,
#mainmenu_wrapper .navbar,
#mainmenu_wrapper .navbar-inner,
#mainmenu_wrapper .navbar-collapse,
#mainmenu_wrapper .moduletable {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
}

#mainmenu_wrapper .navbar {
    padding: 0 !important;
}

#mainmenu_wrapper .navbar-toggler {
    display: none !important;
}

#mainmenu_wrapper ul.level_0,
#mainmenu_wrapper .level_0 {
    display: inline-block !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: center !important;
}

#mainmenu_wrapper .level_0 > li > a {
    font-size: 21px !important;
    line-height: 24px !important;
}

/* Mobile: main menu items stack full-width (matches J3 meanmenu behaviour).
 * Without this, the inline-block li items wrap 2-per-row on narrow viewports
 * because the desktop display:inline-block rules above have no media scope. */
@media (max-width: 991px) {
    #mainmenu_wrapper ul.level_0,
    #mainmenu_wrapper .level_0 {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }
    #mainmenu_wrapper .level_0 > li {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin-right: 0 !important;
        padding-bottom: 0 !important;
    }
    #mainmenu_wrapper .level_0 > li > a {
        display: block !important;
        padding: 12px 15px !important;
    }
}

/* Live header shows the search module as a blue icon only. */
#topbar .moduletable.mod-type-finder,
#topbar .moduletable.mod-type-search {
    position: relative !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
    margin-left: 24px !important;
    margin-right: 0 !important;
}

#topbar .moduletable.mod-type-finder input,
#topbar .moduletable.mod-type-search input,
#topbar .moduletable.mod-type-finder label,
#topbar .moduletable.mod-type-search label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#topbar .moduletable.mod-type-finder button,
#topbar .moduletable.mod-type-search button,
#topbar .pm-search-submit {
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #005ca9 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 22px !important;
}

#topbar .moduletable.mod-type-finder button::before,
#topbar .moduletable.mod-type-search button::before,
#topbar .pm-search-submit::before {
    content: "\f002";
    font-family: FontAwesome, "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 20px;
    line-height: 22px;
    color: #005ca9;
}

#topbar .pm-search,
#topbar .pm-search form {
    position: relative !important;
    display: block !important;
    width: 22px !important;
    height: 26px !important;
    overflow: visible !important;
}

#topbar .pm-search input[type="search"] {
    position: absolute !important;
    top: 0 !important;
    right: -8px !important;
    z-index: 2 !important;
    width: 0 !important;
    max-width: 320px;
    height: 40px;
    clip: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #6f6f6f !important;
    box-shadow: none !important;
    font-size: 17px;
    font-weight: 400 !important;
    line-height: 54px !important;
    transition: width 280ms ease, opacity 80ms ease !important;
}

#topbar .pm-search.active input[type="search"] {
    width: 600px !important;
    padding: 0 60px 0 5px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#topbar .pm-search input[type="search"]::placeholder {
    color: #777 !important;
    opacity: 1 !important;
}

#topbar .pm-search .pm-search-submit {
    position: absolute !important;
    top: 0;
    right: -5px;
    z-index: 4 !important;
}

#topbar .pm-search.active .pm-search-submit {
    right: -5px;
    width: 30px !important;
    top: 8px;
}

#topbar .pm-search.active .pm-search-submit::before {
    font-size: 17px;
}

#topbar .pm-search .pm-search-close {
    position: absolute !important;
    top: -2px ;
    right: 25px !important;
    z-index: 4 !important;
    display: none !important;
    width: 30px;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #005ca9 !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 54px !important;
    text-align: center !important;
}

#topbar .pm-search.active .pm-search-close {
    display: block !important;
}

#topbar .pm-search .pm-search-close::before {
    content: "\f00d" !important;
    font-family: FontAwesome, "Font Awesome 6 Free" !important;
    font-size: 17px;
    font-weight: 900 !important;
    line-height: 40px;
    color: #005ca9 !important;
}

@media (max-width: 767px) {
    #topbar .pm-search.active input[type="search"] {
        width: 80vw !important;
    }
}

#topbar .pm-language-list a {
    margin-right: 20px !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #7d7d7d !important;
    font-weight: 400 !important;
}

/* Top left utility links: CONTACT DOWNLOADS NEWS, one row like live. */
#topbar .moduletable.mod-type-menu {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
}

#topbar .moduletable.mod-type-menu ul,
#topbar .moduletable.mod-type-menu .mod-menu,
#topbar .moduletable.mod-type-menu .nav,
#topbar .moduletable.mod-type-menu .menu {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
}

#topbar .moduletable.mod-type-menu li {
    display: inline-flex !important;
    white-space: nowrap !important;
}

#topbar .moduletable.mod-type-menu a {
    font-size: 18px !important;
    line-height: 28px !important;
    color: #7d7d7d !important;
    font-weight: 400 !important;
    margin-right: 0 !important;
    text-transform: uppercase !important;
}

/* Header topbar alignment: utility links flush left, language/search flush right. */
body > .container.topbar #topbar > .moduletable {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body > .container.topbar #topbar > .moduletable.mod-type-menu {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

body > .container.topbar #topbar > .moduletable.mod-type-languages {
    order: 2 !important;
    margin-left: 0 !important;
}

body > .container.topbar #topbar > .moduletable.mod-type-finder,
body > .container.topbar #topbar > .moduletable.mod-type-search {
    order: 3 !important;
    margin-left: 24px !important;
    margin-right: 0 !important;
}

body > .container.topbar #topbar > .moduletable.mod-type-menu ul,
body > .container.topbar #topbar > .moduletable.mod-type-menu .mod-menu,
body > .container.topbar #topbar > .moduletable.mod-type-menu .nav,
body > .container.topbar #topbar > .moduletable.mod-type-menu .menu {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Contact page: restore the J3 two-column form + locations layout. */
body.option-com_pm.view-contact.has-sidebar-right #content.section,
body.option_com_pm.view_contact.has-sidebar-right #content.section {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100% !important;
}

body.option-com_pm.view-contact.has-sidebar-right #component_wrapper,
body.option_com_pm.view_contact.has-sidebar-right #component_wrapper {
    flex: 0 0 49.2% !important;
    width: 49.2% !important;
    max-width: 49.2% !important;
}

body.option-com_pm.view-contact.has-sidebar-right #content_right,
body.option_com_pm.view_contact.has-sidebar-right #content_right {
    flex: 0 0 39.2% !important;
    width: 39.2% !important;
    max-width: 39.2% !important;
    margin-left: 1.6% !important;
    /*padding-top: 64px !important; */
}

body.option-com_pm.view-contact #component,
body.option_com_pm.view_contact #component {
    color: #777 !important;
}

body.option-com_pm.view-contact #component h2,
body.option_com_pm.view_contact #component h2,
body.option-com_pm.view-contact #content_right h3,
body.option_com_pm.view_contact #content_right h3 {
    color: #005ca9 !important;
    font-size: 36px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
    margin: 0 0 20px !important;
}

body.option-com_pm.view-contact .pm-contact fieldset,
body.option_com_pm.view_contact .pm-contact fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.option-com_pm.view-contact .pm-contact legend,
body.option_com_pm.view_contact .pm-contact legend,
body.option-com_pm.view-contact .pm-contact .pm-field-note1,
body.option_com_pm.view_contact .pm-contact .pm-field-note1,
body.option-com_pm.view-contact .pm-contact .pm-field-phone_prefix,
body.option_com_pm.view_contact .pm-contact .pm-field-phone_prefix,
body.option-com_pm.view-contact .pm-contact .pm-field-telefon,
body.option_com_pm.view_contact .pm-contact .pm-field-telefon {
    display: none !important;
}

body.option-com_pm.view-contact .pm-contact .pm-field,
body.option_com_pm.view_contact .pm-contact .pm-field {
    margin-bottom: 17px !important;
}

body.option-com_pm.view-contact .pm-contact label,
body.option_com_pm.view_contact .pm-contact label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}

body.option-com_pm.view-contact .pm-contact input[type="text"],
body.option_com_pm.view_contact .pm-contact input[type="text"],
body.option-com_pm.view-contact .pm-contact input[type="email"],
body.option_com_pm.view_contact .pm-contact input[type="email"],
body.option-com_pm.view-contact .pm-contact select,
body.option_com_pm.view_contact .pm-contact select,
body.option-com_pm.view-contact .pm-contact textarea,
body.option_com_pm.view_contact .pm-contact textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 31px !important;
    box-sizing: border-box !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 0 !important;
    background-color: #f8fbfd !important;
    box-shadow: none !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 5px 12px !important;
}

body.option-com_pm.view-contact .pm-contact textarea,
body.option_com_pm.view_contact .pm-contact textarea {
    min-height: 178px !important;
}

body.option-com_pm.view-contact .pm-contact input[type="checkbox"],
body.option_com_pm.view_contact .pm-contact input[type="checkbox"] {
    width: 13px !important;
    height: 13px !important;
    margin: 0 7px 0 0 !important;
    vertical-align: middle !important;
}
body.option-com_pm.view-contact .pm-contact .pm-field-nutzungsbedingungen_accept{
    padding-left: 20px;
    position: relative;
}
body.option-com_pm.view-contact .pm-contact .pm-field-nutzungsbedingungen_accept label,
body.option_com_pm.view_contact .pm-contact .pm-field-nutzungsbedingungen_accept label {
    display: inline !important;
}

body.option-com_pm.view-contact .pm-contact .pm-field-nutzungsbedingungen_accept .form-check.form-check-inline{
    position: absolute;
    padding-left: 0;
    left: 0;
    top: 8px;
}

body.option-com_pm.view-contact .pm-contact .btn,
body.option_com_pm.view_contact .pm-contact .btn {
    min-width: 84px !important;
    padding: 11px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #d6d6d6 !important;
    color: #005ca9 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

body.option-com_pm.view-contact #content_right .contact_modules,
body.option_com_pm.view_contact #content_right .contact_modules {
    margin-top: 0 !important;
}

body.option-com_pm.view-contact #content_right .pm_standort,
body.option_com_pm.view_contact #content_right .pm_standort {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 32px !important;
}

body.option-com_pm.view-contact #content_right .pm_standort .span6,
body.option_com_pm.view_contact #content_right .pm_standort .span6 {
    float: none !important;
    width: calc(50% - 16px) !important;
}

body.option-com_pm.view-contact #content_right .pm_standort p,
body.option_com_pm.view_contact #content_right .pm_standort p {
    margin: 0 0 17px !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

body.option-com_pm.view-contact #content_right .pm_standort a,
body.option_com_pm.view_contact #content_right .pm_standort a,
body.option-com_pm.view-contact #content_right .pm_standort strong,
body.option_com_pm.view_contact #content_right .pm_standort strong {
    color: #005ca9 !important;
    font-weight: 700 !important;
}

body.option-com_pm.view-contact #content_right img,
body.option_com_pm.view_contact #content_right img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 36px !important;
}

/* News landing page: J3 intro and background submenu. */
body.option-com_content.view-category .pm-news-landing {
    margin-bottom: 0 !important;
}

body.option-com_content.view-category .pm-news-intro,
body.option-com_content.view-category .pm-news-menu {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

body.option-com_content.view-category .pm-news-intro {
    background: #fff !important;
    color: #777 !important;
}

body.option-com_content.view-category .pm-news-intro h2,
body.option-com_content.view-category .pm-news-intro p {
    width: 1180px !important;
    max-width: calc(100vw - 60px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.option-com_content.view-category .pm-news-intro h2 {
    margin-top: 0 !important;
    margin-bottom: 42px !important;
    color: #005ca9 !important;
    font-size: 40px !important;
    line-height: 48px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

body.option-com_content.view-category .pm-news-intro p {
    margin-top: 0 !important;
    margin-bottom: 19px !important;
    font-size: 21px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
}

body.option-com_content.view-category .pm-news-menu .background_image_news {
    min-height: 425px !important;
    padding: 176px 35px !important;
    box-sizing: border-box !important;
    background-image: url(/images/content/news.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

body.option-com_content.view-category .pm-news-menu .submenu_products {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 36px !important;
}

body.option-com_content.view-category .pm-news-menu .submenu_products a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 268px !important;
    height: 152px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    background-color: rgba(255, 255, 255, 0.78) !important;
    color: #0065b3 !important;
    opacity: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.option-com_content.view-category .pm-news-menu .submenu_products a span {
    color: #0065b3 !important;
    font-size: 21px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
}

body.option-com_content.view-category .pm-news-menu .submenu_products a:hover,
body.option-com_content.view-category .pm-news-menu .submenu_products a.current {
    background-color: rgba(0, 101, 179, 1) !important;
}

body.option-com_content.view-category .pm-news-menu .submenu_products a:hover span,
body.option-com_content.view-category .pm-news-menu .submenu_products a.current span {
    color: #fff !important;
}

body.option-com_content.view-category .pm-news-list {
    width: 1180px !important;
    max-width: calc(100vw - 60px) !important;
    margin: 80px auto 90px !important;
}

body.option-com_content.view-category .pm-news-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 38px !important;
    margin: 0 0 78px !important;
}

body.option-com_content.view-category .pm-news-item__image-link {
    display: block !important;
    flex: 0 0 400px !important;
    width: 400px !important;
    text-decoration: none !important;
}

body.option-com_content.view-category .pm-news-item__image,
body.option-com_content.view-category .pm-news-item__image-link--placeholder {
    display: block !important;
    width: 400px !important;
    height: 300px !important;
}

body.option-com_content.view-category .pm-news-item__image {
    object-fit: cover !important;
}

body.option-com_content.view-category .pm-news-item__image-link--placeholder {
    background: #f2f2f2 !important;
}

body.option-com_content.view-category .pm-news-item__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-top: 2px !important;
}

body.option-com_content.view-category .pm-news-item__title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #005ca9 !important;
    font-size: 28px !important;
    line-height: 40px !important;
    font-weight: 700 !important;
}

body.option-com_content.view-category .pm-news-item__title a {
    color: #005ca9 !important;
    text-decoration: none !important;
}

body.option-com_content.view-category .pm-news-item__title a:hover {
    text-decoration: underline !important;
}

body.option-com_content.view-category .pm-news-item__date,
body.option-com_content.view-category .pm-news-item__category {
    margin: 0 !important;
    line-height: 28px !important;
    font-weight: 400 !important;
}

body.option-com_content.view-category .pm-news-item__date {
    color: #666;
    font-weight: bold;
}

body.option-com_content.view-category .pm-news-item__category {
    margin-bottom: 28px !important;
    color: #005ca9 !important;
}

body.option-com_content.view-category .pm-news-item__intro {
    color: #666 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 600 !important;
}

body.option-com_content.view-category .pm-news-item__intro p {
    margin: 0 0 14px !important;
}

body.option-com_content.view-category .pm-news-item__intro em{
    font-weight: 100;
}

body.option-com_content.view-category .pm-news-item__readmore {
    margin: 24px 0 0 !important;
    text-align: right !important;
}

body.option-com_content.view-category .pm-news-item__readmore a {
    font-weight: 700;
}

body.option-com_content.view-category .pm-news-item__readmore a:hover {
    text-decoration: underline !important;
}

body.option-com_content.view-category .pm-news-pagination {
    margin: 76px 0 0 !important;
    text-align: center !important;
}

body.option-com_content.view-category .pm-news-pagination .pagination {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    border-radius: 0 !important;
}

body.option-com_content.view-category .pm-news-pagination li,
body.option-com_content.view-category .pm-news-pagination .page-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.option-com_content.view-category .pm-news-pagination li > a,
body.option-com_content.view-category .pm-news-pagination li > span,
body.option-com_content.view-category .pm-news-pagination .page-link {
    display: block !important;
    min-width: 45px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 0 !important;
    background: #d4d4d4 !important;
    color: #005ca9 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.option-com_content.view-category .pm-news-pagination .page-link span {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
}

body.option-com_content.view-category .pm-news-pagination .page-link .visually-hidden {
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

body.option-com_content.view-category .pm-news-pagination .page-link [class^="icon-"],
body.option-com_content.view-category .pm-news-pagination .page-link [class*=" icon-"] {
    display: none !important;
}

body.option-com_content.view-category .pm-news-pagination li:first-child > a,
body.option-com_content.view-category .pm-news-pagination li:first-child > span {
    border-left: 0 !important;
}

body.option-com_content.view-category .pm-news-pagination li:first-child > a,
body.option-com_content.view-category .pm-news-pagination li:first-child > span,
body.option-com_content.view-category .pm-news-pagination li:nth-child(2) > a,
body.option-com_content.view-category .pm-news-pagination li:nth-child(2) > span,
body.option-com_content.view-category .pm-news-pagination li:nth-last-child(2) > a,
body.option-com_content.view-category .pm-news-pagination li:nth-last-child(2) > span,
body.option-com_content.view-category .pm-news-pagination li:last-child > a,
body.option-com_content.view-category .pm-news-pagination li:last-child > span {
    min-width: 78px !important;
}

body.option-com_content.view-category .pm-news-pagination .active > a,
body.option-com_content.view-category .pm-news-pagination .active > span,
body.option-com_content.view-category .pm-news-pagination .page-item.active .page-link {
    background: #c8c8c8 !important;
    color: #005ca9 !important;
}

body.option-com_content.view-category .pm-news-pagination .disabled > a,
body.option-com_content.view-category .pm-news-pagination .disabled > span,
body.option-com_content.view-category .pm-news-pagination .page-item.disabled .page-link {
    background: #d4d4d4 !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    body.option-com_pm.view-contact.has-sidebar-right #content.section,
    body.option_com_pm.view_contact.has-sidebar-right #content.section {
        display: block !important;
    }

    body.option-com_pm.view-contact.has-sidebar-right #component_wrapper,
    body.option_com_pm.view_contact.has-sidebar-right #component_wrapper,
    body.option-com_pm.view-contact.has-sidebar-right #content_right,
    body.option_com_pm.view_contact.has-sidebar-right #content_right {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    body.option-com_pm.view-contact.has-sidebar-right #content_right,
    body.option_com_pm.view_contact.has-sidebar-right #content_right {
        padding-top: 40px !important;
    }

    body.option-com_pm.view-contact #content_right .pm_standort,
    body.option_com_pm.view_contact #content_right .pm_standort {
        display: block !important;
    }

    body.option-com_pm.view-contact #content_right .pm_standort .span6,
    body.option_com_pm.view_contact #content_right .pm_standort .span6 {
        width: 100% !important;
    }

    body.option-com_content.view-category .pm-news-intro {
        padding: 45px 0 70px !important;
    }

    body.option-com_content.view-category .pm-news-intro h2 {
        font-size: 32px !important;
        line-height: 39px !important;
    }

    body.option-com_content.view-category .pm-news-menu .background_image_news {
        min-height: 360px !important;
        padding: 90px 24px !important;
    }

    body.option-com_content.view-category .pm-news-menu .submenu_products {
        flex-direction: column !important;
        gap: 20px !important;
    }

    body.option-com_content.view-category .pm-news-menu .submenu_products a {
        width: min(268px, 100%) !important;
    }

    body.option-com_content.view-category .pm-news-list {
        max-width: calc(100vw - 30px) !important;
        margin: 55px auto 65px !important;
    }

    body.option-com_content.view-category .pm-news-item {
        display: block !important;
        margin-bottom: 58px !important;
    }

    body.option-com_content.view-category .pm-news-item__image-link,
    body.option-com_content.view-category .pm-news-item__image,
    body.option-com_content.view-category .pm-news-item__image-link--placeholder {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.option-com_content.view-category .pm-news-item__image {
        height: auto !important;
    }

    body.option-com_content.view-category .pm-news-item__content {
        padding-top: 24px !important;
    }

    body.option-com_content.view-category .pm-news-item__title {
        font-size: 24px !important;
        line-height: 31px !important;
    }

    body.option-com_content.view-category .pm-news-item__date,
    body.option-com_content.view-category .pm-news-item__category,
    body.option-com_content.view-category .pm-news-item__intro,
    body.option-com_content.view-category .pm-news-item__readmore a {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    body.option-com_content.view-category .pm-news-item__readmore {
        text-align: left !important;
    }

    body.option-com_content.view-category .pm-news-pagination .pagination {
        flex-wrap: wrap !important;
    }
}

@media (max-width: 1199px) {
    body > .container.topbar {
        width: 970px !important;
        max-width: 970px !important;
    }

    body > #page.container {
        width: 970px !important;
        max-width: 970px !important;
    }

    #footer .container.footer_inner {
        width: 970px !important;
        max-width: 970px !important;
    }
}

@media (max-width: 991px) {
    body > .container.topbar {
        width: 750px !important;
        max-width: 750px !important;
    }

    body > #page.container {
        width: 750px !important;
        max-width: 750px !important;
    }

    #footer .container.footer_inner {
        width: 750px !important;
        max-width: 750px !important;
    }
}

@media (max-width: 767px) {
    body > .container.topbar {
        width: 100% !important;
        max-width: 100% !important;
    }
    body > #page.container {
        width: 100% !important;
        max-width: 100% !important;
    }
    #footer .container.footer_inner {
        width: 100% !important;
        max-width: 100% !important;
    }
    body > .container.topbar #header {
        padding-top: 25px !important;
        margin-bottom: 30px !important;
    }
    #header_left img {
        width: min(535px, 90vw) !important;
        max-width: 90vw !important;
    }
}

/* ----- Downloads list component (PDF / DOC / etc.) ----- */
.pm-downloads {
    margin: 20px 0 40px;
}

.pm-downloads .pm-downloads-heading {
    color: #005ca9;
    margin: 0 0 20px;
}

.pm-downloads .pm-downloads-subheading {
    background: #005ca9;
    color: #fff !important;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px;
    margin: 30px 0 20px;
    border-radius: 2px;
    letter-spacing: 0.3px;
}

.pm-downloads .pm-downloads-list {
    list-style: none;
    margin: 0 0 25px;
    padding: 0;
}

.pm-downloads .pm-downloads-row {
    display: block;
    border-bottom: 1px solid #eee;
}
.pm-downloads .pm-downloads-row:last-child {
    border-bottom: 0;
}

.pm-downloads .pm-downloads-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    color: #005ca9;
    text-decoration: none;
    transition: background 0.15s ease;
}
.pm-downloads .pm-downloads-link:hover {
    background: #f4f8fc;
    text-decoration: none;
}

/* File-type icon tile (PDF / DOC / etc.) */
.pm-downloads .pm-downloads-icon {
    flex: 0 0 38px;
    height: 44px;
    background: #005ca9;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4px;
    border-radius: 2px;
    text-transform: uppercase;
    position: relative;
}
/* Folded-corner effect */
.pm-downloads .pm-downloads-icon:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #fff transparent transparent;
}

/* Per-extension tints (optional) */
.pm-downloads .pm-ext-doc,
.pm-downloads .pm-ext-docx { background: #1a73e8; }
.pm-downloads .pm-ext-xls,
.pm-downloads .pm-ext-xlsx { background: #1e8e3e; }
.pm-downloads .pm-ext-zip,
.pm-downloads .pm-ext-rar  { background: #b8860b; }

.pm-downloads .pm-downloads-title {
    flex: 1 1 auto;
    font-weight: 600;
    color: #005ca9;
}

.pm-downloads .pm-downloads-size {
    flex: 0 0 auto;
    color: #777;
    font-weight: 400;
    font-size: 14px;
    margin-left: 6px;
}

.pm-downloads .pm-downloads-empty {
    margin: 0 0 20px;
    font-style: italic;
}

/* ─── ETO Worldwide / ETO Weltweit – continent imagemap ─────────────────── */
div#k2blog.pm_standort.itemListView { margin-bottom: 100px; }
.pm_standort .standort-intro { margin-bottom: 30px; }
.pm_standort .category_button { text-align: center; margin-bottom: 30px; }
.pm_standort .category_button .readmore-btn {
    margin: 0 5px;
    display: inline-block;
    padding: 10px 30px;
    font-size: 14px;
    text-transform: uppercase;
    background: #ddd;
    color: #005ca9;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
#component .pm_standort .category_button .readmore-btn.active,
#component .pm_standort .category_button .readmore-btn:hover { background: #005ca9; color: #fff; }
.pm_standort .itemListLeading { position: relative; }
.pm_standort .itemListLeading > img { display: block; width: 100%; }
div.marker {
    position: absolute;
    z-index: 2;
    margin-left: -16px;  /* ← ADD THIS */

}
div.marker a {
    display: block;
    position: relative;
    width: 32px;
    height: 46px;
    text-indent: -9999px;
    text-decoration: none;
}
div.marker a::before {
    content: '';
    background-image: url(../images/marker.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 46px;
    display: block;
    width: 32px;
    position: absolute;
    left: 0;
    top: -2px;
    text-indent: 0;
}
div.marker a span {
    position: absolute;
    left: 36px;
    top: 0;
    text-indent: 0;
    background: rgba(0, 92, 169, 0.9);
    color: #fff;
    padding: 3px 8px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    display: none;
}
div.marker a:hover span { display: block; }

/* ─── ETO Worldwide location detail pages (standort.php) ────────────────── */

/*
 * standort.php injects this via addStyleDeclaration() into <head> for standort pages:
 *   #component_wrapper{padding-left:0!important;padding-right:0!important}
 * The rule below is a CSS-only fallback using :has() (Chrome 105+/FF 121+/Safari 15.4+).
 */
body.pm-standort-page #component_wrapper,
#component_wrapper:has(.pm-standort-article) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}
body.pm-standort-page #component_wrapper #breadcrumb,
#component_wrapper:has(.pm-standort-article) #breadcrumb {
    box-sizing: border-box;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Building photo: full-width on location pages */
.pm-standort-article .pm-standort-image { margin-bottom: 0; }
.pm-standort-article .pm-standort-image img { display: block; width: 100%; height: auto; }

/* Location title between breadcrumb and image */
#component .pm-standort-article .pm-standort-title {
    box-sizing: border-box;
    max-width: 1170px;
    margin: 0 auto !important;
    padding: 35px 15px 32px !important;
}
#component .pm-standort-article .pm-standort-title h2 {
    margin: 0 !important;
}

/* Grey background content body — .grey_back color is defined in segments.css (#f0f0f1) */
.pm-standort-article .pm-standort-body { padding: 58px 15px 70px; margin: 32px 0 0; }
.pm-standort-article .pm-standort-body .itemFullText {
    box-sizing: border-box;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* Bootstrap 2 .row-fluid / .span4 → flexbox for "Data and facts" two columns */
.pm-standort-article .pm-standort-body .row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 20px;
}
.pm-standort-article .pm-standort-body .row-fluid > [class^="span"],
.pm-standort-article .pm-standort-body .row-fluid > [class*=" span"] {
    flex: 0 0 auto;
    min-width: 180px;
}
.pm-standort-article .pm-standort-body .row-fluid > .span4 { width: calc(33.33% - 14px); }
.pm-standort-article .pm-standort-body .row-fluid > .span5 { width: calc(41.67% - 14px); }
.pm-standort-article .pm-standort-body .row-fluid > .span6 { width: calc(50% - 11px); }
.pm-standort-article .pm-standort-body .row-fluid > .span8 { width: calc(66.67% - 8px); }

/* Contact + map section: flexbox for equal-height blue box / map */
.pm-standort-details {
    display: flex;
    align-items: stretch;
    margin-top: 0;
}
.pm-standort-details .left_sidebar {
    background-color: #005ca9;
    flex: 0 0 50%;
    box-sizing: border-box;
    position: relative;
}
.pm-standort-details .right_sidebar {
    flex: 0 0 50%;
    box-sizing: border-box;
}
.pm-standort-details .left_sidebar .ItemExtraFields { padding: 50px 30px 40px 20px; }
.pm-standort-details .left_sidebar .extraField.title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}
/* Address left / contact right inside blue box */
.pm-standort-details .left_sidebar .pm-standort-contact-row {
    display: flex;
    gap: 20px;
}
.pm-standort-details .left_sidebar .pm-standort-contact-row > div { flex: 1; }
.pm-standort-details .left_sidebar .pm-standort-address,
.pm-standort-details .left_sidebar .pm-standort-contact-info { color: #fff; }
.pm-standort-details .left_sidebar .pm-standort-address p,
.pm-standort-details .left_sidebar .pm-standort-contact-info p { color: #fff; margin-bottom: 0; }
#component .pm-standort-details .left_sidebar a { color: #fff; text-decoration: none; }
#component .pm-standort-details .left_sidebar a:hover { text-decoration: underline; }
/* Map stretches to full height of the flex row */
.pm-standort-details .right_sidebar { display: flex; flex-direction: column; }
.pm-standort-details .map_bottom { flex: 1; line-height: 0; min-height: 400px; }
.pm-standort-details .map_bottom iframe { display: block; width: 100%; height: 100%; }

@media (max-width: 767px) {
    .pm-standort-article .pm-standort-body .row-fluid > .span4,
    .pm-standort-article .pm-standort-body .row-fluid > .span5,
    .pm-standort-article .pm-standort-body .row-fluid > .span6,
    .pm-standort-article .pm-standort-body .row-fluid > .span8 { width: 100%; }
    .pm-standort-details { flex-direction: column; }
    .pm-standort-details .left_sidebar,
    .pm-standort-details .right_sidebar { flex: none; width: 100%; }
    .pm-standort-details .pm-standort-contact-row { flex-direction: column; }
    .pm-standort-details .map_bottom { min-height: 300px; }
}

/* Downloads page: make above_component panel-body flex so col-md-9/col-md-3 sit side by side. */
#above_component .panel-body {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0;
}

/* Prevent .container moduleclass_sfx from centering the login module */
#above_component .moduletable.container {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Downloads page: force Filter (left) + Supplier login (right) into 2 columns */
.pm-downloads .row.above_downloads {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px;
    margin: 20px 0 30px;
}

.pm-downloads .row.above_downloads > div {
    flex: 0 0 auto !important;
}

.pm-downloads .row.above_downloads > div:nth-child(1) {
    width: calc(75% - 15px) !important;
}

.pm-downloads .row.above_downloads > div:nth-child(2) {
    width: calc(25% - 15px) !important;
}

/* Stack on small screens */
@media (max-width: 767px) {
    .pm-downloads .row.above_downloads > div:nth-child(1),
    .pm-downloads .row.above_downloads > div:nth-child(2) {
        width: 100% !important;
    }
}

/* Download filter menu link colors — Bootstrap 5 .nav-link overrides #component a */
.nav.download_menu a,
.nav.download_menu .nav-link {
    color: #005ca9 !important;
}
.nav.download_menu a:hover,
.nav.download_menu .nav-link:hover {
    color: #003e74 !important;
}

/* ─── Our Strengths / Unsere Stärken – Bootstrap 2 grid → flex ──────────── */
.row-fluid.staerken {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
    margin-top: 65px;
}
.row-fluid.staerken .clear {
    display: none;
}
.row-fluid.staerken .span3.number {
    flex: 0 0 25%;
    display: block;
    background-color: #005ca9;
    color: #fff;
    font-size: 175px;
    text-align: right;
    padding-right: 25px;
    line-height: 124px;
    font-weight: bold;
    padding-top: 32px;
}
.row-fluid.staerken .span9 {
    flex: 1 1 auto;
}
.row-fluid.staerken h4 {
    color: #005ca9;
    line-height: 24px;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .row-fluid.staerken {
        flex-wrap: wrap;
    }
    .row-fluid.staerken .span3.number {
        flex: 0 0 100%;
        font-size: 100px;
    }
}

/* ─── Mission and Values / Vision und Werte – Bootstrap 2 grid → flex ───── */
.row-fluid.vision {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 65px;
}
.row-fluid.vision .clear {
    display: none;
}
.row-fluid.vision .span3 {
    flex: 0 0 25%;
}
.row-fluid.vision .span3 img {
    max-width: 100%;
    height: auto;
    display: block;
}
.row-fluid.vision .span9 {
    flex: 1 1 auto;
}
.row-fluid.vision h4 {
    color: #005ca9;
    line-height: 24px;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    .row-fluid.vision {
        flex-wrap: wrap;
    }
    .row-fluid.vision .span3 {
        flex: 0 0 100%;
    }
}

/* ─── Article intro image (K2 migration: image stored as image_intro) ────── */
.item-page .pm-article-intro-image {
    margin-bottom: 30px;
}
.item-page .pm-article-intro-image img {
    display: block;
    max-width: 600px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Article intro image — J3 K2 .itemImageBlock.pull-left parity */
.item-page .itemImageBlock.pull-left,
.item-page .itemImageBlock.float-left {
    float: left;
    width: 400px;
    max-width: 45%;
    margin: 0 25px 20px 0;
}
.item-page .itemImageBlock.pull-right,
.item-page .itemImageBlock.float-right {
    float: right;
    width: 280px;
    max-width: 45%;
    margin: 0 0 20px 25px;
}
.item-page .itemImageBlock img {
    display: block;
    width: 100%;
    height: auto;
}
.item-page .pm-article-meta{
    margin-bottom: 20px;
}
.item-page .pm-article-meta .pm-article-date{
    font-weight: bold;
}
/* Tighten info block so it sits next to the floated image, not above */
.item-page dl.article-info {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    color: #666;
}
.item-page dl.article-info dd { margin: 0 0 2px 0; }

@media (max-width: 600px) {
    .item-page .itemImageBlock.pull-left,
    .item-page .itemImageBlock.float-left,
    .item-page .itemImageBlock.pull-right,
    .item-page .itemImageBlock.float-right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
}

/* ─── insideComponent position – center moduleclass_sfx ─────────────────── */
#component .moduletable.center,
#component .mod-custom.center {
    text-align: center;
    margin-bottom: 20px;
}
#component .moduletable.center img,
#component .mod-custom.center img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
#component .moduletable.center p:last-child:empty,
#component .mod-custom.center p:last-child:empty,
#component .moduletable.center p:last-child > br:only-child,
#component .mod-custom.center p:last-child > br:only-child {
    display: none;
}

/* Full-width Organisation hero modules assigned to insideComponent. */
body.option-com_content.view-article #component .pm-inside-component-module-584,
body.option-com_content.view-article #component .pm-inside-component-module-604,
body.option-com_content.view-article #component .pm-inside-component-module-607 {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 55px;
}
body.option-com_content.view-article #component .pm-inside-component-module-584 .moduletable,
body.option-com_content.view-article #component .pm-inside-component-module-584 .mod-custom,
body.option-com_content.view-article #component .pm-inside-component-module-584 .custom,
body.option-com_content.view-article #component .pm-inside-component-module-584 p,
body.option-com_content.view-article #component .pm-inside-component-module-604 .moduletable,
body.option-com_content.view-article #component .pm-inside-component-module-604 .mod-custom,
body.option-com_content.view-article #component .pm-inside-component-module-604 .custom,
body.option-com_content.view-article #component .pm-inside-component-module-604 p,
body.option-com_content.view-article #component .pm-inside-component-module-607 .moduletable,
body.option-com_content.view-article #component .pm-inside-component-module-607 .mod-custom,
body.option-com_content.view-article #component .pm-inside-component-module-607 .custom,
body.option-com_content.view-article #component .pm-inside-component-module-607 p {
    margin: 0;
}
body.option-com_content.view-article #component .pm-inside-component-module-584 img,
body.option-com_content.view-article #component .pm-inside-component-module-604 img,
body.option-com_content.view-article #component .pm-inside-component-module-607 img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1170px;
}

.com-pm-contact.pm-contact {
    margin-bottom: 60px;
}

#content{
    padding: 0;
}
@media screen and (max-width: 767px) {
    #content{
    padding: 0 10px;
    }
}
#component_wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== MOBILE HEADER: fixed blue topbar + hamburger + BS5 collapse nav ===== *
 * Restores J3 parity: fixed blue topbar with hamburger (left) and
 * search/language (right). The mainmenu is hidden behind the hamburger toggle.
 *
 * Root causes fixed here:
 *  1. position:relative!important (above) prevents #topbar from being fixed.
 *  2. display:block!important on .navbar-collapse (above) keeps menu always open.
 *  3. search/language colors are grey/blue — invisible on the blue topbar.
 *  4. No hamburger button existed in the topbar (added to index.php).
 * =========================================================================== */

/* Hamburger: hidden on desktop. */
.pm-mobile-hamburger {
    display: none !important;
}

/* The extra topbar links are duplicated inside the mobile drawer only. */
.pm-mobile-menu-extra {
    display: none !important;
}

@media (max-width: 991px) {

    /* 1. Fixed blue topbar — overrides position:relative!important set above.
     *    left/right:0 spans the full viewport regardless of .container.topbar width. */
    body > .container.topbar #topbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 12px !important;
        background-color: #0065b3 !important;
        z-index: 9999 !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Push logo below the now-fixed 50px topbar. */
    body > .container.topbar #header {
        padding-top: 70px !important;
        margin-bottom: 20px !important;
    }

    /* 3. White text/links inside the blue topbar. */
    body > .container.topbar #topbar a,
    body > .container.topbar #topbar .pm-topbar-right a {
        color: white !important;
    }

    /* 4. Search icon: white on mobile (was #005ca9 = invisible on blue background). */
    #topbar .pm-search-submit::before,
    #topbar .moduletable.mod-type-finder button::before,
    #topbar .moduletable.mod-type-search button::before {
        color: white !important;
    }

    /* 5. Align right-side modules (search + language) vertically centred. */
    body > .container.topbar #topbar .pm-topbar-left,
    body > .container.topbar #topbar .pm-topbar-right {
        align-self: center !important;
        margin-top: 0 !important;
    }

    body > .container.topbar #topbar .pm-topbar-left {
        display: none !important;
    }

    body > .container.topbar #topbar .pm-topbar-right {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    body > .container.topbar #topbar .pm-topbar-right > .moduletable,
    body > .container.topbar #topbar .pm-topbar-right > .visible-desktop,
    body > .container.topbar #topbar .pm-topbar-right > .mod-type-languages,
    body > .container.topbar #topbar .pm-topbar-right > .mod-type-finder,
    body > .container.topbar #topbar .pm-topbar-right > .mod-type-search {
        display: inline-flex !important;
        align-items: center !important;
        visibility: visible !important;
    }

    body > .container.topbar #topbar .pm-topbar-right .mod-languages,
    body > .container.topbar #topbar .pm-topbar-right .pm-language-list,
    body > .container.topbar #topbar .pm-topbar-right .pm-search {
        display: flex !important;
        align-items: center !important;
    }

    body > .container.topbar #topbar .pm-topbar-right > .mod-type-finder,
    body > .container.topbar #topbar .pm-topbar-right > .mod-type-search {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: 14px !important;
    }

    body > .container.topbar #topbar .pm-topbar-right > .mod-type-languages {
        order: 2 !important;
    }

    /* 6. Hamburger: visible on mobile. Three white bars matching J3 meanmenu style. */
    .pm-mobile-hamburger {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 9px 8px !important;
        margin-left: -8px !important;
        margin-right: 4px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
    .pm-mobile-hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background-color: white !important;
        border-radius: 1px !important;
    }

    .pm-mobile-hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .pm-mobile-hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0 !important;
    }

    .pm-mobile-hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    /* 7. Mainmenu collapse: hidden by default; shown when BS5 adds .show class.
     *    Overrides the unconditional display:block!important set earlier in this file
     *    via :not(.show) (higher specificity) so the later cascade wins. */
    #mainmenu_wrapper {
        position: relative !important;
        z-index: 9998 !important;
    }

    #mainmenu_wrapper .navbar-collapse:not(.show) {
        display: none !important;
    }

    #mainmenu_wrapper .navbar-collapse.show {
        display: block !important;
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 9998 !important;
        width: min(75vw, 520px) !important;
        max-width: calc(100vw - 52px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: white !important;
        padding: 0 !important;
        box-shadow: 12px 0 22px rgba(0, 0, 0, 0.24) !important;
    }

    /* 8. Left-align menu items inside the open collapse (override centred desktop). */
    #mainmenu_wrapper,
    #mainmenu_wrapper .navbar,
    #mainmenu_wrapper .navbar-inner,
    #mainmenu_wrapper .moduletable {
        text-align: left !important;
    }

    #header_left img {
        width: 76vw !important;
        max-width: 535px !important;
        min-width: 0 !important;
    }

    #mainmenu_wrapper .level_0 > li:first-of-type {
        display: block !important;
    }

    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu,
    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu > li,
    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.nav > li,
    #mainmenu_wrapper .level_0 > li,
    #mainmenu_wrapper .level_0 > li:first-of-type,
    #mainmenu_wrapper .pm-mobile-menu-extra li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        border-bottom: 1px solid #ececec !important;
    }

    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu > li > .nav-link,
    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.nav > li > .nav-link,
    #mainmenu_wrapper .level_0 > li > a,
    #mainmenu_wrapper .pm-mobile-menu-extra a {
        display: block !important;
        margin: 0 !important;
        padding: 19px 60px 18px 24px !important;
        color: #111 !important;
        background: #fff !important;
        border: 0 !important;
        font-size: 25px !important;
        line-height: 31px !important;
        font-weight: 400 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu > li.active > .nav-link,
    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu > li.current > .nav-link,
    #mainmenu_wrapper .level_0 > li.active > a,
    #mainmenu_wrapper .level_0 > li.current > a {
        background: #0065b3 !important;
        color: #fff !important;
    }

    #mainmenu_wrapper .dropdown-toggle::after {
        display: none !important;
    }

    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.mod-menu > li.parent > .nav-link::after,
    #mainmenu_wrapper .navbar-collapse > .moduletable > ul.nav > li.parent > .nav-link::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: 24px !important;
        width: 0 !important;
        height: 0 !important;
        margin-top: -5px !important;
        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-top: 18px solid currentColor !important;
    }

    #mainmenu_wrapper .level_1,
    #mainmenu_wrapper .level_2,
    #mainmenu_wrapper .dropdown-menu,
    #mainmenu_wrapper .nav-child,
    #mainmenu_wrapper .mod-menu__sub {
        display: none !important;
    }

    #mainmenu_wrapper .pm-mobile-menu-extra {
        padding: 42px 0 80px !important;
        background: #fff !important;
    }

    #mainmenu_wrapper .pm-mobile-menu-extra h3 {
        margin: 0 !important;
        padding: 0 24px 12px !important;
        color: #111 !important;
        font-size: 31px !important;
        line-height: 38px !important;
        font-weight: 700 !important;
        text-transform: none !important;
    }

    #mainmenu_wrapper .pm-mobile-menu-extra ul,
    #mainmenu_wrapper .pm-mobile-menu-extra .mod-menu,
    #mainmenu_wrapper .pm-mobile-menu-extra .nav,
    #mainmenu_wrapper .pm-mobile-menu-extra .menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* Final mobile footer pass: loaded after every footer/grid rule. */
@media screen and (max-width: 767px) {
    #footer.footer_container,
    .footer_container {
        padding: 42px 0 !important;
        overflow: hidden !important;
    }

    #footer .container.footer_inner,
    .footer_container .footer_inner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #footer .container.footer_inner > .row-fluid,
    #footer .container.footer_inner > .row,
    .footer_container .footer_inner > .row-fluid,
    .footer_container .footer_inner > .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #footer .footer_inner .module,
    #footer .footer_inner .moduletable,
    #footer .footer_inner .module:first-child,
    .footer_container .footer_inner .module,
    .footer_container .footer_inner .moduletable,
    .footer_container .footer_inner .module:first-child {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #footer .footer_inner .module h3,
    #footer .footer_inner .moduletable h3,
    .footer_container .footer_inner .module h3,
    .footer_container .footer_inner .moduletable h3 {
        min-height: 0 !important;
        margin: 0 0 36px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 26px !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    #footer .footer_inner .module ul,
    #footer .footer_inner .moduletable ul,
    #footer .footer_inner .module .nav,
    #footer .footer_inner .moduletable .nav,
    #footer .footer_inner .module .mod-menu,
    #footer .footer_inner .moduletable .mod-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer .footer_inner .module li,
    #footer .footer_inner .moduletable li,
    #footer .footer_inner .module .nav li,
    #footer .footer_inner .moduletable .nav li,
    #footer .footer_inner .module .mod-menu li,
    #footer .footer_inner .moduletable .mod-menu li {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #909090 !important;
        text-align: left !important;
    }

    #footer .footer_inner .module a,
    #footer .footer_inner .moduletable a,
    #footer .footer_inner .module .nav li a,
    #footer .footer_inner .moduletable .nav li a,
    #footer .footer_inner .module .mod-menu li a,
    #footer .footer_inner .moduletable .mod-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        color: #e8e8e8 !important;
        font-size: 17px !important;
        line-height: 28px !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    #facebook_like {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 !important;
        padding: 24px 0 0 !important;
        text-align: center !important;
    }

    #facebook_like .custom,
    #facebook_like p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
}

/* Final mobile drawer pass: target the rendered J6 collapse directly so
   Bootstrap/nav defaults cannot enlarge the menu or hide the parent arrows. */
@media (max-width: 991px) {
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #ececec !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li > a,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li > a {
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 15px 56px 14px 24px !important;
        color: #111 !important;
        background: #fff !important;
        border: 0 !important;
        font-size: 18px !important;
        line-height: 31px !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.active > a,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.current > a,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.active > a,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.current > a {
        background: #0065b3 !important;
        color: #fff !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.parent > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.deeper > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.dropdown > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.parent > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.deeper > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.dropdown > a::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 22px !important;
        width: 0 !important;
        height: 0 !important;
        margin: -6px 0 0 0 !important;
        border-left: 8px solid transparent !important;
        border-right: 8px solid transparent !important;
        border-top: 16px solid currentColor !important;
        border-bottom: 0 !important;
        transform: none !important;
    }

    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.parent.pm-submenu-open > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.deeper.pm-submenu-open > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.mod-menu > li.dropdown.pm-submenu-open > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.parent.pm-submenu-open > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.deeper.pm-submenu-open > a::after,
    body.pm-template #mainmenu-collapse.show > .moduletable > ul.nav > li.dropdown.pm-submenu-open > a::after {
        transform: rotate(180deg) !important;
        margin-top: -9px !important;
    }

    body.pm-template #mainmenu-collapse.show .dropdown-menu,
    body.pm-template #mainmenu-collapse.show .nav-child,
    body.pm-template #mainmenu-collapse.show .mod-menu__sub,
    body.pm-template #mainmenu-collapse.show .wrapper,
    body.pm-template #mainmenu-collapse.show .modulmenu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #f7f7f7 !important;
        transition: max-height 260ms ease !important;
    }

    body.pm-template #mainmenu-collapse.show .wrapper > .nav-child,
    body.pm-template #mainmenu-collapse.show .wrapper > .mod-menu__sub {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
    }

    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .dropdown-menu,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .nav-child,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .mod-menu__sub,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .wrapper,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .modulmenu,
    body.pm-template #mainmenu-collapse.show li.pm-submenu-open > .wrapper > .nav-child {
        display: block !important;
    }

    body.pm-template #mainmenu-collapse.show .dropdown-menu a,
    body.pm-template #mainmenu-collapse.show .nav-child a,
    body.pm-template #mainmenu-collapse.show .mod-menu__sub a,
    body.pm-template #mainmenu-collapse.show .wrapper a,
    body.pm-template #mainmenu-collapse.show .modulmenu a {
        display: block !important;
        padding: 8px 24px 8px 42px !important;
        color: #111 !important;
        font-size: 14px !important;
        line-height: 21px !important;
        text-transform: uppercase !important;
        background: #f7f7f7 !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra {
        display: block !important;
        padding: 34px 0 80px !important;
        text-align: left !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra h3 {
        display: block !important;
        margin: 0 !important;
        padding: 0 24px 10px !important;
        color: #111 !important;
        font-size: 27px !important;
        line-height: 33px !important;
        font-weight: 700 !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.pm-template #mainmenu-collapse.show .pm-mobile-menu-extra a {
        padding: 15px 24px 14px !important;
        color: #111 !important;
        font-size: 18px !important;
        line-height: 31px !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }
}

html { scroll-behavior: smooth; }

.messages_container { margin-top: 1rem; }
.messages_container .alert { margin-bottom: 0; }
.messages_container .alert-error,
.messages_container .alert-danger { background: #f8d7da; color: #842029; border-color: #f5c2c7; }
.messages_container { scroll-margin-top: 1rem; }

/* com_pm jobs filter relies on Bootstrap 3 .hidden utility — restore it for J6 */
#jobs_overview .cbp-item.hidden,
#jobs_overview .no_items_found.hidden {
    display: none !important;
}

/* ===== com_pm jobs overview — J6/Bootstrap 5 fixes ===== */

/* 1. Neutralise Masonry: flow layout, no absolute positioning */
#jobs_overview .job_items {
    position: static !important;
    height: auto !important;
}
#jobs_overview .job_items .cbp-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e5e5;
}
#jobs_overview .job_items .cbp-item:hover { background: #f7f7f7; }

/* 2. Re-create Bootstrap-2 column widths */
#jobs_overview .job_items .cbp-item .span6 { flex: 0 0 50%; max-width: 50%; padding-right: 12px; }
#jobs_overview .job_items .cbp-item .span3 { flex: 0 0 25%; max-width: 25%; padding-right: 12px; }
#jobs_overview .job_items .cbp-item p { margin: 0; }
#jobs_overview .job_items .cbp-item .description { display: none; }

/* 3. Equal-width header row */
#jobs_overview .table_headers { display: flex; }
#jobs_overview .table_headers .table_head { flex: 1; }
#jobs_overview .table_headers .table_head:first-child { flex: 2; }

/* 4. Filter / empty state — MUST come LAST to beat the flex rule's specificity */
#jobs_overview .job_items .cbp-item.hidden,
#jobs_overview .no_items_found.hidden { display: none !important; }


/* Banner — brute-force full viewport width */
body.view-jobs #page,
body.view-jobs #content,
body.view-jobs .page_inner,
body.view-jobs .row-fluid.row.page_inner,
body.view-jobs #component_wrapper,
body.view-jobs #component,
body.view-jobs #jobs_overview {
    overflow: visible !important;
    max-width: none !important;
}

body.view-jobs .news_module_menu {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}

body.view-jobs .news_module_menu *,
body.view-jobs .news_module_menu .custom,
body.view-jobs .news_module_menu img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Last-resort: if a parent still clips, escape via fixed positioning offset */
body.view-jobs .news_module_menu img {
    object-fit: cover;
}

/* ───────────────────────────────────────────────────────────────
   Language switcher: render ZH EN DE on one line, like J3.
   J3 used ul.lang-inline (display:inline li); the J6 override uses
   ul.pm-language-list, which stacks the items vertically by default.
   ─────────────────────────────────────────────────────────────── */
.mod-languages ul.pm-language-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;                 /* = J3's 5px left + 5px right per item */
    margin: 0;
    padding: 0;
    list-style: none;
}
.mod-languages ul.pm-language-list li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;       /* removes any stacked separators */
}
.mod-languages ul.pm-language-list a {
    text-decoration: none;
}

/* J3 parity — article body list dash markers + sizing.
   Mirrors J3 "#component .itemView ul li" rules, re-scoped to J6's
   [itemprop="articleBody"] wrapper. */
#component .item-page [itemprop="articleBody"] ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#component .item-page [itemprop="articleBody"] ul li {
	font-size: 18px;
	line-height: 30px;
	margin-bottom: 5px;
	list-style: none;
	padding-left: 0;
}
#component .item-page [itemprop="articleBody"] ul li::before {
	content: "-";
	margin-right: 5px;
}

/* ===== Regular Labs Tabs & Accordions — expand/collapse arrow ===== */
/* This version uses data-rlta-* attributes (no CSS classes) */
[data-rlta-element="button"] {
  position: relative;
  padding-right: 2.5rem;   /* room for the arrow on the right */
  cursor: pointer;
}

[data-rlta-element="button"]::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* points DOWN = closed */
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* flip the arrow UP when the item is open */
[data-rlta-element="button"][data-rlta-state="open"]::after,
[data-rlta-element="button"][aria-expanded="true"]::after {
  transform: rotate(-135deg);        /* points UP = open */
}

/* Main navigation: stop dropdowns from closing too quickly */

#mainmenu_wrapper ul.nav-child.level_1,
#mainmenu_wrapper ul.nav-child.level_2 {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.2s ease;
}

#mainmenu_wrapper .level_0 li:hover ul.nav-child.level_1,
#mainmenu_wrapper .level_0 ul.nav-child.level_1 li:hover ul.nav-child.level_2 {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

#mainmenu_wrapper .level_0 > li.deeper:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 34px;
    background: transparent;
}

#mainmenu_wrapper ul.nav-child.level_1 > li.parent:hover::before {
    content: "";
    position: absolute;
    top: 0;
    right: -24px;
    width: 24px;
    height: 100%;
    background: transparent;
}

/* ETO Weltweit: hide all continent maps by default so they never stack on load */
#k2blog.pm_standort .itemListLeading { display: none; }
/* Show Europe by default until JavaScript selects the right region */
#k2blog.pm_standort .map_1 { display: block; }