/**
 * jp-logistik-wachstumstreiber.css — /de/logistik-als-wachstumstreiber/ restyle.
 *
 * Scope: page-id 326672 (PROD) + 304462 (STAGING + dev clone). This page was
 * migrated with DIFFERENT post-ids per environment, so BOTH ids are scoped on
 * every rule — scoping to one id silently misses the other env.
 *
 * Figma: NGhRnXhpI8bbeDQhA9mUzD → 865:8325 (tabs bar), 248:5150 (list arrow).
 *
 * 1. CTA "Whitepaper (gratis) herunterladen" (.product-button-group__button
 *    .has-wawi-gradient) shipped the legacy orange→yellow gradient (painted on
 *    ::before/::after) with grey #333 text → JTL Primary pill: solid #FB581F
 *    fill, Dark Blue #0b1b45 text, 999px radius, gradient pseudos removed.
 *    Hover = darker orange #d44a17 (no gradient flashback). The centred
 *    "…gratis…" CTA gets extra bottom margin.
 * 2. "Das steckt im Whitepaper" PRAXIS-KNOWHOW tab/slider nav
 *    (.kapitel.tabs.tabs-pills): solid white CAPSULE bar (border-radius 9999px,
 *    perfectly round ends); the theme's flat gray #DDDDDD scrolling track on
 *    .swiper-wrapper.nav-tabs is nuked. Tech Blue #2722F8 fully-round active
 *    pill (white text) floating with ~6px clearance inside the white track;
 *    Dark Blue #0b1b45 inactive text at font-weight 500 (medium, not bold);
 *    inactive hover = subtle Tech Blue tint. Left/right nav arrows kept.
 * 3. "Das erwartet dich" list (ul.list-icons .list-icon) arrows were legacy
 *    teal #05C7D1 (inline style) → Tech Blue #2722F8 (Figma 248:5150).
 */

/* ---- 1. CTA → JTL Primary orange pill ---------------------------------- */
body.page-id-326672 .product-button-group__button.has-wawi-gradient,
body.page-id-304462 .product-button-group__button.has-wawi-gradient {
    background-color: #FB581F !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #0b1b45 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}
/* Kill the legacy orange→yellow gradient the theme paints on the pseudos. */
body.page-id-326672 .product-button-group__button.has-wawi-gradient::before,
body.page-id-326672 .product-button-group__button.has-wawi-gradient::after,
body.page-id-304462 .product-button-group__button.has-wawi-gradient::before,
body.page-id-304462 .product-button-group__button.has-wawi-gradient::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}
body.page-id-326672 .product-button-group__button.has-wawi-gradient span,
body.page-id-326672 .product-button-group__button.has-wawi-gradient .product-button-group__button__text,
body.page-id-304462 .product-button-group__button.has-wawi-gradient span,
body.page-id-304462 .product-button-group__button.has-wawi-gradient .product-button-group__button__text {
    color: #0b1b45 !important;
}
/* Hover → darker orange, keep Dark Blue text, no gradient flashback. */
body.page-id-326672 .product-button-group__button.has-wawi-gradient:hover,
body.page-id-326672 .product-button-group__button.has-wawi-gradient:focus,
body.page-id-304462 .product-button-group__button.has-wawi-gradient:hover,
body.page-id-304462 .product-button-group__button.has-wawi-gradient:focus {
    background-color: #d44a17 !important;
    background-image: none !important;
    color: #0b1b45 !important;
}
body.page-id-326672 .product-button-group__button.has-wawi-gradient:hover::before,
body.page-id-326672 .product-button-group__button.has-wawi-gradient:hover::after,
body.page-id-304462 .product-button-group__button.has-wawi-gradient:hover::before,
body.page-id-304462 .product-button-group__button.has-wawi-gradient:hover::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
/* Extra bottom margin under the centred "Whitepaper gratis herunterladen". */
body.page-id-326672 .product-button-group__button.has-wawi-gradient.ml-auto.mr-auto,
body.page-id-304462 .product-button-group__button.has-wawi-gradient.ml-auto.mr-auto {
    margin-bottom: 40px !important;
}

/* ---- 2. PRAXIS-KNOWHOW tabs bar → Figma 865:8325 ----------------------- */
/* Solid white CAPSULE bar (full 9999px radius = perfectly round ends) on the
   STATIC container. overflow:hidden clips the scrolling pills to the capsule. */
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-container,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-container {
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 9999px !important;
    padding: 6px 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
/* Nuke the theme's flat light-gray (#DDDDDD) scrolling track that sits on the
   .swiper-wrapper.nav-tabs — that was the gray fill behind the pills. */
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-wrapper.nav-tabs,
body.page-id-326672 .kapitel.tabs.tabs-pills .nav-tabs,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-wrapper.nav-tabs,
body.page-id-304462 .kapitel.tabs.tabs-pills .nav-tabs {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* pill typography + kill the Bootstrap outline; smooth hover transition */
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill {
    border: 0 !important;
    margin: 0 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 8px 22px !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
/* inactive → transparent, Dark Blue text (beats .btn-outline-primary #435A6B) */
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active),
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active) {
    background: transparent !important;
    color: #0b1b45 !important;
}
/* inactive hover/focus → subtle Tech Blue tint pill (was grey-blue Bootstrap fill) */
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active):hover,
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active):focus,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active):hover,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill:not(.active):focus {
    background: rgba(39, 34, 248, 0.08) !important;
    color: #2722f8 !important;
    border-radius: 9999px !important;
}
/* active → Tech Blue pill, white text (beats .tabs-pills .nav-item .active) */
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active {
    background: #2722f8 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
}
/* active hover/focus → slightly darker Tech Blue, stays white text */
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active:hover,
body.page-id-326672 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active:focus,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active:hover,
body.page-id-304462 .kapitel.tabs.tabs-pills a.btn.btn-outline-primary.btn-pill.active:focus {
    background: #1b17c9 !important;
    color: #ffffff !important;
}
/* keep the left/right nav arrows, paint them Dark Blue */
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-button-prev,
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-button-next,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-button-prev,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-button-next {
    color: #0b1b45 !important;
}
/* Round the arrows' white scroll-fade (::before) so the capsule's left/right
   ends stay rounded around the arrows — otherwise the 72px square white fade
   fills the container's rounded corners and the ends read as square. */
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-button-next::before,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-button-next::before {
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
}
body.page-id-326672 .kapitel.tabs.tabs-pills .swiper-button-prev::before,
body.page-id-304462 .kapitel.tabs.tabs-pills .swiper-button-prev::before {
    border-top-left-radius: 9999px !important;
    border-bottom-left-radius: 9999px !important;
}

/* ---- 3. "Das erwartet dich" list arrows → Tech Blue (Figma 248:5150) --- */
/* Beats the inline style="color:#05C7D1" on the icon span. Scoped to list
   items so the tab-nav arrow (also .list-icon) is untouched. */
body.page-id-326672 ul.list-icons li .list-icon,
body.page-id-326672 ul.list-icons li .fa-arrow-right.list-icon,
body.page-id-304462 ul.list-icons li .list-icon,
body.page-id-304462 ul.list-icons li .fa-arrow-right.list-icon {
    color: #2722F8 !important;
}