/**
 * custom-clone.css — Dump-clone CSS overrides
 *
 * Loaded last (after theme + WPBakery) so every rule here wins.
 * Sync to the live container with: make dump-clone-sync-overlay
 *
 * Selector tips:
 *   Landing page root:        .page-template-product-landing
 *   WPBakery rows:            .vc_row
 *   WPBakery columns:         .vc_column_inner, .wpb_column
 *   WPBakery text block:      .wpb_text_column
 *   WPBakery icon box:        .vc_icon_element
 *   Landing page hero:        .landing-page-hero
 */

/* ── Add your overrides below ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   JTL brand color utilities — used by the JTL Farbpalette dropdown
   Values: JTL-Light-Sand (#eeeee7), JTL-Tech-Blue (#2722f8), JTL-Dark-Blue (#0b1b45)
   ═══════════════════════════════════════════════════════════════════════════ */
.text-light-sand {
    color: #eeeee7 !important;
}

.bg-light-sand {
    background-color: #eeeee7 !important;
}

.border-light-sand {
    border-color: #eeeee7 !important;
}

.text-tech-blue {
    color: #2722f8 !important;
}

.bg-tech-blue {
    background-color: #2722f8 !important;
}

.border-tech-blue {
    border-color: #2722f8 !important;
}

.text-dark-blue {
    color: #0b1b45 !important;
}

.bg-dark-blue {
    background-color: #0b1b45 !important;
}

.border-dark-blue {
    border-color: #0b1b45 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Landing page — light-sand background
   Affects: all pages using the "Product Landing" template (e.g. /de/ki/)
   Source: Figma node 188:9689 — JTL Light Sand (#eeeee7)
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-template-product-landing {
    background-color: #eeeee7;
    /* JTL Light Sand */
}

/* #app is the theme's root wrapper and has background:white in the theme CSS.
   Make it transparent so the body sand color shows through. */
body.page-template-product-landing #app {
    background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   product-management-section  (orange variant)
   Affects: DEALAVO, RETURNLESS, "Was uns unterscheidet", and the KI-intro row
   on /de/ki/ — all share .product-management-section.orange
   Source: Figma node 1:410 ("Text-Media-Desktop 1440")
   ═══════════════════════════════════════════════════════════════════════════ */

/* We comment this out for now. Doing Development in real overalyed plugins */

/* ═══════════════════════════════════════════════════════════════════════════
   #ki-portfolio — 1-column intro text section
   Figma: node 188:11196 "Text-1spaltig-Desktop 1440"
   Typography (color/size/weight) is now canonical in style.scss via the
   updated .product-management-section base rules using $jtl-tech-blue /
   $jtl-dark-blue tokens. Only page-specific layout overrides live here.
   NOTE: Kurdis Wide Bold is the Figma font for H2 — not yet loaded in this
   environment; Inter is used as fallback until the webfont is available.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override WPBakery inline #FFF5E9 !important — ID selector beats class selector */
section#ki-portfolio {
    background-color: #ffffff !important;
}

/* Center the column content and cap at 864px (layout, not in style.scss) */
section#ki-portfolio .col-lg-12 {
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Kurdis Wide Bold for H2 — only needed here until webfont is globally loaded */
section#ki-portfolio .product-management-section__title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   New pill header — Nav-new3
   Replaces old Bootstrap sticky bar.
   Source: Figma node 188:9744 (file eT0e02dgIxlyfEkrU8yQFC)

   Design tokens used:
     #0b1b45  = JTL Dark Blue  (text, chevrons)
     #eeeee7  = JTL Light Sand (pill border, divider)
     #2722f8  = JTL Tech Blue  (CTA button bg)
     #ffffff  = white           (pill bg)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 — Reset the old #header bar to be transparent / borderless */
#header {
    background: transparent !important;
    border-bottom: none !important;
    position: relative !important;
    /* overrides sticky when not scrolled */
}

/* 2 — Outer wrapper: floating pill offset from page edges */
.jtl-nav-wrapper {
    padding: 24px 42px;
    position: relative;
    z-index: 1030;
}

/* 2b — Anchor: relative container for the pill + absolutely-positioned megamenus */
.jtl-nav-pill-anchor {
    position: relative;
    width: 100%;
}

/* 3 — The pill itself */
.jtl-nav-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-radius: 46px;
    padding: 16px 16px 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

/* 4 — Logo */
.jtl-nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.jtl-nav-logo svg {
    display: block;
    height: 36px;
    width: auto;
}

/* 5 — Desktop right section (primary nav + divider + utils + CTA) */
.jtl-nav-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    min-width: 0;
    justify-content: flex-end;
    overflow: hidden;
}

/* 6 — Primary nav list */
.jtl-nav-primary {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

/* 7 — Nav items + links */
.jtl-nav-item {
    position: relative;
}

.jtl-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    /* Inter Medium */
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.jtl-nav-link:hover,
.jtl-nav-link:focus {
    color: #2722f8;
    text-decoration: none;
}

/* Chevron icon */
.jtl-nav-chevron {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.jtl-nav-item.has-dropdown:hover .jtl-nav-chevron,
.jtl-nav-item.has-dropdown .jtl-nav-link[aria-expanded="true"] .jtl-nav-chevron {
    transform: rotate(180deg);
}

/* 8 — Simple (non-mega) dropdown menus: positioned absolutely, hidden by default */
.jtl-nav-item .dropdown-menu {
    position: absolute !important;
    display: none !important;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-radius: 12px;
    z-index: 1040;
    min-width: 220px;
    padding: 8px 0;
}

.jtl-nav-item.has-dropdown:not(.dropdown-full):hover>.dropdown-menu,
.jtl-nav-item.has-dropdown:not(.dropdown-full):focus-within>.dropdown-menu {
    display: block !important;
}

/* 9 — Vertical divider */
.jtl-nav-divider {
    width: 1px;
    height: 19.5px;
    background: #eeeee7;
    flex-shrink: 0;
}

/* 10 — Utility link group */
.jtl-nav-utils {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* 11 — CTA button: "Demo Buchen" */
.jtl-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #2722f8;
    color: #ffffff !important;
    border-radius: 145px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    /* Inter Semi Bold */
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.jtl-nav-cta:hover,
.jtl-nav-cta:focus {
    background: #1d19d4;
    color: #ffffff !important;
    text-decoration: none;
}

/* 12 — Mobile hamburger (left, < 768px) */
.jtl-nav-mob-ham {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #0b1b45;
    flex-shrink: 0;
    order: 1;
}

/* 13 — Mobile search icon (right, < 768px) */
.jtl-nav-mob-search {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b1b45;
    line-height: 0;
    text-decoration: none;
    flex-shrink: 0;
    order: 3;
}

.jtl-nav-mob-search:hover {
    color: #2722f8;
}

/* 14 — Tablet controls (768px–1199px) */
.jtl-nav-tablet-controls {
    align-items: center;
    gap: 40px;
}

.jtl-nav-tab-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.jtl-nav-tab-ham {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* 15 — Mobile nav drawer body */
.jtl-nav-mobile-body {
    background: #ffffff;
    border-top: 1px solid #eeeee7;
    padding: 0;
}

/* 15 — Suppress old Bootstrap .fl-header */
#header .fl-header {
    display: none !important;
}

/* 16 — Tablet (768px–1199px): full pill border-radius, wrapper padding reduces */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .jtl-nav-wrapper {
        padding: 12px 16px;
    }

    /* Keep full 46px border-radius (same as desktop) */
    .jtl-nav-pill {
        padding: 16px 16px 16px 24px;
    }

    .jtl-nav-logo svg {
        height: 34px;
        width: auto;
    }
}

/* 17 — Mobile (< 768px): 24px border-radius, centered logo */
@media (max-width: 767.98px) {
    .jtl-nav-wrapper {
        padding: 8px 12px;
    }

    .jtl-nav-pill {
        border-radius: 24px;
        padding: 15px 24px;
    }

    /* Center the logo between hamburger and search */
    .jtl-nav-logo {
        flex: 1;
        justify-content: center;
        order: 2;
    }

    .jtl-nav-logo svg {
        height: 18px;
        width: auto;
    }
}

/* 18 — Megamenu open state.
   JP-338: the pill stays a fully-rounded pill while a mega-menu is open —
   the dropdown is a SEPARATE floating card below it (Figma 248:1840), not
   fused to the pill. The .jtl-nav-pill--open class is still toggled by the
   hover JS but no longer alters the pill shape. */

/* 16 — Megamenu panel — separate floating card below the pill (Figma 248:1840).
   8px gap, all four corners rounded, right-aligned with the pill, left edge
   inset past the logo so the dropdown sits under the nav links. */
.jtl-megamenu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    width: max-content;
    max-width: calc(100% - 132px);
    z-index: 1035;
    background: #ffffff;
    border: 2px solid #eeeee7;
    border-radius: 46px;
    padding: 24px;
    box-sizing: border-box;
}

/* Produkte (has-promo) keeps the full-width inset so promo card sits flush
   with the pill's right edge — the flex layout below sizes columns + promo. */
.jtl-megamenu--has-promo {
    left: 132px;
    right: 0;
    width: auto;
    max-width: none;
}

.jtl-megamenu[aria-hidden="false"] {
    display: block;
}

/* Column grid — fixed 180px columns packed to the left so every row has the
   same column widths and short menus don't get stretched apart.

   Non-promo panels (Partner, Wissen, Unternehmen, Login, Stores) use a single
   flex row: the panel is `width: max-content`, so it shrink-wraps to the
   exact width of N × 180px columns and right-aligns under the nav links.

   The Produkte panel (.jtl-megamenu--has-promo) has 7 categories + a promo
   card and needs to wrap, so it gets a grid with auto-fill + fixed 180px
   tracks (overridden further down in the has-promo block). */
.jtl-megamenu-cols {
    display: flex;
    column-gap: 24px;
    row-gap: 16px;
    align-items: flex-start;
}

.jtl-megamenu-col {
    flex: 0 0 180px;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Category heading — Inter Bold 16px */
.jtl-megamenu-heading {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    padding: 6px 12px;
    margin: 0 0 2px;
}

/* Sub-items — Inter Medium 16px. Allow wrapping so long labels
   (Dokumentenmanagement-Software etc.) fit inside the fixed 180px column. */
.jtl-megamenu-item {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.32px;
    color: #0b1b45;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
    word-break: normal;
    overflow-wrap: anywhere;
}

.jtl-megamenu-item:hover,
.jtl-megamenu-item:focus {
    background: #f5f5f0;
    color: #0b1b45;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-338 — Mega-menu promo card ("Die JTL Produktfamilie")
   Figma after-spec node 248:1840. Renders only in the products mega-menu
   (.jtl-megamenu--has-promo). The Figma card layers a marketing photo under
   a dark-blue panel; per the project's photo-is-content convention
   (JP-34 / JP-116) this CSS-only restyle ships the branded card — JTL Dark
   Blue with a JTL Orange corner accent — and leaves the photo to content.
     #0b1b45 = JTL Dark Blue   #fb581f = JTL Orange   #ffffff = white
   ═══════════════════════════════════════════════════════════════════════════ */

/* Promo variant turns the panel into a row: link columns | promo card */
.jtl-megamenu--has-promo[aria-hidden="false"] {
    display: flex;
    gap: 24px;
    align-items: stretch;
}
.jtl-megamenu--has-promo .jtl-megamenu-cols {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    column-gap: 24px;
    row-gap: 16px;
    justify-content: start;
    align-items: start;
}

.jtl-megamenu-promo {
    position: relative;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    max-height: 430px;                 /* row 39 */
    padding: 0;                        /* row 39 — photo fills the card edge-to-edge */
    border-radius: 24px;
    overflow: hidden;
    background-color: #0b1b45;         /* fallback while the photo loads */
    background-image: url("images/megamenu-promo/jtl-megamenu-promo-img.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    text-decoration: none;
}
.jtl-megamenu-promo:hover,
.jtl-megamenu-promo:focus {
    text-decoration: none;
}

/* JTL Orange shape, anchored to the top-right corner (masked SVG asset). */
.jtl-megamenu-promo-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;                        /* ≈ Figma: orange ~35% of card width */
    aspect-ratio: 163 / 265;          /* native ratio of the shape asset */
    background-color: #fb581f; /* JTL Orange */
    -webkit-mask: url("images/megamenu-promo/jtl-megamenu-promo-shape-top-right.svg") top right / contain no-repeat;
            mask: url("images/megamenu-promo/jtl-megamenu-promo-shape-top-right.svg") top right / contain no-repeat;
    pointer-events: none;
}

/* Blue (#2722f8) footer holding title + text + arrow, with a wavy top edge. */
.jtl-megamenu-promo-foot {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 16px 24px 28px;
    background-color: #2722f8; /* JTL Tech Blue */
}
/* Upward wave that blends the blue footer into the photo (masked SVG asset). */
.jtl-megamenu-promo-foot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 2px);         /* overlap the footer 2px → no seam/slit */
    height: 69px;                      /* asset-exact: 320px-wide card ÷ (286/60) ≈ 67px + 2px overlap */
    background-color: #2722f8;
    -webkit-mask: url("images/megamenu-promo/jtl-megamenu-promo-shape-bottom.svg") bottom center / 100% 100% no-repeat;
            mask: url("images/megamenu-promo/jtl-megamenu-promo-shape-bottom.svg") bottom center / 100% 100% no-repeat;
    pointer-events: none;
}
.jtl-megamenu-promo-body {
    flex: 1 1 auto;
    min-width: 0;
}
.jtl-megamenu-promo-title {
    display: block;
    margin-bottom: 8px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.4px;
    color: #ffffff;
}
.jtl-megamenu-promo-text {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
}

/* White arrow — nudges right on hover/focus */
.jtl-megamenu-promo-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: transform 0.15s ease;
}
.jtl-megamenu-promo-arrow svg {
    display: block;
}
.jtl-megamenu-promo:hover .jtl-megamenu-promo-arrow,
.jtl-megamenu-promo:focus .jtl-megamenu-promo-arrow {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QuoteStandard (Komp widget — JP-83)
   Restyle the testimonial blockquote to match Figma "Quote-no-box"
   (file VSSY3wxlC31HrYDwwmHmrv, node 351:6725).
   CSS-only restyle. Two structural gaps that need a separate widget edit
   are documented in the PR description:
     1. Photo overlays (SportFits logo + quote-blob shapes)
     2. Splitting "name | title" onto separate lines (currently one `source` string)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the inline FA quote-mark glyphs that wrap the quote text.
   The widget output contains <span class="fal fa-quote-right blockquote-quote-left fa-sm">
   and a matching closing one — Figma uses typographic quotes ("...") instead. */
blockquote.blockquote .blockquote-quote-left,
blockquote.blockquote .blockquote-quote-right {
    display: none;
}

/* Image: drop the perfect-circle + bordered thumbnail look in favour of an
   organic blob shape that matches the Figma testimonial card. The Bootstrap
   `.rounded-circle` and `.img-thumbnail` classes still get applied on the
   <img>, so we override with higher specificity. */
blockquote.blockquote .img-thumbnail {
    padding: 0;
    background: transparent;
    border: 0;
}

blockquote.blockquote img.rounded-circle {
    /* Asymmetric superellipse — 4 distinct radii give the soft "blob" feel.
       !important needed: Bootstrap 4 ships .rounded-circle as `border-radius: 50% !important;`. */
    /* More pronounced asymmetry to read as a "blob" not a circle at a glance */
    border-radius: 38% 62% 41% 59% / 53% 39% 61% 47% !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.06);
}

/* Quote text — Inter Medium 24px / 38 lh, JTL Dark Blue */
blockquote.blockquote > .col-lg,
blockquote.blockquote > .col-lg p {
    font-family: Inter, "Inter Tight", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0.48px; /* Figma testimonial-desktop: letterSpacing:2 = 2% of 24px = 0.48px */
    color: #0b1b45;
}

/* Author footer — bold, JTL Dark Blue, no italic, no leading em-dash */
blockquote.blockquote .blockquote-footer {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    font-style: normal;
    margin-top: 24px;
}

blockquote.blockquote .blockquote-footer::before {
    content: none; /* kill the Bootstrap "— " prefix */
}

/* Author footer link (if a `link` attr is set) — underline style like Figma */
blockquote.blockquote .blockquote-footer a {
    color: #0b1b45;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tighten mobile: 18/26 for the quote text */
@media (max-width: 767.98px) {
    blockquote.blockquote > .col-lg,
    blockquote.blockquote > .col-lg p {
        font-size: 18px;
        line-height: 26px;
    }
    blockquote.blockquote .blockquote-footer {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Composed 'Quote-no-box' module — used by /de/demo-quote-no-box/
   Built as a 2-column vc_row:
     LEFT  — Image widget (composite photo with logo + quote-blob overlays
             baked in; demo uses bare image #1369 since the composite asset
             isn't uploaded — see docs/widget-screenshots/JP-83/composed/)
     RIGHT — HeadlineStandard 'SUCCESS STORY' (.overline-success class)
             QuoteStandard (content only, no image, no source)
             Text widget — author name  (.author-name class)
             Text widget — author title (.author-title class)
             ButtonsStandard / Item with color="orange"
   No pseudo-element overlays. No layout offsets. Pure widget composition.
   ═══════════════════════════════════════════════════════════════════════════ */

/* JTL Orange button — color="orange" on ButtonsStandardItem maps to .btn-orange.
   Authoritative spec from Figma get_design_context for node 335:2067:
     bg #fb581f, text #0b1b45 (DARK BLUE — not white!), Inter SemiBold 16/24,
     tracking 0.32px (Figma's letterSpacing:2 = 2% of font-size = 0.32px at 16px),
     padding 12px 24px, radius ~145px (pill). */
.btn-orange,
a.btn-orange,
.btn-orange:not(:disabled):not(.disabled) {
    background-color: #fb581f;
    border-color: #fb581f;
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.32px;
    line-height: 24px;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 145px;
}
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
a.btn-orange:hover {
    background-color: #e34813;
    border-color: #e34813;
    color: #0b1b45;
}

/* Tech-blue overline 'SUCCESS STORY' — authoritative spec from Figma node 86:429:
   Inter SemiBold 18/24, #2722f8, tracking 0.9px (letterSpacing:5 = 5% of 18px),
   uppercase. */
span.h5.overline-success,
span.h6.overline-success,
.overline-success {
    display: block;
    color: #2722f8;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-align: left;
}

/* Author name (node 86:431 first <p>) — Inter SemiBold 16/28, Dark Blue.
   I had this wrong as Bold 18/24 earlier. */
.author-name,
.author-name p {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 28px;
    margin-top: 24px;
    margin-bottom: 0;
}

/* Author title (node 86:431 second <p>) — Inter Regular 14/28, Dark Blue,
   underline color #fb581f (JTL Orange), thickness 6.5% of font-size = ~0.91px.
   I had this wrong as Medium 16/24 with default underline color. */
.author-title,
.author-title p,
.author-title a {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    text-decoration: underline;
    text-decoration-color: #fb581f;
    text-decoration-thickness: 0.91px;
    text-underline-offset: 3px;
    margin-bottom: 32px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Demo-page layout: the WP page renders as body > main > section > .container
   > .row > .col (no .vc_row class — the jtl theme's pagebuilder translates
   vc_row directly into Bootstrap container/row). Every demo-specific rule
   below is scoped to body.page-id-322542 to avoid affecting other pages.
   ─────────────────────────────────────────────────────────────────────────── */

/* Section background — sand */
body.page-id-322542 main > section {
    background-color: #eeeee7;
    padding: 64px 0;
}

/* Vertically center the image column with the right text column */
body.page-id-322542 .container > .row {
    align-items: center;
}

/* Left-column image — blob shape, scoped to the demo via :has(picture).
   The ImageStandard widget renders <img class="lazy img-fluid border-solid">
   without .rounded-circle, so we apply the asymmetric radii here. */
body.page-id-322542 .col:has(> picture) img.img-fluid {
    width: 100% !important;
    height: auto;
    max-width: 480px;
    border-radius: 38% 62% 41% 59% / 53% 39% 61% 47% !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.06);
}

/* Mobile: stack the columns vertically and recenter content */
@media (max-width: 767.98px) {
    body.page-id-322542 .container > .row {
        flex-direction: column;
    }
    body.page-id-322542 .container > .row > .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
    }
    body.page-id-322542 .col:has(> picture) img.img-fluid {
        max-width: 280px;
        margin: 0 auto 24px;
    }
    body.page-id-322542 .overline-success,
    body.page-id-322542 .author-name,
    body.page-id-322542 .author-title {
        text-align: center;
    }
    body.page-id-322542 .btn-wrapper {
        justify-content: center !important;
    }
}

/* Author footer — split first line (name) vs second line (title) when
   the source string uses `Name, Title` convention. We can't actually split
   without a Template.php change, so just left-align on desktop and ensure
   bold styling for the whole line. */
blockquote.blockquote .blockquote-footer {
    text-align: left;
}
@media (max-width: 767.98px) {
    blockquote.blockquote .blockquote-footer {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AccordionsStandard (Komp widget — JP-26)
   Figma: VSSY3wxlC31HrYDwwmHmrv node 188:5182 (AccordionDesktop 1440 —
   Warenwirtschaft) + 188:8081 (Accordion-Mobil). Same design across all
   14 product/pricing frames listed in the ticket; values verified per
   leaf via mcp__figma__get_design_context.

   Scoping: this rules block targets only `.accordion.accordion-standard`,
   the marker class added in Standard/Widget.php (JP-26). The FAQ widget
   (also renders `.accordion` but without the marker) and the VerticalImage
   variant (`.accordion-vertical`) are intentionally untouched — they'll
   be restyled by their own tickets.

   Design tokens (hardcoded — Phase 2.2 SCSS tokens file not yet shipped;
   follows the JP-83 precedent of inline hex with comments):
     #0b1b45 = JTL Dark Blue   (title + body text)
     #2722f8 = JTL Tech Blue   (top/bottom separator lines + plus/cross icon)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container — transparent so the section background (Light Sand on product
   pages) shows through. */
.accordion.accordion-standard {
    background-color: transparent;
}

/* Item row — strip the legacy white-card look (white bg + 1px #ddd border on
   all sides + margin-bottom:-1px collapse trick) and replace with a single
   1px Tech Blue line above each item. Add a closing line below the last item. */
.accordion.accordion-standard .accordion-row {
    background-color: transparent;
    border: 0;
    border-top: 1px solid #2722f8;
    border-radius: 0;
    margin: 0;
}
.accordion.accordion-standard > .accordion-row:last-child {
    border-bottom: 1px solid #2722f8;
}

/* Header button — full-width, transparent, no underline (Bootstrap .btn-link
   default), padding 24px vertical only so the title sits flush with the line. */
.accordion.accordion-standard .accordion-header {
    color: #0b1b45;
    background-color: transparent;
    border-radius: 0;
    text-decoration: none;
    padding: 24px 0;
    position: relative;
    width: 100%;
}
.accordion.accordion-standard .accordion-header:hover,
.accordion.accordion-standard .accordion-header:focus,
.accordion.accordion-standard .accordion-header:active {
    color: #0b1b45;
    background-color: transparent;
    text-decoration: none;
    box-shadow: none;
}

/* Title text — Figma node 188:5192: Inter SemiBold 20/28, JTL Dark Blue,
   letter-spacing 0. Reserve 40px on the right so it never overlaps the
   absolutely-positioned +/× icon. */
.accordion.accordion-standard .accordion-header > span.col,
.accordion.accordion-standard .accordion-header > span.col-md,
.accordion.accordion-standard .accordion-header > span.col-md-6 {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
    padding-right: 40px;
}

/* Hide the legacy leading icon column. The pages were authored with
   icon_name="check" etc.; the redesigned accordion has no leading icon.
   post_content is preserved (CLAUDE.md rule 4) — hide via CSS only. */
.accordion.accordion-standard .accordion-header > span.col-auto {
    display: none;
}

/* Override the theme's [data-toggle="collapse"]::after FontAwesome chevron
   (\f078) with a JTL Tech Blue plus icon, swapped for a cross when expanded.
   SVG geometry pulled from Figma nodes 188:5193 (plus) and 188:5200 (cross):
   2.5px stroke, round caps, stroke #2722f8. Using inline SVG data URIs so
   no asset upload + no FA dependency for the redesign indicator. !important
   is needed to beat the theme's chevron rule, which uses font-family +
   content; documenting the why so it isn't flagged as a smell. */
.accordion.accordion-standard .accordion-header::after {
    content: "" !important;
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    transition: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cline x1='1.25' y1='9.75' x2='18.75' y2='9.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='10.25' y1='1.25' x2='10.25' y2='18.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    font-size: 0;
    line-height: 0;
}
.accordion.accordion-standard .accordion-header[aria-expanded="true"]::after {
    /* Cross — Figma 188:5200, 18×18, same 2.5px Tech Blue stroke. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cline x1='1.93' y1='2.09' x2='16.07' y2='16.23' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='15.91' y1='1.77' x2='1.77' y2='15.91' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 18px 18px;
    transform: translateY(-50%) !important;
}

/* Expanded body — Figma node 188:5203: Inter Regular 18/28, JTL Dark Blue.
   Padding-top 0 (the button's 24px bottom padding already provides the gap);
   padding-bottom 24px to keep the closing line offset matching the Figma.
   border:0 strips the theme's default 1px #ddd top border on .accordion-body —
   in Figma the title and body flow together with no divider between them
   (the only separator is the Tech-Blue line BEFORE the next item, which
   comes from .accordion-row border-top). */
.accordion.accordion-standard .accordion-row .accordion-body {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    padding: 0 40px 24px 0;
    border: 0;
}
.accordion.accordion-standard .accordion-row .accordion-body p {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 16px;
}
.accordion.accordion-standard .accordion-row .accordion-body p:last-child {
    margin-bottom: 0;
}

/* Mobile (≤767px) — Figma node 188:8173 keeps the same 20/28 SemiBold
   Dark Blue title. Slightly smaller icon to balance the narrower row. */
@media (max-width: 767.98px) {
    .accordion.accordion-standard .accordion-header {
        padding: 20px 0;
    }
    .accordion.accordion-standard .accordion-header > span.col,
    .accordion.accordion-standard .accordion-header > span.col-md,
    .accordion.accordion-standard .accordion-header > span.col-md-6 {
        padding-right: 32px;
    }
    .accordion.accordion-standard .accordion-header::after {
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
    }
    .accordion.accordion-standard .accordion-header[aria-expanded="true"]::after {
        background-size: 16px 16px;
    }
    .accordion.accordion-standard .accordion-row .accordion-body {
        padding-right: 32px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AccordionsVerticalImage (Komp widget — JP-27)
   Figma: VSSY3wxlC31HrYDwwmHmrv node 202:1453 (Accordion-Media-no Tab-
   Desktop 1440 — Produkt-DMS-Software) + 201:4204 (mobile). Values
   verified per leaf via mcp__figma__get_design_context.

   Scoping: targets the existing `.accordion-vertical` root class emitted
   by VerticalImage/Widget.php (line 32). The AccordionsStandard restyle
   above scopes to `.accordion.accordion-standard` and is unaffected.

   Design tokens (hardcoded — Phase 2.2 SCSS tokens file not yet shipped;
   follows the JP-83 / JP-26 precedent of inline hex with token comments):
     #0b1b45 = JTL Dark Blue   (title, body, expanded sub-heading)
     #2722f8 = JTL Tech Blue   (number prefix, separators, +/× indicator)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root — transparent so the section bg (Light Sand on product pages) shows
   through. Set up the numbering counter the title ::before consumes. */
.accordion-vertical {
    background-color: transparent;
    counter-reset: vert-item;
}

/* Image column rounded corners — Figma 202:1497 size-[528px] rounded-[24px].
   The legacy markup wraps each item's picture in a `.collapse` div under
   `.col.d-none.d-lg-flex`; clip the column so the active image inherits
   the corner radius. */
.accordion-vertical > .row > .col.d-none.d-lg-flex {
    border-radius: 24px;
    overflow: hidden;
}
.accordion-vertical > .row > .col.d-none.d-lg-flex img {
    border-radius: 24px;
}

/* Items — strip the legacy white-card chrome (bg, border, radius, mb-3
   margin) and replace with a single 1px Tech Blue separator above each
   item. The :first-child anchors a line at the top; :last-child anchors
   one at the bottom — matching Figma 202:1460 / 203:1726.

   `!important` on background: the legacy widget emits a per-instance
   `utils-XXX` class that injects `background-color:#fff9e7` (cream) at
   high specificity; this rule has to win unconditionally so the section
   bg (Light Sand) shows through. Per CLAUDE.md rule 10. */
.accordion-vertical .card.mb-3.no-icon {
    background-color: transparent !important;
    border: 0;
    border-radius: 0;
    border-top: 1px solid #2722f8;
    /* Figma 202:1459 uses gap-10 between items (10px); Bootstrap's mb-3
     * defaults to 16px which leaves the inter-item space visibly looser
     * than the design. Override to 10px to match the Figma spec. */
    margin: 0 0 10px !important;
    counter-increment: vert-item;
    position: relative;
}

/* Hide the legacy leading icon column. The pages were authored with
   icon_name="check" etc. (renders as a Bootstrap col-lg-auto with a
   FontAwesome icon on desktop); the redesigned accordion has no leading
   icon — the number prefix from the CSS counter sits in its place.
   post_content is preserved (CLAUDE.md rule 4); we hide via CSS only,
   matching JP-26's precedent. */
.accordion-vertical .card-body > .col-lg-auto.d-none.d-lg-block {
    display: none !important;
}
.accordion-vertical > .row > .col:not(.d-lg-flex) > .card.mb-3.no-icon:last-child {
    border-bottom: 1px solid #2722f8;
}

/* Card body — Figma 202:1461 py-[24px], no horizontal padding (the title
   column carries it via gap). Override Bootstrap's `.card-body.p-4` (16px). */
.accordion-vertical .card-body {
    padding: 24px 0 !important;
}

/* The expand indicator. The legacy AccordionsVerticalImage has no expand
   chevron in markup (cards are just `data-toggle="collapse"` divs); add
   the Tech Blue +/× via a ::after pseudo on the card itself. Same SVG
   geometry as the JP-26 AccordionsStandard indicator (stroke 2.5,
   #2722F8, round caps) so the two accordion variants behave consistently.
   `right: 0` puts it at the card's right edge; `top: 24px` aligns with
   the card-body's 24px top padding. */
.accordion-vertical .card.mb-3.no-icon::after {
    content: "";
    position: absolute;
    right: 0;
    top: 24px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cline x1='1.25' y1='9.75' x2='18.75' y2='9.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='10.25' y1='1.25' x2='10.25' y2='18.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    transition: transform 200ms ease-in-out;
}

/* Figma 202:1472 uses the SAME plus SVG as collapsed, just rotated 45°
 * to read as an X — not a separate X icon. Match that exactly by keeping
 * the plus SVG and applying transform on the expanded state. */
.accordion-vertical .card.mb-3.no-icon[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

/* Title row — Figma 202:1461. The legacy markup is
   `<span class="accordion-vertical-headline text-primary">…</span>`,
   so we make the span a flex row that hosts a CSS-counter number on the
   left and the title text on the right. `padding-right` reserves space
   for the absolutely-positioned +/× icon. `!important` on color beats
   the Bootstrap text-{tabname_color} utility (CLAUDE.md rule 10). */
.accordion-vertical .accordion-vertical-headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 40px;
    color: #0b1b45 !important;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}
.accordion-vertical .accordion-vertical-headline::before {
    content: counter(vert-item, decimal-leading-zero);
    flex: 0 0 32px;
    color: #2722f8;
}

/* Expanded body — Figma 202:1475. Inter Regular 16/24, Dark Blue. Indent
   left to sit below the title text (number=32 + gap=10 = 42px), and add
   24px top padding to form the gap between the title row and the body. */
.accordion-vertical .accordion-vertical-content {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding: 24px 40px 0 42px;
}
.accordion-vertical .accordion-vertical-content p {
    margin: 0 0 12px;
}
.accordion-vertical .accordion-vertical-content p:last-child {
    margin-bottom: 0;
}
.accordion-vertical .accordion-vertical-content b,
.accordion-vertical .accordion-vertical-content strong {
    font-weight: 700;
}
/* Inline mobile image (rendered by Item/Widget.php with `d-lg-none mt-3`)
   should pick up the same 24px radius as the desktop image column. */
.accordion-vertical .accordion-vertical-content img {
    border-radius: 24px;
}

/* Links inside the expanded body — Figma 202:1475 doesn't include a link
 * in this frame, but the live page wraps a `.mt-4` anchor with a YouTube
 * icon (`<span class="fab fa-youtube">…</span>Neue Preisinformationen…`).
 * Default theme styles render it slate-gray; bring it onto the JTL palette
 * (Dark Blue + underline) so the link block (icon + text) is coherent with
 * the body color. */
.accordion-vertical .accordion-vertical-content a {
    color: #0b1b45 !important;
    text-decoration: underline;
}
.accordion-vertical .accordion-vertical-content a:hover,
.accordion-vertical .accordion-vertical-content a:focus {
    color: #2722f8 !important;
}

/* Mobile (≤767px) — Figma 201:4204. Single column (the image col is
   d-lg-flex, already hidden), narrower text padding, slightly smaller
   icon to balance the row. */
@media (max-width: 767.98px) {
    .accordion-vertical .accordion-vertical-headline {
        padding-right: 32px;
        gap: 8px;
    }
    .accordion-vertical .accordion-vertical-headline::before {
        flex-basis: 28px;
    }
    .accordion-vertical .card.mb-3.no-icon::after {
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
    }
    .accordion-vertical .card.mb-3.no-icon[aria-expanded="true"]::after {
        width: 16px;
        height: 16px;
        background-size: 16px 16px;
    }
    .accordion-vertical .accordion-vertical-content {
        padding: 16px 32px 0 36px;
    }
}

/* =====================================================   JP-343 — Icon Grid module ("Icon-Grid mit Box")
   Figma: VSSY3wxlC31HrYDwwmHmrv  node 374:7297

   REWORK of merged PR #34. The original PR scoped every rule to
   a `.jtl-icon-grid` marker class that does not exist on any live
   page — only on a hand-rolled `/de/jp343-icon-grid-preview/`
   demo. Production got nothing (CLAUDE.md rule 13).

   This block restyles the **live CardsIcon widget** itself, so
   every page using [CardsIcon] picks up the JTL design. Scope is
   `.card:has(> .card-top-icon)` — `.card-top-icon` is added by
   the widget's PHP (Cards/Icon/Widget.php → setIcon() →
   `$this->icon->stackedWrapperAttr->add('class', 'card-top-icon')`)
   and is unique to the CardsIcon widget within the Cards family,
   so the `:has()` parent selector targets ONLY the CardsIcon card
   without touching accordion cards, blog cards, newsletter cards,
   etc. (See custom-clone.css line ~2168 `.card:has(.nl-anmeldung)`
   for the project's existing precedent of the same pattern.)

   The composite outer box (white surface, centred headline,
   orange CTA) is page-level composition per rule 12 — that ships
   as a separate Phase 3 page ticket when the live pages that need
   it are identified, and gets its own composite marker class set
   via the WPBakery row's `advanced` attribute.

   JTL tokens: white #ffffff · tech-blue #2722f8 · dark-blue #0b1b45
               light-sand #eeeee7
   ============================================================ */

/* 1 — Icon tile: 64×64 tech-blue rounded square, white glyph.
   The widget emits a FontAwesome stacked icon (`fa-stack` >
   `fa-circle` + glyph). Hide the FA circle layer and let the
   wrapper itself be the rounded-square tile. */
.card-top-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2722f8;            /* JTL Tech Blue */
    border-radius: 16px;
    /* Theme app.css ships `.card-top-icon { transform: translateY(-50%) }`
       so the icon hangs half outside the card top. Figma puts the icon
       fully inside the card with the card's normal padding. */
    transform: none;
}
.card-top-icon .fa-circle {
    display: none;                  /* CSS square replaces the circle bg */
}
.card-top-icon .fa-stack-1x {
    position: static;               /* opt out of FA absolute stacking */
    width: auto;
    color: #ffffff;                 /* JTL White glyph */
    font-size: 28px;
    line-height: 1;
}
/* The widget also adds per-product color classes on the wrapper
   (text-wawi, text-shop, text-pos, text-shipping, text-eazyauction,
   etc.) which the theme uses to tint the icon. We force the tile
   background to Tech Blue uniformly per Figma 67:1542, but keep
   the glyph white so the icon stays readable. */

/* 2 — Card surface (CardsIcon widget only): light-sand, 24px radius,
   single-column flex with centred content. `.card:has(> .card-top-icon)`
   matches the CardsIcon-rendered `<div class="card">` and nothing else
   in the Cards family. */
.card:has(> .card-top-icon) {
    background: #eeeee7;            /* JTL Light Sand */
    border: 0;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

/* 3 — Card body inside CardsIcon: drop Bootstrap's 1rem padding
   (the card itself supplies 24px) and let the 32px parent gap
   handle spacing between icon tile and text block. */
.card:has(> .card-top-icon) > .card-body {
    padding: 0;
    gap: 16px;
}

/* 4 — Card body color: every text node inside the CardsIcon card
   reads Dark Blue, per Figma 67:1547/67:1548. We intentionally do
   NOT override `font-size`/`font-family` — live cards carry
   richer content than the Figma demo (lists, links, bold inline
   spans) and the theme's existing Inter sizing for `.h6`/`<p>`
   already matches Figma's 16/24 body. */
.card:has(> .card-top-icon) > .card-body,
.card:has(> .card-top-icon) > .card-body * {
    color: #0b1b45;                 /* JTL Dark Blue */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Start-Header — homepage hero (module — JP-337, Phase 1: CSS-only)
   Figma: VSSY3wxlC31HrYDwwmHmrv node 338:2794 ("Home-Header-desktop 1440",
   the after-frame inside the JP-337 before/after deck 247:1594).

   The homepage hero is NOT a widget — it's a [vc_row] with the custom class
   `hero-product-section orange` (post_content of the front page, id 264968).

   SCOPE — Phase 1 is CSS-only (per the ticket's agreed scope): apply the
   navy theme + button restyle to the EXISTING markup. The full Figma match
   (angled navy panel, full-bleed photo, new headline/subline copy, new
   image, removed testimonial chip) needs post_content edits + a layout
   rebuild — that is Phase 2 / Phase 3 page work (CLAUDE.md rule 4: no
   post_content edits outside versioned scripts/db/*.php).

   Scoped to `body.home` so other pages that reuse `.hero-product-section`
   are untouched.

   Design tokens (hardcoded — Phase 2.2 SCSS tokens not yet shipped):
     #0b1b45 = JTL Dark Blue   (section background)
     #eeeee7 = JTL Light Sand  (eyebrow + secondary button border/text)
     #fb581f = JTL Orange      (primary button — already applied)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Navy section background (Figma --jtl-dark-blue). padding-bottom only —
   padding-top is left alone because the hero image in the right column is
   positioned to extend up into the sticky header (see plugin style.scss
   line ~250: "overflow: visible — allow image to extend above"). */
body.home .hero-product-section {
    background-color: #0b1b45;
    padding-bottom: 56px;
}

/* Headline → white (Figma: white on navy). Covers both inner spans
   (.font-weight-bold and .text-lighten), which carry their own colour. */
body.home .hero-product-section .hero-product-section__content--title,
body.home .hero-product-section .hero-product-section__content--title .font-weight-bold,
body.home .hero-product-section .hero-product-section__content--title .text-lighten {
    color: #ffffff;
}

/* Eyebrow ("JTL-Software") → hidden. The Figma after-design (338:2794)
   has no eyebrow above the headline. */
body.home .hero-product-section .hero-product-section__content--subtitle {
    display: none !important;
}

/* Subline → white (Figma: white on navy). */
body.home .hero-product-section .hero-product-section__content--text,
body.home .hero-product-section .hero-product-section__content--text p {
    color: #ffffff;
}

/* Secondary button ("Success Stories") → Figma "Secondary-neg": transparent
   fill, 2px Light Sand border, Light Sand text, pill radius. Selector
   targets the button WITHOUT `.has-wawi-gradient` (that one is the orange
   primary, which already matches Figma "Primary-neg" and is left as-is). */
body.home .hero-product-section .product-buttons-group a.product-button-group__button--with-icon:not(.has-wawi-gradient) {
    background-color: transparent;
    border: 2px solid #eeeee7;
    color: #eeeee7;
    border-radius: 145px;
}

/* Hide the trust block — caption "Unternehmen, die uns vertrauen" + the
   19-logo strip. The Figma after-design drops it. post_content is
   untouched; the markup is hidden via CSS only. */
body.home .hero-product-section .hero-product-section__content--small-text,
body.home .hero-product-section .templatera_shortcode {
    display: none;
}

/* Hero photo (all widths) — the legacy image (referenz-sportfits-hero.png)
   has an "AUTOMATISIERT" stats card + an orange sticker baked into it. The
   redesign uses the clean SportFits workshop photo (Figma 86:1508), shipped
   in the theme. Swap it in via background-image and hide the legacy
   <picture>/<img> + the floating testimonial chip. */
body.home .hero-product-section__image {
    background-image: url("images/jp337/hero-photo.jpg");
    background-size: cover;
    background-position: 38% center;
    background-repeat: no-repeat;
    min-height: 320px;
}
body.home .hero-product-section__image picture,
body.home .hero-product-section__image > img,
body.home .hero-product-section__image .quote-widget {
    display: none !important;
}

/* Homepage hero starts flush at the page top — Figma 338:2794 has the hero
   (navy + photo) running edge-to-edge behind a floating nav, with NO
   breadcrumb. The theme renders a "Startseite" breadcrumb bar between the
   header and <main>; on the homepage that is both redundant (you are home)
   and the visible gap above the hero. Hidden on body.home only — other
   pages keep their breadcrumb. */
body.home #nav-breadcrumb {
    display: none !important;
}

/* ── JP-337 hero rebuild — full-bleed photo + elliptical navy overlay ───────
   Restyle of the homepage "Start-Header" module to match Figma 338:2794.

   The legacy hero is a 2-column row (text | absolute-positioned image).
   Figma is a layered composition: a full-bleed photo with three rounded
   overlay shapes on top. Rebuilt (desktop only, ≥992px) as stacked layers
   inside the section, which is the positioning + clipping context:

     z1  photo            — full-bleed background layer (cover)
     z2  navy ellipse     — large circle, mostly off-screen top-left; only
                            its right arc shows, sweeping across centre-left
     z3  purple blob      — Tech-Blue ellipse peeking from the top-right
     z3  light-blue blob  — accent tucked into the bottom-right corner
     z4  text content     — headline / subline / CTAs, on top of the navy

   The navy is a real ellipse (border-radius:50%) clipped by the section's
   `overflow:hidden` — no polygon / irregular mask. Scoped to body.home.
   Mobile/tablet (<992px) keep the stacked layout from the base rules. */
@media (min-width: 992px) {
    /* Stage — positioning + clipping context. Pulled up by the full header
       height (132px) so the hero starts flush at the page top (y=0) and the
       header floats over it — Figma 338:2794 has 0 padding above the hero.
       The breadcrumb bar is hidden (see body.home #nav-breadcrumb above), so
       <main> sits directly under the header and -132px lands the hero at 0. */
    /* The 132px header is in normal flow, so <main> starts at y=132. To make
       the hero sit flush at the page top with the header floating over it,
       <main> itself is pulled up by the header height. The hero then needs
       NO negative margin — it is main's first child and starts at main's
       top (y=0), fully INSIDE main's box.

       Why not put the negative margin on the hero? <main> has
       `overflow:hidden`; a negative margin on the hero pushes its top 132px
       ABOVE main's box, where that overflow clips it — leaving the body's
       light-sand (#eeeee7) showing through as a white strip behind the nav.
       Pulling <main> keeps the whole hero inside the clip region. */
    body.home main {
        margin-top: -132px;
    }
    body.home .hero-product-section {
        position: relative;
        /* Figma 338:2794 "Home-Header-desktop 1440" is 1440×900 (ratio 1.6:1)
           — full-height hero. */
        min-height: 900px;
        /* No pull-up here — <main> is pulled up instead (see above).
           !important beats the row's Bootstrap `.mt-0` utility. */
        margin-top: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
    /* Full-bleed — drop the WPBakery container / row width constraints. */
    body.home .hero-product-section > .container,
    body.home .hero-product-section > .container > .row {
        max-width: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 900px;
    }

    /* Layer 1 — photo, full-bleed behind every overlay. background-position
       pushes the subject (Martin Bauer) into the right half, clear of the
       navy ellipse. */
    body.home .hero-product-section__image {
        position: absolute !important;
        inset: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background-position: 60% center;
        z-index: 1;
    }

    /* Layer 2 — navy panel. The Figma "home-left" Vector (node I338:2794;86:5579)
       is a custom SVG path, not a true ellipse — an ellipse can only
       approximate it. Using the exported SVG (theme/jtl/images/jp337/
       navy-shape.svg, viewBox 650.5×900, navy fill baked in) as a background
       image gives the exact Figma curve at every viewport. The SVG itself
       uses preserveAspectRatio="none" so it stretches cleanly when the box
       width changes; height is fixed at the hero's 900px. */
    body.home .hero-product-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        /* Figma home-left width: 651/1440 = 45.2% of the hero. */
        width: 45.2%;
        height: 100%;
        background: url("images/jp337/navy-shape.svg") top left / 100% 100% no-repeat;
        z-index: 2;
        pointer-events: none;
    }
    /* Layer 3a — purple/Tech-Blue blob: a partial ellipse peeking from the
       top-right (Figma "Forms" top vector), mostly clipped off the top edge
       behind the floating nav. Sits to the right of the navy ellipse. */
    body.home .hero-product-section::after {
        content: "";
        position: absolute;
        top: -230px;
        right: -40px;
        width: 700px;
        height: 440px;
        background: #2722f8;
        border-radius: 50%;
        z-index: 3;
        pointer-events: none;
    }
    /* Layer 5 — masked man (Figma "sportfits-standbild 2", node 86:2508).
       Figma stacks a SECOND copy of the photo on top of the decorative
       blobs, with the background painted out — only Martin Bauer remains.
       This puts him IN FRONT of the purple blob so it can't clip his face.

       We render the same image (an RGBA PNG of the man on transparency) as
       a full-bleed background layer with the same background-size/position
       as the base photo (z1), so the silhouette aligns pixel-for-pixel.
       Anchored to .container::before (a free pseudo) so no markup change.
       z5 → above the blobs (z3); on the right side, so it never overlaps
       the navy/text on the left. */
    body.home .hero-product-section > .container::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("images/jp337/hero-photo-masked.png") no-repeat 60% center / cover;
        z-index: 5;
        pointer-events: none;
    }

    /* Layer 3b — light-blue accent in the bottom-right corner. Attached to
       the .container (its ::after is free) so it can reach the section's
       bottom-right; the section's `overflow:hidden` trims the rounded box. */
    body.home .hero-product-section > .container::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 330px;
        height: 275px;
        background: #74c0ea;
        border-radius: 100% 0 0 0;
        z-index: 3;
        pointer-events: none;
    }

    /* Layer 4 — text content, on top of the navy ellipse. Transparent (the
       navy now comes from the ellipse, not this column); vertically centred
       with left spacing so the copy sits inside the navy area. */
    body.home .hero-product-section__content {
        position: relative;
        z-index: 4;
        flex: 1 1 100% !important;
        max-width: none !important;
        width: 100% !important;
        min-height: 900px;
        margin: 0 !important;
        background: transparent !important;
        clip-path: none !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* left:69px matches the Figma "Intro" block left edge; padding-top
           keeps the copy clear of the floating nav. */
        padding: 132px 64px 120px 69px !important;
    }
    /* Constrain the copy to the Figma "Headline-Intro" width (476px). */
    body.home .hero-product-section__content > * {
        max-width: 476px;
    }
    /* Hero headline — Figma "H1 - Pages": Kurdis Wide Bold 68/80, white.
       Kurdis is not loaded in this env so Inter is the fallback (listed
       first so it auto-upgrades when the webfont ships). */
    body.home .hero-product-section .hero-product-section__content--title {
        font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif;
        font-size: 68px;
        font-weight: 700;
        line-height: 80px;
        letter-spacing: 0;
        margin-bottom: 0;
        max-width: 476px;
    }
    /* Subline — Figma: Inter Regular 20/28, 16px gap below the headline. */
    body.home .hero-product-section .hero-product-section__content--text {
        margin-top: 16px !important;
        margin-bottom: 32px !important;
    }
    body.home .hero-product-section .hero-product-section__content--text,
    body.home .hero-product-section .hero-product-section__content--text p {
        font-family: Inter, sans-serif;
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 0;
    }

    /* Author caption — "Martin Bauer / CEO von SportFits". Figma places it
       at left:69px, top:798px in the 900px hero (Inter Regular 12/20,
       white). Pseudo-element on the content column — no markup change. */
    body.home .hero-product-section__content::after {
        content: "Martin Bauer,\A CEO von SportFits";
        white-space: pre;
        position: absolute;
        left: 69px;
        bottom: 82px;
        margin: 0;
        font-family: Inter, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AccordionsFAQ (Komp widget — JP-350 "Restyle module: Accordion")
   Figma: VSSY3wxlC31HrYDwwmHmrv node 248:5231 (the corrected before/after
   slide) → after-frame 248:5414 "AccordionDesktop 1440", accordion 248:5420.
   Values verified per leaf via mcp__figma__get_design_context / get_metadata.

   Before: legacy FAQ accordion — plain rows + orange FontAwesome +/− toggle.
   After:  numbered rows (01, 02, …) on a light panel — Tech Blue number
           prefix, 1px Tech Blue separator above each row, Tech Blue +/×
           indicator, Inter SemiBold 20/28 titles.

   Scoping: targets `.accordion.accordion-faq`, the marker class added in
   FAQ/Widget.php — mirrors JP-26 (.accordion-standard) and JP-27
   (.accordion-vertical). The Standard and VerticalImage variants are
   untouched. The numbers come from a CSS counter, NOT from post_content —
   the `tabname` values stay as authored (CLAUDE.md rule 4).

   Section background ("light panel" in the deck) is page composition —
   Phase 3, not this widget restyle (CLAUDE.md rule 12); the widget stays
   transparent so the page band shows through.

   Design tokens (hardcoded — Phase 2.2 SCSS tokens file not yet shipped;
   follows the JP-26 / JP-27 precedent of inline hex with token comments):
     #0b1b45 = JTL Dark Blue   (title + body text)
     #2722f8 = JTL Tech Blue   (number prefix, separators, +/× indicator)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Root — transparent so the section band shows through. Set up the counter
   the title ::before consumes; reset per widget so every accordion on the
   page numbers from 01. */
.accordion.accordion-faq {
    background-color: transparent;
    counter-reset: faq-item;
}

/* Item row — strip the legacy white-card chrome and replace with a single
   1px Tech Blue separator above each row (Figma lines 248:5421/5428/…).
   Figma 248:5420 has NO closing line under the last row, so — unlike JP-26
   / JP-27 — no :last-child border-bottom is added. */
.accordion.accordion-faq .accordion-row {
    background-color: transparent;
    border: 0;
    border-top: 1px solid #2722f8;
    border-radius: 0;
    margin: 0;
    counter-increment: faq-item;
}

/* Header button — full-width, transparent, no .btn-link underline, 24px
   vertical padding only (Figma 248:5422 py-[24px]) so the title sits flush
   with the separator line. `position: relative` anchors the +/× icon. */
.accordion.accordion-faq .accordion-header {
    color: #0b1b45;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    padding: 24px 0;
    position: relative;
    width: 100%;
}
.accordion.accordion-faq .accordion-header:hover,
.accordion.accordion-faq .accordion-header:focus,
.accordion.accordion-faq .accordion-header:active {
    color: #0b1b45;
    background-color: transparent;
    text-decoration: none;
    box-shadow: none;
}

/* Title — Figma 248:5424: Inter SemiBold 20/28, JTL Dark Blue, ls 0. The
   span.col[itemprop="name"] becomes a flex row hosting the CSS-counter
   number on the left and the title text on the right. `padding-right`
   reserves space for the absolutely-positioned +/× icon. */
.accordion.accordion-faq .accordion-header span.col[itemprop="name"] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-right: 40px;
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0;
}

/* Number prefix — Figma 248:5424: the leading "01 " span is JTL Tech Blue,
   same Inter SemiBold 20/28 as the title. decimal-leading-zero gives the
   01, 02, … 09, 10 form. 32px fixed box keeps every title text left-edge
   aligned regardless of one- vs two-digit numbers. */
.accordion.accordion-faq .accordion-header span.col[itemprop="name"]::before {
    content: counter(faq-item, decimal-leading-zero);
    flex: 0 0 32px;
    color: #2722f8;
}

/* Override the theme's orange FontAwesome chevron with a JTL Tech Blue plus,
   rotated 45° to read as an × when expanded (same single-icon approach as
   JP-27). SVG geometry: 2.5px stroke, round caps, stroke #2722F8 — matching
   the JP-26 / JP-27 indicator so all three accordion variants behave
   consistently. `!important` beats the theme's chevron rule (font-family +
   content) — documented per CLAUDE.md rule 10. */
.accordion.accordion-faq .accordion-header::after {
    content: "" !important;
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cline x1='1.25' y1='9.75' x2='18.75' y2='9.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='10.25' y1='1.25' x2='10.25' y2='18.75' stroke='%232722F8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    transition: transform 200ms ease-in-out !important;
    font-size: 0;
    line-height: 0;
}
.accordion.accordion-faq .accordion-header[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(45deg) !important;
}

/* Expanded body — Figma 248:5435: Inter Regular 16/24, JTL Dark Blue. The
   button's 24px bottom padding already forms the 24px gap to the body, so
   padding-top is 0. Left indent (32 number + 10 gap = 42px) sits the body
   under the title text. border:0 strips the theme's default 1px #ddd top
   divider — the only separator is the Tech Blue line before the next row. */
.accordion.accordion-faq .accordion-row .accordion-body {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    padding: 0 40px 24px 42px;
    border: 0;
}
.accordion.accordion-faq .accordion-row .accordion-body p {
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 12px;
}
.accordion.accordion-faq .accordion-row .accordion-body p:last-child {
    margin-bottom: 0;
}
/* The Figma expanded row leads with a bold sub-heading ("GoBD-konforme
   Archivierung") — that is post_content (a <strong>/<b>), kept as authored;
   just guarantee it renders bold over any theme reset. */
.accordion.accordion-faq .accordion-row .accordion-body b,
.accordion.accordion-faq .accordion-row .accordion-body strong {
    font-weight: 700;
}

/* Mobile (≤767px) — same 20/28 SemiBold Dark Blue title; tighter number box
   and slightly smaller icon to balance the narrower row. */
@media (max-width: 767.98px) {
    .accordion.accordion-faq .accordion-header {
        padding: 20px 0;
    }
    .accordion.accordion-faq .accordion-header span.col[itemprop="name"] {
        padding-right: 32px;
        gap: 8px;
    }
    .accordion.accordion-faq .accordion-header span.col[itemprop="name"]::before {
        flex-basis: 28px;
    }
    .accordion.accordion-faq .accordion-header::after {
        width: 18px;
        height: 18px;
        background-size: 18px 18px;
    }
    .accordion.accordion-faq .accordion-row .accordion-body {
        padding: 0 32px 20px 36px;
    }
}

/* =====================================================   JP-344 Video-big — YouTubeStandard restyle
   Figma 382:16181 "Video-big" (Update side).
   ------------------------------------------------------------
   WIDGET scope: .youtube-standard is the JP-344 hook added in
   YouTube/Standard/Widget.php. These rules travel with the
   widget wherever it is used (297 live pages).
   ============================================================ */
.embed-responsive.youtube-standard {
    border-radius: 24px;
    overflow: hidden;
    /* Navy poster fallback (Figma placeholder colour); the YouTube
       thumbnail still covers it whenever a poster is present.
       !important is required to beat the widget's Bootstrap
       `.bg-secondary` utility, which ships with !important (see
       CLAUDE.md rule 10). */
    background-color: #0b1b45 !important;
}

/* Play button — Figma: solid JTL-Orange circle, the play triangle
   is the fa-play-circle negative space showing the box behind. */
.youtube-standard .embed-play {
    color: #fb581f;
}

/* ------------------------------------------------------------
   JP-344 preview page only (/de/jp-344-video-big-preview/,
   post 322549) — recreates the Figma "Video-big" composition
   (light-sand section, centred 864px video, centred text).
   Scoped to the page id so it cannot leak to real pages.
   ------------------------------------------------------------ */
body.page-id-322549 main > section:has(.youtube-standard) {
    background-color: #eeeee7;
    padding: 80px 64px;
}
body.page-id-322549 main > section:has(.youtube-standard) > .container {
    max-width: 864px;
}
body.page-id-322549 main > section:has(.youtube-standard) .h3,
body.page-id-322549 main > section:has(.youtube-standard) .h6 {
    text-align: center;
}
body.page-id-322549 main > section:has(.youtube-standard) .youtube-standard {
    margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-352 — Site footer module
   Figma node 338:3565 (https://www.figma.com/design/VSSY3wxlC31HrYDwwmHmrv/JTL-Website-Modules?node-id=338-3565)
   Refines the already-shipped .footer--redesign markup to match Figma "After":
     1. Inner wrapper has no border-radius (only the outer .footer--main is
        top-rounded at 46px). The 20px shipped in app.css is residual.
     2. Asymmetric vertical padding 64/40 (Figma 44.44/27.78 * 1.44).
     3. Vertical hairline divider between the awards (left) and the
        reviews/OMR (right) inside .footer--awards-row, matching Figma's
        imgLine44 separator. Only at >=lg where the row is side-by-side.
   ─────────────────────────────────────────────────────────────────────────── */
#footer.footer--redesign .footer--main-wrapper {
    border-radius: 0;
    padding-top: 64px;
    padding-bottom: 40px;
}

/* Section title "Auszeichnungen" — not present in the Figma redesign,
   on any viewport. */
#footer.footer--redesign .footer--awards-title {
    display: none;
}

/* Mobile only: at <lg the newsletter CTA and the copyright/logo wrapper
   stack vertically (newsletter first via order-1, copyright second via
   order-2). Neither side has any in-between margin, so the "ZUR
   NEWSLETTER-ANMELDUNG" button ends up touching the "JTL" logo with no
   breathing room. Add a gap. */
@media (max-width: 991.98px) {
    #footer.footer--redesign .footer--newsletter-cta {
        margin-bottom: 32px;
    }
}

@media (min-width: 992px) {
    /* Tighten the gap between the column divider and the awards row;
       Figma shows the badges sitting close to the divider line. */
    #footer.footer--redesign .footer--main-divider {
        margin-top: 40px;
        margin-bottom: 24px;
    }
    /* Flatten the nested two-column structure into a single flex row of all 5
       items (3 badges + ProvenExpert + OMR) so they distribute uniformly
       across the full width — Figma shows equal rhythm, not two grouped halves.
       display: contents removes the wrappers from layout while keeping their
       children as direct flex siblings of .footer--awards-row. */
    #footer.footer--redesign .footer--awards-row {
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        position: relative;
        padding-top: 8px;
        margin: 0;
    }
    #footer.footer--redesign .footer--awards-row > .col-lg-6,
    #footer.footer--redesign .footer--awards,
    #footer.footer--redesign .footer--awards-badges,
    #footer.footer--redesign .footer--reviews {
        display: contents;
    }
    /* Vertical hairline divider between the 3-badge group and the
       ProvenExpert/OMR review group, matching Figma's imgLine44.
       Positioned at 55% — the visual gap midpoint between badge 3
       (centered at ~49%) and Proven Expert (~70%). Pure 50% would cut
       through badge 3 because items have unequal widths. */
    #footer.footer--redesign .footer--awards-row::before {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 55%;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.18);
        pointer-events: none;
}
}
/* =====================================================   JP-363 — Text mit Infobox module
   Figma: 347:4403 "Text+box-Desktop 1440"
   https://www.figma.com/design/VSSY3wxlC31HrYDwwmHmrv/JTL-Website-Modules?node-id=347-4403

   Scoped to the .jtl-text-infobox marker class (applied to the
   module's WPBakery row via the encoded `advanced` attribute).
   StepsStandard / IconsSteps standalone process lists on other
   pages are NOT affected. Values read from get_design_context.
   ============================================================ */

.jtl-text-infobox {
    background: #eeeee7;            /* JTL Light-Sand */
    padding: 80px 64px;
}

.jtl-text-infobox > .container {
    max-width: none;
    padding: 0;
}

/* 2-column row: text | infobox */
.jtl-text-infobox .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 64px;                      /* Figma 144px on its 1440 frame;
                                       site renders ~1320px → 64px */
    margin: 0;
}

.jtl-text-infobox .row > .col {
    padding: 0;
    min-width: 0;
}

.jtl-text-infobox .row > .col:first-child {
    flex: 0 1 640px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jtl-text-infobox .row > .col:last-child {
    flex: 1 1 0;
}

/* hide the page-editor anchor-link icons (not in Figma) */
.jtl-text-infobox .headline-link {
    display: none;
}

/* --- text column --------------------------------------------- */
.jtl-text-infobox .h6 {                       /* eyebrow */
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2722f8;                           /* JTL Tech-Blue */
}

.jtl-text-infobox h2.h2 {                     /* headline */
    margin: 0;
    /* Figma specifies Kurdis Wide Bold; the live theme ships Inter
       only, so the headline inherits Inter (consistent with JP-343). */
    font-size: 32px;
    font-weight: 700;
    line-height: 46px;
    letter-spacing: 0.64px;
    color: #0b1b45;                           /* JTL Dark-Blue */
}

.jtl-text-infobox .row > .col:first-child > p {   /* body */
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #0b1b45;
}

.jtl-text-infobox .btn-wrapper {
    margin: 0;
    padding-top: 8px;
}

.jtl-text-infobox .btn-wrapper .btn-primary {
}
/* ------------------------------------------------------------
   Linkboxen mit Bild — homepage module (JP-341, Figma 248:7625)
   --------------------------------------------------------------
   Figma redesigns the existing "Gemeinsam Großes gestalten" row
   from a left-aligned text-card layout to a centred light-sand
   panel with three image-topped link cards + an orange-pill
   "Beratung vereinbaren" CTA below.

   Markup: rendered by `[wawi_panels_widget]` on post 264968.
   The row is scoped via the `linkboxen-mit-bild` class that
   `scripts/db/jp341-linkboxen-mit-bild.php` writes into the
   row's encoded `advanced_advanced_xs_class` (so this CSS does
   NOT affect the second `.product-support-section` on the
   homepage, which renders a separate "DAS IST JTL" tile-row).

   Per-card placeholder photos are pinned by the per-item
   `linkboxen-card--{founder,kmu,enterprise}` classes (also
   written by the Phase 3 script). The `wawi_panels_item` widget
   has no image field, so the photos live as CSS background
   images on a `::before` injected at the top of each card.
   ------------------------------------------------------------ */
.product-support-section.linkboxen-mit-bild {
    /* The base `.product-support-section` is transparent — only the
       body's light-sand shows through. Set the panel bg explicitly
       so the rounded radius reads on whatever background follows. */
    background: #eeeee7;                    /* JTL Light Sand   */
    border-radius: 24px;
    /* Container ships 64/60 padding already; pad the row instead
       so the panel inset matches Figma (80 vertical, 64 horizontal
       — Figma frame 1440 × 596, padding 64/80 at the 1.44× scale). */
}
.product-support-section.linkboxen-mit-bild > .container {
    padding: 80px 64px;
}
/* Stack the headline col, the cards col, and the CTA in a single
   centred column. Both columns are full-width on this row; the
   widths were originally `col-lg-6` (headline) + `col-lg-12`
   (cards). Force `col-lg-6` to span 100% so the headline + subline
   centre across the panel.                                       */
.product-support-section.linkboxen-mit-bild > .container > .row {
    justify-content: center;
}
.product-support-section.linkboxen-mit-bild .col-lg-6,
.product-support-section.linkboxen-mit-bild .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center;
}

/* Overline — Figma drops it entirely on the AFTER. */
.product-support-section.linkboxen-mit-bild .product-support-section__subtitle {
    display: none;
}

/* Headline — Kurdis Wide Bold 32/46, dark blue, centred (Figma
   leaves Kurdis as the family; Inter is the fallback until JTL's
   webfont ships in this environment).                              */
.product-support-section.linkboxen-mit-bild .product-management-section__title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 46px;
    letter-spacing: 0.64px;                 /* 2% of 32px           */
    color: #0b1b45;                         /* JTL Dark Blue        */
    margin: 0 auto 24px;
    max-width: 864px;
    text-align: center;
}

/* Subline — Inter 18/28, dark blue, centred.  Figma's Text-Area
   frame is 600px wide at the 1000-scale; multiplied by 1.44 →
   864px max-width at desktop 1440, which produces the natural
   2-line wrap shown in Figma (line 1 ends after "Wählt", line 2
   carries "euren Plan…unternehmerisch."). At 720px the text
   wrapped to 3 lines. */
.product-support-section.linkboxen-mit-bild .col-lg-6 .mb-3,
.product-support-section.linkboxen-mit-bild .col-lg-6 .mb-sm-4,
.product-support-section.linkboxen-mit-bild .col-lg-6 .mb-md-8 {
    margin-bottom: 46px !important;
}
.product-support-section.linkboxen-mit-bild .col-lg-6 p,
.product-support-section.linkboxen-mit-bild .col-lg-6 .product-management-section__description,
.product-support-section.linkboxen-mit-bild .col-lg-6 .description {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;                /* live was rgb(51,51,51) gray */
    margin: 0 auto !important;
    max-width: 864px !important;
    text-align: center !important;
}

/* Cards grid — three equal columns, 32px gap. Widget computes
   `display: flex` with 24px gap, so we have to force grid + gap
   with !important. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 1312px !important;
    margin: 0 auto !important;
}

/* Each card — white tile, 24px radius, soft premium drop shadow.
   Image area lives in `::before`; text-button row lives in the `<a>`. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item {
    position: relative;                     /* anchor for the curve overlay */
    background: #ffffff;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 4px 18px rgba(11, 27, 69, 0.06);
    padding: 0;
    overflow: hidden;
    margin: 0;
    text-align: left;
}

/* Image area — 3:2 aspect at top, full card width. The per-card
   class pins the placeholder photo.

   The bottom edge of the image is masked using the EXACT curve
   from Figma's Bild-Box 3:2 placeholder. Earlier iterations tried
   Q-bezier (too flat), then a full semicircle SVG arc (too deep),
   then a flatter elliptical arc — all wrong: the Figma asset
   itself ships with alpha transparency baked in, and the curve is
   neither a parabola nor an ellipse. Sampled directly from the
   Figma alpha channel, corners drop to alpha=0 at y≈67.7% of
   image height, smoothly curving to y≈99.8% at centre.

   `theme/jtl/images/jp341/image-mask.png` is the alpha channel
   extracted from the Figma asset (downscaled to 600×400 = 3:2,
   thresholded to crisp black-and-white). Applied as a mask, it
   reproduces the Figma curve pixel-perfectly while letting us
   keep our own per-card placeholder photos. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: #d8d2c4;              /* tone-on-tone load state */
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url("images/jp341/image-mask.png");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("images/jp341/image-mask.png");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--founder::before {
    background-image: url("/uploads/2025/09/birgit-mitarbeiter-stories.jpg");
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--kmu::before {
    background-image: url("/uploads/2025/09/felix-mitarbeiter-stories.jpg");
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--enterprise::before {
    background-image: url("/uploads/2025/09/jana-mitarbeiter-stories.jpg");
}

/* Text-button row — title left, arrow right, 24px padding.      */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item--link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    color: #0b1b45;
    text-decoration: none;
}

/* Hide the plugin's built-in arrow.  WawiPanelsItem/scss/_layout.scss
   line 25 paints `::before { content: '\F061' }` — the Font Awesome
   arrow-right glyph — on every `.wawi-panels-widget__item--link`,
   which would render as a second dark arrow next to the orange
   Figma asset we paint via `::after` below. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item--link::before {
    content: none !important;
}

/* Card title — Inter Semi-Bold 20/28, dark blue.                */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item--title {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #0b1b45;
    margin: 0;
}

/* Drop the (now empty) description paragraph entirely.          */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item--content {
    display: none;
}

/* Arrow indicator — the exact Figma "Arrow" component asset
   (Group 1577706942, exported via the Figma MCP and saved as
   `theme/jtl/images/jp341/arrow-right.svg`). Filled JTL Orange,
   16 × 13.24 to match the Figma image-node proportions. The
   wrapper width 46px (Figma "Arrow" instance width 31.944 × 1.44)
   keeps the icon visually right-aligned inside the row. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item--link::after {
    content: "";
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    background-image: url("images/jp341/arrow-right.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 13.24px;
}

/* CTA group — centre under the cards.  Figma's Content frame uses
   `gap-[31.944px]` between Boxes→Buttons AND the Buttons frame has
   `pt-[22.222px]` of internal padding before the Primary button;
   combined real-desktop spacing = (31.944 + 22.222) × 1.44 ≈ 78px. */
.product-support-section.linkboxen-mit-bild .linkboxen-cta-group {
    display: flex;
    justify-content: center;
    margin-top: 78px;
}

/* CTA button — orange pill, dark-blue uppercase label, Inter
   Semi-Bold 16/24 with 0.32px tracking (Figma button spec).
   `box-shadow: none` kills the plugin's 2px inset dark-blue ring
   (the `.product-button-group__button--with-icon` base styling
   ships `box-shadow: 0 0 0 2px inset` to render the white-pill
   variant's border — Figma has no border on this orange variant).
   `!important` on bg + color because the global
   `section.product-management-section .product-button-group__button
   --with-icon.no-icon:not(.has-wawi-gra)` rule (line 7139) hits
   first with `background-color: transparent !important` and
   `color: #0b1b45 !important` (the H2 sub-class on this row is
   `product-management-section__title`, so the section itself
   isn't `.product-management-section`, but a `[class*="management"]`
   match might happen via cascade). */
.product-support-section.linkboxen-mit-bild .linkboxen-cta,
.product-support-section.linkboxen-mit-bild a.linkboxen-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    background: #fb581f !important;          /* JTL Orange           */
    background-color: #fb581f !important;
    color: #0b1b45 !important;                /* JTL Dark Blue        */
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 145px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;        /* 2% of 16px           */
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in-out;
}

/* =====================================================   JP-348 Hubspot/Kontakt (early-access) — 2-tone curved panel
   Figma 248:7091 "Hubspot/Kontakt" (Update side, node 248:7161).
   ------------------------------------------------------------
   Module = section.product-support-section.purple > .card >
   .card-body > .row > [text col] + [.nl-anmeldung form col].
   All rules keyed off :has(.nl-anmeldung) so they hit only the
   ~9 early-access modules — never the ~95 other .purple pages —
   and need no post_content edit.
   ============================================================ */

/* Outer section — JTL Light Sand */
section.product-support-section:has(.nl-anmeldung) {
    background: #eeeee7;
}

/* The card is the dark-navy panel with 32px rounded outer corners.
   The light-blue area is a background layer (.card-body::before)
   cut to a STRAIGHT DIAGONAL with clip-path — the navy angles from
   the top-right down to the bottom-left. The columns sit on top in
   a normal grid, so text wraps and nothing is clipped. */
.card:has(.nl-anmeldung) {
    border: 0 !important;
    /* Figma 248:7162 rounded-[31.944px] @ scale 0.694 = 46px */
    border-radius: 46px !important;
    overflow: hidden !important;
    /* the theme gives .card a 64px light-sand padding ring around
       .card-body — kill it so the navy panel reaches the rounded
       corners of the card */
    padding: 0 !important;
    background: #0b1b45 !important;
}
.card:has(.nl-anmeldung) > .card-body {
    background: #0b1b45;
    padding: 0 !important;
    position: relative;
}
/* light-blue layer — the actual Figma vector (node 248:7163) used
   as a stretched background-image. The layer is positioned at
   left:43% of the panel (matching the Figma left=396.53/911 offset)
   and the SVG is rotated 180° (matching Figma's rotate-180 wrapper)
   so the curved edge sits on the LEFT, dividing navy from blue. */
.card:has(.nl-anmeldung) > .card-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 43%;
    right: 0;
    background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 516.319 420.833' fill='none'><path d='M488.762 104.849L429.812 0L0 5.19073e-06L0.000206333 420.833H429.815L488.762 316.013C525.505 250.692 525.505 170.198 488.762 104.849Z' fill='%2389D2FF'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    z-index: 0;
}

/* The 2-column row — above the layer, no Bootstrap gutters */
.card:has(.nl-anmeldung) .row:has(> .nl-anmeldung) {
    position: relative;
    z-index: 1;
    align-items: stretch;
    margin: 0;
}
.card:has(.nl-anmeldung) .row:has(> .nl-anmeldung) > [class*="col-"] {
    padding: 0;
}

/* ── Left text column (navy side) ─────────────────────────── */
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) {
    flex: 0 0 46% !important;
    max-width: 46% !important;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    /* gentler hourglass: blue's left edge ~45% at the middle, so
       a moderate right padding keeps the text on navy throughout.
       !important beats the earlier [class*="col-"] { padding:0 }. */
    padding: 64px 80px 64px 56px !important;
}
/* eyebrow "EARLY ACCESS" — Figma 248:7167: Inter SemiBold 18/24, +0.9px */
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) .product-support-section__subtitle,
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) .product-support-section__subtitle * {
    color: #89d2ff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}
/* headline — Figma 248:7168: "Kurdis Wide Bold" 32/46, white.
   Kurdis is not licensed in this environment, so the wide
   geometric look is approximated with a horizontal scale on top
   of bold Proxima Nova. Swap to a real @font-face Kurdis when the
   font files are provided. */
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) .redesign-styles__title,
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) .redesign-styles__title * {
    color: #ffffff !important;
    font-family: 'Kurdis Wide', 'Kurdis', 'Proximanova', 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) .redesign-styles__title {
    display: block;
    transform: scaleX(1.08);
    transform-origin: left;
}
/* body — Figma 248:7169: Inter Regular 18/28, white */
.row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) p {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
}

/* ── Right form column — transparent; sits on the blue diagonal
   layer. The big left padding keeps the form clear of the slant. */
.nl-anmeldung.bg-tertiary {
    flex: 0 0 54% !important;
    max-width: 54% !important;
    background: transparent !important;
    border: 0 !important;             /* drops the old .border-big #814FF0 frame */
    border-radius: 0 !important;
    /* big left padding so the form heading & button (top/bottom of
       the form, where the blue is narrowest at ~60%) stay on blue */
    padding: 64px 56px 64px 180px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 991px) {
    /* stacked: drop the diagonal layer, the form column becomes a
       plain solid-blue rounded panel below the navy text block.
       Bump the panel radius on mobile — 46px reads too tight on a
       narrow, very tall stacked panel; 64px feels balanced. */
    .card:has(.nl-anmeldung) {
        border-radius: 64px !important;
    }
    .card:has(.nl-anmeldung) > .card-body {
        padding: 24px !important;
    }
    .card:has(.nl-anmeldung) > .card-body::before {
        display: none;
    }
    .row:has(> .nl-anmeldung) > .col-lg-6:not(.nl-anmeldung) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 16px 16px 8px !important;  /* beats the desktop !important */
    }
    .nl-anmeldung.bg-tertiary {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        background: #89d2ff !important;
        border-radius: 40px !important;
        margin: 16px 0 0 0 !important;
        padding: 32px !important;
    }
    /* smaller form heading so the long German word "Registrierung"
       fits the narrow column. .bg-tertiary in the selector raises
       specificity above the desktop 28px rule that sits later in
       the file (media queries do not add specificity). */
    .nl-anmeldung.bg-tertiary :is(h1, h2, h3, h4, h5),
    .nl-anmeldung.bg-tertiary :is(h1, h2, h3, h4, h5) * {
        font-size: 22px !important;
        line-height: 30px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}

/* The form sits inside a vc_raw_html that carries its own 30px
   padding — stacked on the panel padding it crushed the form to
   ~127px on mobile. Zero the inner WPBakery padding so the panel
   padding is the single source of inset. */
.nl-anmeldung .wpb_content_element,
.nl-anmeldung .wpb_wrapper,
.nl-anmeldung [class*="vc_custom_"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Form heading "Early Access Registrierung" — Figma 248:7172.
   Same wide-geometric-bold treatment as the navy headline:
   bold Proxima Nova + a horizontal scale to approximate the
   "Kurdis Wide" letterforms. JTL Dark Blue. */
.nl-anmeldung :is(h1, h2, h3, h4, h5),
.nl-anmeldung :is(h1, h2, h3, h4, h5) *,
.nl-anmeldung .hs-richtext,
.nl-anmeldung .hs-form-title {
    color: #0b1b45 !important;
    font-family: 'Kurdis Wide', 'Kurdis', 'Proximanova', 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    /* stop the theme breaking the heading mid-word ("Registrie-rung") */
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}
.nl-anmeldung :is(h1, h2, h3, h4, h5) {
    display: inline-block;
    transform: scaleX(1.08);
    transform-origin: left;
}

/* HubSpot form — standard .hs-form DOM (form renders client-side
   from js-eu1.hsforms.net). Specs from Figma 248:7170. */
.nl-anmeldung form.hs-form .hs-form-field { margin-bottom: 16px; }

/* HubSpot wraps inputs in .input and sets per-field widths inline —
   force the whole chain full-width so fields fill the column
   (notably when stacked on mobile). !important beats HubSpot's
   inline width on the field/input. */
.nl-anmeldung form.hs-form .hs-form-field,
.nl-anmeldung form.hs-form .hs-form-field > div,
.nl-anmeldung form.hs-form .input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.nl-anmeldung form.hs-form .hs-form-field > label {
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 24px;
}

.nl-anmeldung form.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    width: 100% !important;
    height: 40px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid #89d2ff;
    border-radius: 6px;
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}
.nl-anmeldung form.hs-form textarea.hs-input {
    height: auto;
    padding: 10px 12px;
}

/* Consent checkbox row */
.nl-anmeldung form.hs-form .legal-consent-container,
.nl-anmeldung form.hs-form .hs-form-booleancheckbox-display {
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* Submit button → JTL-Orange pill, dark-blue text.
   width:auto !important lets the pill size to its label — HubSpot
   otherwise gives the submit a fixed width that clipped the text. */
.nl-anmeldung form.hs-form .hs-button.primary {
    display: inline-block;
    width: fit-content !important;  /* size to label, not the column */
    max-width: 100%;
    background: #fb581f;
    border: 0;
    border-radius: 145px;
    padding: 12px 32px;
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.nl-anmeldung form.hs-form .hs-button.primary:hover {
    filter: brightness(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-372 Preise — dark_card_price plan cards restyle
   Figma 351:7269 "Preisboxen-Desktop 1440" (Update side of deck 248:4769).
   ------------------------------------------------------------
   WIDGET scope: `.product-price-plan-section .dark-card-widget` (the
   live dark_card_price widget). Used on /de/warenwirtschaftssystem-software/
   plus the English / ERP-Cloud / Production / Shop sibling pages. All
   restyling targets the widget's existing classes; per Phase 3 the
   surrounding tab nav (ERP/Lagerverwaltung) + Monthly/Yearly switcher
   + "Bis zu 17 % sparen" promo + per-card CTAs are page-composition
   work and out of scope for this widget restyle.

   2026-05 follow-up: this block originally scoped every selector to
   `.product-price-plan-section.orange`, so it only reached orange-variant
   pages. Non-orange pages (e.g. .green — /de/lagerverwaltung-software/) kept
   the legacy teal look because the JTL theme's style.css ships
   `.product-price-plan-section.green .dark-card-item__card-title { … !important }`
   at (0,5,0) — higher than a plain broadened (0,4,0) selector. To make the
   redesign cascade to ALL variants, each selector below uses the duplicated
   class `.product-price-plan-section.product-price-plan-section` (a
   specificity bump, not a variant): it matches every variant, ties the theme's
   (0,5,0), and wins by load order (custom-clone loads after the theme).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Navy panel bg: theme paints `.dark-card-widget { background: #142830 }`
   (dark teal). Figma uses JTL dark-blue `#0B1B45`. Bump it.
   Also `.dark-card-widget__top-text` ships with the same teal — neutralise
   so the navy panel below shows through cleanly. */
.product-price-plan-section.product-price-plan-section .dark-card-widget {
    background-color: #0b1b45 !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__top-text {
    background-color: transparent !important;
}

/* — Overline: orange → light-blue per Figma I351:7269;206:1410. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__overtitle {
    color: #89d2ff !important;
    background: none !important;
    -webkit-text-fill-color: #89d2ff !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* — 4-column grid so all four plan cards sit in one row instead of 3+1.
   At 1440 panel width the cards are ~274 px each with 32 px gaps. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-items {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px !important;
}

/* — Each card: semi-transparent white on the navy panel (Figma
   `bg-[rgba(255,255,255,0.1)] rounded-[24px]`). Override the cream/sand
   theme bg. Pro card (`.show-pro-plan`) gets a white outline + transparent
   fill (replacing the live orange-filled treatment). */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: none !important;
    border: 1px solid #ffffff !important;
}

/* Inner: white text everywhere except the orange plan name */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__inner {
    color: #ffffff !important;
    background: transparent !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-over-title {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-title {
    color: #fb581f !important; /* JTL orange — Figma plan name */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.1;
}
/* Featured "Pro" card (`.show-pro-plan`): the over-title + plan name are
   WHITE, not orange — matches the orange reference page. Needed because the
   plugin ships per-variant legacy rules at (0,6,0) that this generic block
   (0,5,0) can't beat: `.green …​ .show-pro-plan …​__card-title { #333 }` was
   meant for the OLD light-green section and renders dark-on-navy (invisible)
   after the redesign cascades the navy panel onto green/no-variant pages.
   This featured-specific rule ties (0,6,0) and wins on load order, for ALL
   variants. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-over-title,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-title {
    color: #ffffff !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-price {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-solutions-title {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-solution {
    color: #ffffff !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .card-solution-text {
    color: #ffffff !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-answer-title,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-answer {
    color: #ffffff !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__divider,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__separator {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* — Solution arrows: teal → JTL orange to match Figma list bullets.
   The arrows are inline `<svg path fill="#05C7D1">`. CSS fill on the
   path overrides the inline attribute fill. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-solutions .dark-card-item__card-solution .card-arrow svg path {
    fill: #fb581f !important;
}
/* Featured "Pro" card (`.show-pro-plan`) solution arrows. The plugin ships
   `.dark-card-widget .dark-card-items .show-pro-plan .card-arrow path { fill:#333 }`
   (CardPrice/style.css) and only repaints it to a visible colour on the
   `.orange` section variant. On `.green` / no-variant sections — e.g. the
   /de/preise-und-tarife "Shipping 2.0" tab (.green) — the Pro card's six list
   arrows stay #333 → invisible on the navy card, while the Start/Advanced/
   Enterprise cards' arrows are orange. The generic rule above lacks
   `.show-pro-plan`, so on the Pro card the plugin's #333 still wins. Force the
   same JTL orange, for ALL variants — mirrors the over-title/title fix above.
   (0,9,2) + !important beats both the plugin rule and the generic rule. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-solutions .dark-card-item__card-solution .card-arrow svg path {
    fill: #fb581f !important;
}

/* — Best Buy badge (Pro card): top-right pill with orange bg + dark-blue
   bold text. Plugin's selector includes `.show-pro-plan` — match it. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__buy-pro {
    background-color: #fb581f !important;
    background-image: none !important;
    color: #0b1b45 !important;
    text-transform: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    padding: 16px 20px !important;
    border-radius: 0 24px 0 24px !important;
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 2;
}

/* — Heading + description: Figma centres both inside the navy panel. */
.product-price-plan-section.product-price-plan-section .dark-card-widget__heading {
    text-align: center !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 36px;
    color: #ffffff !important;
    text-align: center !important;
    max-width: 704px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__title::after,
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__title::before {
    content: none !important;
    border: 0 !important;
    background: none !important;
    display: none !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__top-text {
    text-align: center !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 28px;
    max-width: 704px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* — Per-card CTA button (Figma Secondary-neg / Primary BETWEEN the
   bullets and the IDEAL FÜR section, NOT pinned at the bottom). The
   widget renders an empty `.dark-card-item__card-link-wrapper`
   placeholder (no link configured in admin); inject the button text
   + style via ::after, then move it visually via flex `order` on
   `.dark-card-item__bottom` so it sits ABOVE the separator + IDEAL
   FÜR content. Pro card uses the filled orange "Primary"; the other
   three use the outline white "Secondary-neg".

   Card markup is fixed:
     .dark-card-item__inner > .__top + .__divider + .__bottom
     .__bottom > .__separator + .__card-answer-title + .__card-answer
                 + .__card-link-wrapper
   By making `.__bottom` a flex column and giving the link-wrapper
   order 1 (others default to 0), the button hops to the top of
   .__bottom — i.e. right after the bullets in .__top — which is the
   Figma position. Hide the duplicate .__divider on .__inner so only
   the .__separator inside .__bottom remains as the dividing line. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__bottom > .dark-card-item__card-link-wrapper {
    order: -1 !important;
    margin: 0 !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__bottom > .dark-card-item__separator {
    order: 0;
    margin: 0 !important;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: transparent !important;
    height: 0;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__bottom > .dark-card-item__card-answer-title {
    order: 1;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__bottom > .dark-card-item__card-answer {
    order: 2;
}
/* Hide the duplicate divider that lives on .__inner — the
   .__separator inside .__bottom now serves as the only divider. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__divider {
    display: none !important;
}

.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper {
    height: auto !important;
    display: block !important;
    width: 100%;
    margin-top: 0;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper::after {
    content: "Jetzt buchen";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    border: 2px solid #eeeee7;
    border-radius: 145px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #eeeee7;
    box-sizing: border-box;
}
/* Pro card: filled orange Primary button + different label */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-link-wrapper::after {
    content: "Jetzt kontaktieren";
    background-color: #fb581f;
    border-color: #fb581f;
    color: #0b1b45;
}
/* Enterprise (last card) also uses "Jetzt kontaktieren" but outlined */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item:last-child:not(.show-pro-plan) .dark-card-item__card-link-wrapper::after {
    content: "Jetzt kontaktieren";
}

/* JP-435 — suppress the decorative pseudo-button when the wrapper has a
   real anchor (or button) inside. The original rule above was added as a
   fallback when editor data didn't include `card_item_link`; now that we
   wire real URLs into the WPBakery shortcode (scripts/db/jp435-pricing-
   card-links.php) we'd otherwise render two stacked buttons. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper:has(a, button)::after {
    content: none !important;
    display: none !important;
}

/* JP-435 — restyle the now-clickable .card-link inside the dark-card-item
   to match the visual the pseudo-button rendered: outlined Light Sand pill
   on Dark Navy. The Pro card variant takes the orange-filled treatment.
   Theme's `.bordered-transparent-link` default is theme grey on white, so
   we'd otherwise show near-invisible #333 on Dark Navy. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper a.card-link,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper button.card-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 24px !important;
    background-color: transparent !important;
    border: 2px solid #eeeee7 !important;
    color: #eeeee7 !important;
    border-radius: 145px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper a.card-link .text,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item .dark-card-item__card-link-wrapper button.card-link .text {
    color: inherit !important;
}
/* Pro card variant: filled orange Primary, Dark Blue label. */
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-link-wrapper a.card-link,
.product-price-plan-section.product-price-plan-section .dark-card-items .dark-card-item.show-pro-plan .dark-card-item__card-link-wrapper button.card-link {
    background-color: #fb581f !important;
    border-color: #fb581f !important;
    color: #0b1b45 !important;
}

/* — "Wofür interessierst du dich?" heading injected ABOVE the navy panel
   on the section's light-sand bg. The folder-style ERP/Lagerverwaltung
   tab nav from the Figma is page-composition work (requires real DOM
   that the live widget doesn't render); deferred — see PR notes. The
   heading is a single centred text block that sits cleanly on the page bg. */
.product-price-plan-section.product-price-plan-section::before {
    content: "Wofür interessierst du dich?";
    display: block;
    width: calc(100% - 120px);
    max-width: 1320px;
    margin: 0 auto 32px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    color: #0b1b45;
}
/* Unified container: the navy panel reads as a single contained
   component. Top corners are SHARP because the tab strip above
   (rendered via ::before, 46px tall, rounded-tl-46 + rounded-tr-46)
   takes over the rounded-top role — that way the tab strip's top
   corners line up perfectly with the panel's would-be corners.

   `overflow: visible` is required so the tab strip can sit ABOVE
   the panel (top: -46px) without being clipped. */
.product-price-plan-section.product-price-plan-section .dark-card-widget {
    margin-top: 46px !important; /* room for the tab strip above */
    border-radius: 0 0 46px 46px !important; /* sharp top corners — tab strip handles them */
    overflow: visible !important;
    position: relative;
}
/* Tab strip — ERP-Shopsysteme (active, full navy) / Lagerverwaltung
   (inactive, light-sand inner). Renders as a single inline-SVG bg
   image on `::before`, positioned -46 above the panel so the strip's
   bottom merges flush with the panel top.

   Architecture (revised to kill the 1px seam + corner mismatch):
   - Strip is 46px tall (so 46px corner radii fit cleanly)
   - SINGLE navy fill spans the whole strip with rounded-tl-46 +
     rounded-tr-46 (matches the panel's would-be top corners exactly
     — no jog at the right edge) and a notch cut at the top to
     create the inter-tab gap (Figma's active rounded-tr-24)
   - Light-sand OVERLAY on the right half (the inactive tab's inner
     button) starts sharply at x=660, with rounded-bl-24 to create
     the bottom-left tab notch per Figma

   This eliminates: (a) the 1px vertical antialiasing seam at x=660
   that came from two abutting navy fills, and (b) the rounded-tr-24
   vs panel-tr-46 corner mismatch on the right. Figma
   I351:7269;351:7257 is the source. */
.product-price-plan-section.product-price-plan-section .dark-card-widget::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -46px;
    height: 46px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1320 46' preserveAspectRatio='none' shape-rendering='geometricPrecision'><path d='M0 46 L0 46 A46 46 0 0 1 46 0 L636 0 A24 24 0 0 1 660 24 A24 24 0 0 0 684 0 L1274 0 A46 46 0 0 1 1320 46 Z' fill='%230b1b45'/><path d='M660 0 L1320 0 L1320 46 L684 46 A24 24 0 0 1 660 22 Z' fill='%23eeeee7'/><text x='330' y='29' font-family='Inter, sans-serif' font-weight='600' font-size='18' fill='%23ffffff' text-anchor='middle'>ERP-Shopsysteme</text><text x='990' y='29' font-family='Inter, sans-serif' font-weight='400' font-size='18' fill='%230b1b45' text-anchor='middle'>Lagerverwaltung</text></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
}
.product-price-plan-section.product-price-plan-section > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* — "Bis zu 17 % sparen*" promo + Monthly/Yearly switcher injected
   between the heading description and the cards (Figma I351:7269;351:6807).
   Single inline-SVG bg-image rendered as a centred block. The orange
   savings-tag icon on the right of "Jährlich*" is the Figma vector
   asset (I351:7269;351:6849;331:1835) — canonical source saved to
   theme/jtl/assets/images/jp372-savings-tag.svg, inlined here so the
   whole promo renders as a single background-image without an extra
   network request. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__top-text::after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    margin-top: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160' fill='none'><text x='300' y='32' text-anchor='middle' font-family='Inter, sans-serif' font-weight='600' font-size='20' fill='%23fb581f'>Bis zu 17 %25 sparen%2A</text><text x='300' y='68' text-anchor='middle' font-family='Inter, sans-serif' font-weight='400' font-size='16' fill='%23ffffff'>Sichere dir den Besten Preis mit einem Jahresvertrag.</text><rect x='160' y='100' width='280' height='48' rx='24' fill='none' stroke='%23ffffff' stroke-width='1'/><rect x='292' y='104' width='144' height='40' rx='20' fill='%23ffffff'/><text x='228' y='131' text-anchor='middle' font-family='Inter, sans-serif' font-weight='400' font-size='16' fill='%23ffffff'>Monatlich</text><text x='316' y='131' text-anchor='start' font-family='Inter, sans-serif' font-weight='600' font-size='16' fill='%230b1b45'>J%C3%A4hrlich%2A</text><g transform='translate(396 111) scale(1.741)'><path d='M14.5809 6.62853L13.4458 5.49199C13.2517 5.29759 13.0948 4.91625 13.0948 4.64707V3.032C13.0948 2.37401 12.5572 1.83565 11.9 1.83565H10.2944C10.0256 1.83565 9.6447 1.67863 9.45054 1.48422L8.31543 0.347689C7.85242 -0.115896 7.0907 -0.115896 6.6277 0.347689L5.47765 1.48422C5.29096 1.67863 4.9101 1.83565 4.63379 1.83565H3.0282C2.37104 1.83565 1.83335 2.37401 1.83335 3.032V4.6396C1.83335 4.90877 1.67653 5.29011 1.48236 5.48452L0.347254 6.62105C-0.115751 7.08464 -0.115751 7.84731 0.347254 8.31089L1.48236 9.44743C1.67653 9.64183 1.83335 10.0232 1.83335 10.2923V11.8999C1.83335 12.5579 2.37104 13.0963 3.0282 13.0963H4.63379C4.90263 13.0963 5.28349 13.2533 5.47765 13.4477L6.61276 14.5843C7.07577 15.0478 7.83749 15.0478 8.30049 14.5843L9.4356 13.4477C9.62976 13.2533 10.0106 13.0963 10.2795 13.0963H11.885C12.5422 13.0963 13.0799 12.5579 13.0799 11.8999V10.2923C13.0799 10.0232 13.2367 9.64183 13.4309 9.44743L14.566 8.31089C15.0514 7.85479 15.0514 7.09211 14.5809 6.62853ZM4.47696 5.23029C4.47696 4.81905 4.81301 4.48257 5.22375 4.48257C5.63448 4.48257 5.97053 4.81905 5.97053 5.23029C5.97053 5.64154 5.64194 5.97801 5.22375 5.97801C4.81301 5.97801 4.47696 5.64154 4.47696 5.23029ZM5.61954 10.1129C5.50752 10.2251 5.36563 10.2774 5.22375 10.2774C5.08186 10.2774 4.93997 10.2251 4.82795 10.1129C4.61138 9.89606 4.61138 9.53715 4.82795 9.32032L9.30865 4.834C9.52521 4.61716 9.88367 4.61716 10.1002 4.834C10.3168 5.05084 10.3168 5.40975 10.1002 5.62658L5.61954 10.1129ZM9.70444 10.4643C9.28624 10.4643 8.95019 10.1279 8.95019 9.71661C8.95019 9.30536 9.28624 8.96889 9.69697 8.96889C10.1077 8.96889 10.4438 9.30536 10.4438 9.71661C10.4438 10.1279 10.1152 10.4643 9.70444 10.4643Z' fill='%23fb581f'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 600px 160px;
}

/* — Plugin sets `.dark-card-widget__overtitle { max-width: 671px }` which
   leaves the overline left-aligned within the 1192-wide heading container.
   Override so the text spans full width and text-align: center actually
   centres the visible glyph row. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__overtitle {
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* — Bottom paragraph "Starte noch heute..." — centre per Figma. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__bottom-text {
    text-align: center !important;
    color: #ffffff !important;
    max-width: 704px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* — Bottom buttons row — centre the two CTAs per Figma. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget-bottom__buttons {
    justify-content: center !important;
    text-align: center !important;
}

/* — Bottom CTA (right): "Jetzt Kostenlos Starten" is the Primary action
   per Figma (orange filled, dark-blue label). Plugin renders both buttons
   identically as outlined white. Style the last one as the orange Primary. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget-bottom__buttons .bordered-reversed-link:last-child {
    background-color: #fb581f !important;
    border-color: #fb581f !important;
}
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget-bottom__buttons .bordered-reversed-link:last-child .text {
    color: #0b1b45 !important;
}
/* — Bottom CTA pill shape: theme ships .bordered-reversed-link with
   border-radius: 10px, but Figma I351:7269;206:1506 (and the per-card
   CTAs above) uses a full capsule pill (rounded-[145.323px]). Bump
   both bottom buttons to match. */
.product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget-bottom__buttons .bordered-reversed-link {
    border-radius: 145px !important;
    padding: 12px 24px !important;
}

/* — Mobile fallback: stack to 2-up at ≤991px, 1-up at ≤575px. Also
   hide the injected tab-nav SVG on narrow widths — it's a fixed-aspect
   visual that doesn't reflow. */
@media (max-width: 991px) {
    .product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .product-price-plan-section.product-price-plan-section .dark-card-widget::before {
        height: 110px;
    }
}
@media (max-width: 575px) {
    .product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-items {
        grid-template-columns: 1fr !important;
    }
    .product-price-plan-section.product-price-plan-section .dark-card-widget::before {
        display: none;
    }
    /* Mobile toggle pill — replace the wide 600x160 desktop SVG with
       a portrait-oriented 360x220 layout that scales up cleanly on
       narrow viewports (the desktop SVG shrunk to ~9-11px text at
       375 viewport). Stacked: heading → 2-line description → big
       toggle pill with the orange savings tag. */
    .product-price-plan-section.product-price-plan-section .dark-card-widget .dark-card-widget__top-text::after {
        height: 220px;
        background-size: 100% 100%;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220' fill='none'><text x='180' y='40' text-anchor='middle' font-family='Inter, sans-serif' font-weight='600' font-size='22' fill='%23fb581f'>Bis zu 17 %25 sparen%2A</text><text x='180' y='80' text-anchor='middle' font-family='Inter, sans-serif' font-weight='400' font-size='14' fill='%23ffffff'>Sichere dir den Besten Preis</text><text x='180' y='100' text-anchor='middle' font-family='Inter, sans-serif' font-weight='400' font-size='14' fill='%23ffffff'>mit einem Jahresvertrag.</text><rect x='40' y='130' width='280' height='48' rx='24' fill='none' stroke='%23ffffff' stroke-width='1'/><rect x='172' y='134' width='144' height='40' rx='20' fill='%23ffffff'/><text x='108' y='161' text-anchor='middle' font-family='Inter, sans-serif' font-weight='400' font-size='16' fill='%23ffffff'>Monatlich</text><text x='196' y='161' text-anchor='start' font-family='Inter, sans-serif' font-weight='600' font-size='16' fill='%230b1b45'>J%C3%A4hrlich%2A</text><g transform='translate(276 141) scale(1.741)'><path d='M14.5809 6.62853L13.4458 5.49199C13.2517 5.29759 13.0948 4.91625 13.0948 4.64707V3.032C13.0948 2.37401 12.5572 1.83565 11.9 1.83565H10.2944C10.0256 1.83565 9.6447 1.67863 9.45054 1.48422L8.31543 0.347689C7.85242 -0.115896 7.0907 -0.115896 6.6277 0.347689L5.47765 1.48422C5.29096 1.67863 4.9101 1.83565 4.63379 1.83565H3.0282C2.37104 1.83565 1.83335 2.37401 1.83335 3.032V4.6396C1.83335 4.90877 1.67653 5.29011 1.48236 5.48452L0.347254 6.62105C-0.115751 7.08464 -0.115751 7.84731 0.347254 8.31089L1.48236 9.44743C1.67653 9.64183 1.83335 10.0232 1.83335 10.2923V11.8999C1.83335 12.5579 2.37104 13.0963 3.0282 13.0963H4.63379C4.90263 13.0963 5.28349 13.2533 5.47765 13.4477L6.61276 14.5843C7.07577 15.0478 7.83749 15.0478 8.30049 14.5843L9.4356 13.4477C9.62976 13.2533 10.0106 13.0963 10.2795 13.0963H11.885C12.5422 13.0963 13.0799 12.5579 13.0799 11.8999V10.2923C13.0799 10.0232 13.2367 9.64183 13.4309 9.44743L14.566 8.31089C15.0514 7.85479 15.0514 7.09211 14.5809 6.62853ZM4.47696 5.23029C4.47696 4.81905 4.81301 4.48257 5.22375 4.48257C5.63448 4.48257 5.97053 4.81905 5.97053 5.23029C5.97053 5.64154 5.64194 5.97801 5.22375 5.97801C4.81301 5.97801 4.47696 5.64154 4.47696 5.23029ZM5.61954 10.1129C5.50752 10.2251 5.36563 10.2774 5.22375 10.2774C5.08186 10.2774 4.93997 10.2251 4.82795 10.1129C4.61138 9.89606 4.61138 9.53715 4.82795 9.32032L9.30865 4.834C9.52521 4.61716 9.88367 4.61716 10.1002 4.834C10.3168 5.05084 10.3168 5.40975 10.1002 5.62658L5.61954 10.1129ZM9.70444 10.4643C9.28624 10.4643 8.95019 10.1279 8.95019 9.71661C8.95019 9.30536 9.28624 8.96889 9.69697 8.96889C10.1077 8.96889 10.4438 9.30536 10.4438 9.71661C10.4438 10.1279 10.1152 10.4643 9.70444 10.4643Z' fill='%23fb581f'/></g></svg>");
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QuoteOverlap — "Zitat" module (Komp widget — JP-354)
   Restyle QuoteOverlap (WPBakery "Zitat v2") to the Figma "Quote-no-box"
   design — file VSSY3wxlC31HrYDwwmHmrv, after-node 398:5119. Sibling of the
   JP-83 block above, which did the same for the QuoteStandard variant.

   SCOPING — deliberately page-scoped (body.page-id-322555), NOT a global
   .blockquote-overlap rule. All 6 live QuoteOverlap instances sit in DARK
   sections (blue hero / bg-primary slate) with white text; a global restyle
   to the light Quote-no-box look (Dark Blue text) would make them invisible.
   So this targets only the demo page /de/demo-quote-overlap-no-box/, mirroring
   JP-83's /de/demo-quote-no-box/ and JP-344's page-id-scoped block above.
   Re-theming the live dark sections is Phase 3 page work (CLAUDE.md rule 12).

   Widget scope = what QuoteOverlap renders: photo + quote + author footer.
   The "Success Story" overline and the orange CTA on the demo page are
   sibling widgets (TextStandard / ButtonsStandard), already covered by JP-83's
   helper classes — not restyled here.

   Documented structural gaps (need a Template.php edit — out of CSS scope):
     - author name + job render inline in one <footer>; Figma puts them on two
       lines with the job underlined in orange.
     - Figma's decorative logo-blob / quote-blob photo overlays.

   Tokens (from get_design_context 398:5119):
     #0b1b45 JTL Dark Blue   #fb581f JTL Orange
   ═══════════════════════════════════════════════════════════════════════════ */

/* Photo — organic "blob" shape instead of the legacy 3.2px `.rounded` corners.
   Same asymmetric superellipse JP-83 used for the QuoteStandard photo so the
   two quote variants read consistently. `!important` beats Bootstrap's
   `.rounded` (ships `border-radius: .25rem !important`) — CLAUDE.md rule 10. */
body.page-id-322555 blockquote.blockquote-overlap img.rounded {
    border-radius: 38% 62% 41% 59% / 53% 39% 61% 47% !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.06);
}

/* The widget injects a giant `display-1` opening-quote glyph (inline style
   line-height:16px; margin-top:50px). Figma uses a plain inline typographic
   “ at the start of the quote — neutralise the glyph to inline body size.
   `!important` overrides the element's inline style. */
body.page-id-322555 blockquote.blockquote-overlap .block-text .display-1 {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
}

/* Quote text — Inter Medium 24/38, JTL Dark Blue, tracking 0.48px
   (Figma node I398:5119;1:30 → letterSpacing 2% of 24px = 0.48px). */
body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4,
body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4 p {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 38px;
    letter-spacing: 0.48px;
    color: #0b1b45;
}
/* Closing typographic quote — the widget only injects the opening “. */
body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4 p:last-of-type::after {
    content: "\201D";
}

/* Author footer — Inter, JTL Dark Blue, name in SemiBold. Kept on one line;
   the Figma two-line name/job-underline split is a documented structural gap. */
body.page-id-322555 blockquote.blockquote-overlap .block-text footer {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #0b1b45;
}
body.page-id-322555 blockquote.blockquote-overlap .block-text footer .font-weight-bold {
    /* Figma name = Inter SemiBold 600; !important beats Bootstrap's
       `.font-weight-bold { font-weight: 700 !important }` — CLAUDE.md rule 10. */
    font-weight: 600 !important;
}
body.page-id-322555 blockquote.blockquote-overlap .block-text footer a {
    color: #0b1b45;
    text-decoration: underline;
    text-decoration-color: #fb581f;
    text-underline-offset: 3px;
}

/* Mobile — quote 18/28. */
@media (max-width: 767.98px) {
    body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4,
    body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4 p {
        font-size: 18px;
        line-height: 28px;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   JP-354 demo-page composition (page-id-322555):
   2-column vc_row mirroring JP-83's /de/demo-quote-no-box/ layout (block above).
     LEFT  — ImageStandard image="1369" (the photo)
     RIGHT — TextStandard `.overline-success`
             QuoteOverlap (quote-only — no image/name/job; just renders the
                           .blockquote-overlap with .block-text)
             TextStandard `.author-name`
             TextStandard `.author-title`
             ButtonsStandard / Item color="orange"
   The widget restyle of QuoteOverlap is the block above; this section sets
   up the surrounding page composition so the demo matches Figma 398:5119.
   ─────────────────────────────────────────────────────────────────────────── */

/* Section background — JTL Light Sand, with Figma-frame vertical padding. */
body.page-id-322555 main > section {
    background-color: #eeeee7;
    padding: 64px 0 120px;
}

/* The theme positions `.blockquote-overlap .block-text` absolute to make the
   text block "overlap" the photo on the 6 live dark-section instances. Here
   the demo uses QuoteOverlap WITHOUT an image (the photo is a separate
   ImageStandard left col), so the absolute positioning floats the block-text
   to the right and breaks the column flow. Reset to normal block flow —
   page-scoped, so the 6 live overlap instances keep their behaviour. */
body.page-id-322555 blockquote.blockquote-overlap .block-text {
    position: static !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* And zero the quote .h4's mx-4 so it aligns to the right column's left edge
   like the overline/name/title/CTA (Bootstrap `.mx-4` is `!important`). */
body.page-id-322555 blockquote.blockquote-overlap .block-text > .h4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Vertically centre the photo column with the right text column. */
body.page-id-322555 .container > .row {
    align-items: center;
}

/* Left-column photo — same blob shape JP-83 uses on its ImageStandard.
   `.col:has(> picture)` targets the photo column without leaking to other
   ImageStandard widgets elsewhere on the page. */
body.page-id-322555 .col:has(> picture) img.img-fluid {
    width: 100% !important;
    height: auto;
    max-width: 480px;
    border-radius: 38% 62% 41% 59% / 53% 39% 61% 47% !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.06);
}

/* Mobile — stack the columns; centre everything in the right column. */
@media (max-width: 767.98px) {
    body.page-id-322555 .container > .row {
        flex-direction: column;
    }
    body.page-id-322555 .container > .row > .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
    }
    body.page-id-322555 .col:has(> picture) img.img-fluid {
        max-width: 280px;
        margin: 0 auto 24px;
    }
    body.page-id-322555 .overline-success,
    body.page-id-322555 .author-name,
    body.page-id-322555 .author-title {
        text-align: center;
    }
    body.page-id-322555 .btn-wrapper {
        justify-content: center !important;
    }
}

/* =====================================================   JP-374 Text-3 Col — restyle .product-support-section to Figma
   Figma 248:4979 (after-frame 248:5134 "Text-1spaltig-Desktop 1440").
   ------------------------------------------------------------
   The live widget renders inside a tinted .card box. The
   .orange variant fills it with #0b1b45 dark-navy (per the
   plugin's .product-support-section.orange .container-product-
   support-card.card !important rule); the .purple / .green
   variants already use Light Sand. The Figma "after" drops the
   box entirely (Light Sand on the outer section), tech-blue
   accents everywhere.

   SCOPE: .product-support-section (the widget root, all colour
   variants). 116 live pages use this section
   (warenwirtschaftssystem-software, shopware, shopify, woo,
   etc.) — restyle applies to all of them.

   Specificity notes (CLAUDE.md rule 10):
     - The plugin's `.product-support-section.orange
       .container-product-support-card.card` rule is 0,4,0 +
       !important. To override its background, my selector
       matches `.orange` AND `.card` AND adds !important.
     - The plugin's `.purple` / `.green` variants use the same
       specificity for their Light-Sand bg, so the no-orange
       override only needs to hit `.orange`.
     - Theme h2::after orange underline ships via a 0,4,2
       :not()-chain with !important — hide it explicitly.

   Design tokens (deck x1.44 = production, matches JP-347 /
   JP-357 / JP-365 convention):
     Section: bg Light Sand #eeeee7, padding 80/64
     Card box: transparent, no padding, no border
     Eyebrow: Inter 600 18/24 #2722f8 tech-blue ls 0.9 upper
     Heading: Kurdis Wide Bold 32/46 #0b1b45 ls 0.64
     Intro:   Inter 400 18/28 #0b1b45
     Col title: Inter 700 18/28 #0b1b45
     List item: Inter 400 18/28 #0b1b45, gap 18 vertical
       Arrow: tech-blue #2722f8
       Links: dark-blue #0b1b45, no underline
   ============================================================ */
.product-support-section {
    background-color: #eeeee7 !important;
    padding: 80px 0;
}

/* Strip the card box for ALL variants. Selector matches the
   plugin's 4-class specificity (.product-support-section
   .container-product-support-card.card = 0,3,0; with body. =
   0,3,0 + 1 element). Bump to win .orange's 0,4,0+!important
   by going to 5-class: body .product-support-section.orange
   .container-product-support-card.card → 0,5,1 wins. For non-
   .orange variants, the 0,3,0 selector applies cleanly. */
.product-support-section .container-product-support-card,
.product-support-section .container-product-support-card.card,
body .product-support-section.orange .container-product-support-card.card,
body .product-support-section.purple .container-product-support-card.card,
body .product-support-section.green .container-product-support-card.card {
    background: transparent !important;
    background-color: transparent !important;
    color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Constrain the inner card-body and center it within the
   section's outer .container. Without this, the live .container
   goes edge-to-edge at xl (max-width 1570) and the title + cols
   sit anchored to the left of the viewport. Width 1280 matches
   the Figma proportions (1440 frame minus 80 padding each side
   ≈ 1280 inner) so columns get ~410px each and text wraps
   naturally — user feedback 2026-05-24 r4: r3's 1100 was too
   stiff. */
.product-support-section .container-product-support-card .card-body {
    padding: 0 !important;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* Title wrapper — left-aligned text, sits flush with column 1
   (user feedback 2026-05-24 r2: not center text, but the whole
   block stays in the middle of the page via the .container). */
.product-support-section .product-support-section__title-wrapper {
    text-align: left;
    margin: 0 0 32px 0;
    max-width: 760px;
}

/* Eyebrow (h2.product-support-section__subtitle.text-uppercase.h3).
   Plugin selectors:
     - .product-support-section__subtitle (0,1,0) — sets gradient
       text-fill, font 20/26 weight 700.
     - .product-support-section.orange .product-support-section__subtitle
       (0,2,1) + !important — sets color #89d2ff (light-blue).
   Win both with 0,4,0 + !important. */
.product-support-section .product-support-section__title-wrapper .product-support-section__subtitle,
body .product-support-section.orange .product-support-section__subtitle,
body .product-support-section.purple .product-support-section__subtitle,
body .product-support-section.green .product-support-section__subtitle {
    color: #2722f8 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
}

/* Heading (h2.product-support-section__title.h2). Plugin's
   `.product-support-section .product-support-section__title`
   is 0,2,0; .h2 utility from Bootstrap adds another class. Win
   with 0,3,0 + !important. */
.product-support-section .product-support-section__title-wrapper .product-support-section__title,
.product-support-section .product-support-section__title-wrapper .product-support-section__title .font-weight-bold {
    color: #0b1b45 !important;
    /* Kurdis not loaded in this env — Inter fallback (JP-337 /
       JP-347 / JP-357 / JP-365 precedent). */
    font-family: "Kurdis", "Kurdis Wide Bold", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    margin: 0 !important;
    text-transform: none !important;
}
/* Theme paints an orange ::after underline on h2. */
.product-support-section .product-support-section__title::after,
.product-support-section .product-support-section__title::before {
    display: none !important;
}

/* Intro paragraph (live pages include it; Figma after-frame
   doesn't show it — style as body 18/28 dark-blue rather than
   hide). */
.product-support-section .product-support-section__title-wrapper > .font-size-lg {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    font-size: 18px;
    line-height: 28px;
}
.product-support-section .product-support-section__title-wrapper > .font-size-lg,
.product-support-section .product-support-section__title-wrapper > .font-size-lg p {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
}

/* 3-column row — strip the plugin's 32px lateral padding. Columns
   left-anchored (user feedback 2026-05-24 r2: content left-
   aligned, not center) — Bootstrap .container max-width keeps the
   whole block in the middle of the page. */
.product-support-section .product-support-section__inner-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 -16px;
    gap: 0 !important;
    justify-content: flex-start !important;
}
/* Override Bootstrap col-xl-3 (= 25% width, leaves 25% empty
   right of col 3) so each of the 3 columns takes 1/3 of the
   inner-row. User feedback 2026-05-24 r4: columns were too
   stiff because they only used 75% of the available width. */
.product-support-section .product-support-section__column,
.product-support-section .col-xl-3.product-support-section__column,
.product-support-section .col-lg-4.product-support-section__column {
    padding: 0 16px;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

/* Column title (h4.product-support-section__column-title). Plugin
   sets 26 padding-left 38 with absolute .font-weight-bold prefix —
   reset to a flat Inter Bold 18 dark-blue. Plugin selector at
   line 1574 has 0,4,0 specificity, beat with 0,4,0 + !important. */
.product-support-section .product-support-section__inner-row .product-support-section__column .product-support-section__column-title,
.product-support-section .product-support-section__column .product-support-section__column-title {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 12px 0 !important;
    padding-left: 0 !important;
    text-decoration: none !important;
}
.product-support-section .product-support-section__column-title::after,
.product-support-section .product-support-section__column-title::before {
    display: none !important;
}
.product-support-section .product-support-section__column-title .font-weight-bold {
    position: static !important;
    color: inherit !important;
    font-weight: 700 !important;
}

/* List container — keep the plugin's hanging-icon pattern
   (padding-left + negative-margin on .list-icon) so the text
   wraps cleanly inside the column without an inline link
   splitting onto its own line. */
.product-support-section .product-support-section__column .list-icons {
    padding: 0 0 0 32px !important;
    margin: 0 !important;
    list-style: none;
    font-size: 18px !important;
}
.product-support-section .product-support-section__column .list-icons li {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
    position: relative;
    display: block !important;
}
.product-support-section .product-support-section__column .list-icons li:not(:last-child) {
    margin-bottom: 18px !important;
}
.product-support-section .product-support-section__column .list-icons li:last-child {
    margin-bottom: 0 !important;
}
/* Arrow icon — was orange (#FF9A26) via inline `style="color:..."`
   on .orange, light-blue on .green/.purple. Force tech-blue and
   re-anchor in the 32px gutter we created with the ul padding-
   left. The plugin's `.product-support-section.orange ul.list-
   icons li span` is 0,4,1 + !important; matched with `body` +
   same. */
.product-support-section .product-support-section__column .list-icons li .list-icon,
.product-support-section .product-support-section__column .list-icons li span.list-icon,
body .product-support-section.orange .product-support-section__column .list-icons li span,
body .product-support-section.purple .product-support-section__column .list-icons li span,
body .product-support-section.green .product-support-section__column .list-icons li span {
    color: #2722f8 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 28px !important;
    position: absolute !important;
    left: -32px !important;
    top: 4px !important;
}
/* Item text + links — dark-blue, no underline */
.product-support-section .product-support-section__column .list-icons p,
.product-support-section .product-support-section__column .list-icons a,
.product-support-section .product-support-section__column .list-icons li {
    color: #0b1b45 !important;
}
.product-support-section .product-support-section__column .list-icons li a {
    color: #0b1b45 !important;
    text-decoration: none !important;
}
.product-support-section .product-support-section__column .list-icons li a:hover,
.product-support-section .product-support-section__column .list-icons li a:focus {
    color: #2722f8 !important;
    text-decoration: underline !important;
}

/* 2026-06-07 (user feedback): REVERSED the 2026-05-24 blanket hide of the
   sibling .product-subcard-widget inside .product-support-section. That hide
   (added in JP-374) suppressed the right-side subcard content on all ~116
   product-support-section pages — e.g. the "Individuelle Hosting-Angebote" /
   servicepartner text on jtl-warenwirtschaft-cloud, erp-schnittstelle/*, etc.
   The subcard content IS wanted, so it now renders by default. (Page-specific
   display:block re-enables for 233028 / 232998 are now redundant but harmless.)
   To hide it on a specific page again, scope to that body.page-id-XXX only. */

/* Mobile — stack the 3 columns vertically (user feedback
   2026-05-24 r6: revert to vertical stack, not horizontal
   scroll). */
@media (max-width: 991.98px) {
    .product-support-section {
        padding: 40px 0;
    }
    .product-support-section .product-support-section__title-wrapper .product-support-section__title,
    .product-support-section .product-support-section__title-wrapper .product-support-section__title .font-weight-bold {
        font-size: 26px !important;
        line-height: 36px !important;
    }
    .product-support-section .product-support-section__inner-row {
        flex-wrap: wrap !important;
        margin: 0 !important;
    }
    .product-support-section .product-support-section__column,
    .product-support-section .col-xl-3.product-support-section__column,
    .product-support-section .col-lg-4.product-support-section__column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0;
        margin-bottom: 24px;
    }
    .product-support-section .product-support-section__column:last-child {
        margin-bottom: 0;
    }
}

/* =====================================================   JP-373 Preise (comparison table) — restyle .price-table to
   Figma 248:5537 (after-frame 347:4579 "Tabelle Desktop 1440").
   ------------------------------------------------------------
   The widget is a div-based pseudo-table rendered by theme
   templates partials/presse/{,new-prices/}price-table-*.php
   (NOT a WPBakery widget). Used on /de/preise-und-tarife/ via
   the prices-new page template. Same markup also under the
   prices-with-switcher template.

   SCOPE: .price-table (the section root). Section-scoped so the
   restyle doesn't leak to other div-tables on the site.

   Design tokens (Figma get_design_context 347:4579, production
   scale):
     Section: bg Light Sand #eeeee7, padding 80/64
     Heading "Überblick | Warenwirtschaft": Kurdis Wide Bold
       32/46 #0b1b45 ls 0.64
     Table outer: 1px solid #2722f8 border, radius 24
     Header bar (PRODUKT | START | ...): bg #0b1b45,
       text #89d2ff, Inter 600 20/28, padding 14/32, rounded
       top-left + top-right 24
     Sub-header row (WARENWIRTSCHAFT): bg white, text #2722f8,
       Inter 700 18/28, padding 14/32
     Group header (Stammdatenverwaltung, ...): bg #eeeee7,
       text #0b1b45, Inter 700 16/24, padding 12/32
     Data row: bg white, text #0b1b45, Inter 400 16/24,
       padding 8 vertical / 12 horizontal cells, 32 horizontal
       on feature label
     Check / X / info icons: tech-blue / dark-blue per Figma
     Price cell (199 € / Monat): Inter 400 14/21 #0b1b45 center
     Beta badge: bg #2722f8, text white, Inter 600 12/16, pad
       2/10, radius 5
   ============================================================ */

/* Outer section bg + padding.
   The plugin theme ships a stack of #anchor-features-wawi /
   #anchor-features-wms ID-scoped rules (specificity 1,X,Y +
   !important) that we need to beat — every override below
   either matches that specificity (chain with one of the IDs)
   or exceeds it. */
.price-table {
    background-color: #eeeee7;
    padding: 80px 64px !important;
}

/* Section heading "Überblick | Warenwirtschaft" */
.price-table .price-table_inner-top .text-description {
    color: #0b1b45;
    font-family: "Kurdis", "Kurdis Wide Bold", "Inter", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    margin: 0 0 32px 0;
    text-align: left;
}
.price-table .price-table_inner-top .text-description strong {
    font-weight: 700;
}
.price-table .price-table_inner-top {
    background: transparent !important;
}
.price-table .price-table_inner-top .container {
    max-width: 100%;
    padding: 0;
}

/* Table outer wrapper — rounded with 1px tech-blue border. The
   plugin's #anchor-features-wawi .price-table__wrapper rule
   sets border 1px #FF9A26 (orange) + radius 20 + width 1400
   at specificity 1,1,0 + (no !important). Override via 2-ID
   selector (specificity 2,1,0) so we win against both wawi +
   wms variants. */
#anchor-features-wawi .price-table .price-table__wrapper,
#anchor-features-wms .price-table .price-table__wrapper,
.price-table .price-table__wrapper {
    background-color: #ffffff !important;
    border: 1px solid #2722f8 !important;
    border-radius: 24px !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Header bar — dark-blue bg, light-blue text. Plugin uses
   #anchor-features-wawi .price-table__header { background:
   linear-gradient(orange-yellow); padding 14/32 } at 1,1,0
   specificity. Override at 2,1,0 to win. */
#anchor-features-wawi .price-table .price-table__header,
#anchor-features-wms .price-table .price-table__header,
.price-table .price-table__header {
    background: #0b1b45 !important;
    background-color: #0b1b45 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.price-table .price-table__header .price-table__row {
    background-color: #0b1b45;
}

/* Plugin shifts PRO header +15px and ENTERPRISE header +23px via
   `transform: translateX()` (#anchor-features-wawi rules at lines
   78870-78877) — that mis-aligns those columns from the
   check-mark cells below. Reset both transforms so the grid
   columns line up. */
#anchor-features-wawi .price-table .price-table__header .price-table__cell--pro,
#anchor-features-wms .price-table .price-table__header .price-table__cell--pro,
#anchor-features-wawi .price-table .price-table__header .price-table__cell--enterprise,
#anchor-features-wms .price-table .price-table__header .price-table__cell--enterprise {
    transform: none !important;
    border-radius: 0 !important;
}
.price-table .price-table__header .price-table__cell {
    color: #89d2ff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    text-transform: uppercase;
    padding: 14px 32px !important;
    background: transparent !important;
}
.price-table .price-table__header .price-table__cell--product {
    text-align: left;
    justify-content: flex-start;
}
.price-table .price-table__header .price-table__cell--end {
    border-radius: 0 !important;
}

/* Accordion wrapper — no extra radius (the outer wrapper holds it) */
.price-table .price-table__accordion {
    border-radius: 0 !important;
}

/* Category header row (WARENWIRTSCHAFT) — bg white, text tech-blue,
   Inter Bold 18/28. Plugin's #anchor-features-wawi
   .price-table__category-header sets color orange + bg white
   + padding at 1,1,0. Override at 2,1,0. */
#anchor-features-wawi .price-table .price-table__category,
#anchor-features-wms .price-table .price-table__category,
.price-table .price-table__category,
#anchor-features-wawi .price-table .price-table__category-header,
#anchor-features-wms .price-table .price-table__category-header,
.price-table .price-table__category-header {
    background: #ffffff !important;
    border: 0 !important;
    color: #2722f8 !important;
}
#anchor-features-wawi .price-table .price-table__category-header,
#anchor-features-wms .price-table .price-table__category-header,
.price-table .price-table__category-header {
    padding: 14px 32px !important;
}
.price-table .price-table__category::before,
.price-table .price-table__category-header::before {
    display: none !important;
}
.price-table .price-table__category-title {
    color: #2722f8;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    text-transform: uppercase;
}
/* Chevron toggle on the category header — keep visible, color
   tech-blue, position right. Override fontawesome ::after for
   simplicity. */
.price-table [data-toggle=collapse]:not(.navbar-toggler):not(.no-icon)::after {
    color: #2722f8;
    right: 32px;
}

/* Sub-title row (Stammdatenverwaltung, Auftragsmanagement, etc.)
   bg Light Sand, dark-blue text. Plugin's
   #anchor-features-wawi .price-table__sub-title sets
   bg #FFF5E9 + padding at 1,1,0. Override at 2,1,0. */
#anchor-features-wawi .price-table .price-table__sub-title,
#anchor-features-wms .price-table .price-table__sub-title,
.price-table .price-table__sub-title {
    background-color: #eeeee7 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.price-table .price-table__sub-title .price-table__cell {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 12px 12px !important;
    background: transparent !important;
}
/* Plugin sets `.price-table__row.price-table__sub-title
   .price-table__cell.price-table__cell--feature { padding-left:
   42px !important; }` at 0,4,0 specificity. Match with same 4
   classes + 1 element + !important to win on specificity, and
   reset to 32px so the group header (Stammdatenverwaltung,
   etc.) aligns with the data rows below (Kundenstammdaten,
   etc.) which also use 32px. */
.price-table .price-table__row.price-table__sub-title .price-table__cell.price-table__cell--feature,
#anchor-features-wawi .price-table .price-table__row.price-table__sub-title .price-table__cell.price-table__cell--feature,
#anchor-features-wms .price-table .price-table__row.price-table__sub-title .price-table__cell.price-table__cell--feature {
    padding-left: 32px !important;
    text-align: left;
    justify-content: flex-start;
}
/* Hide the duplicate Start/Advanced/Pro/Enterprise labels in the
   sub-title row — the dark header already shows them. */
.price-table .price-table__sub-title .price-table__cell--start,
.price-table .price-table__sub-title .price-table__cell--advanced,
.price-table .price-table__sub-title .price-table__cell--pro,
.price-table .price-table__sub-title .price-table__cell--enterprise {
    color: transparent !important;
}

/* Data rows — bg white, text dark-blue */
.price-table .price-table__table {
    background-color: #ffffff !important;
    margin: 0 !important;
}
.price-table .price-table__table .price-table__row {
    background-color: #ffffff;
    border-bottom: 1px solid #eeeee7;
}
.price-table .price-table__table .price-table__row:last-child {
    border-bottom: 0;
}
.price-table .price-table__table .price-table__cell {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 8px 12px !important;
    background: transparent !important;
}
.price-table .price-table__table .price-table__cell--feature {
    padding-left: 32px !important;
    text-align: left;
    justify-content: flex-start;
    gap: 8px;
}

/* Check / X / info marks. The plugin's
   #anchor-features-wawi .fa-solid.fa-check forces orange
   #FF9A26 + !important at 1,2,0 specificity, and
   #anchor-features-wms .text-success forces teal #05C7D1.
   Override with explicit 2-ID selector + !important. */
#anchor-features-wawi .price-table .price-table__cell .fa-check,
#anchor-features-wms .price-table .price-table__cell .fa-check,
#anchor-features-wawi .price-table .price-table__cell .fa-solid.fa-check,
#anchor-features-wms .price-table .price-table__cell .fa-solid.fa-check,
#anchor-features-wawi .price-table .price-table__cell.text-success,
#anchor-features-wms .price-table .price-table__cell.text-success,
.price-table .price-table__cell .fa-check {
    color: #2722f8 !important;
    font-size: 16px !important;
}
/* Bootstrap .text-success utility applied to the <span class="...
   text-success"> wrapper around fa-check icons. Plugin's
   #anchor-features-wawi rules override that to orange; we
   override back to tech-blue. */
#anchor-features-wawi .price-table .text-success,
#anchor-features-wms .price-table .text-success {
    color: #2722f8 !important;
}
#anchor-features-wawi .price-table .price-table__cell .fa-xmark,
#anchor-features-wms .price-table .price-table__cell .fa-xmark,
#anchor-features-wawi .price-table .price-table__cell .fa-times,
#anchor-features-wms .price-table .price-table__cell .fa-times,
.price-table .price-table__cell .fa-xmark {
    color: #0b1b45 !important;
    opacity: 1 !important;
    font-size: 16px !important;
}
.price-table .price-info-trigger,
.price-table .price-table__cell .fa-circle-info,
.price-table .price-table__cell .fa-regular.fa-circle-info {
    color: #0b1b45 !important;
    font-size: 15px;
}

/* Price cell text (199 € / Monat) — Inter 400 14/21 dark-blue */
.price-table .price-table__table .price-table__cell:not(.price-table__cell--feature) {
    font-size: 14px !important;
    line-height: 21px !important;
}

/* Beta badge — the live markup is .price-clip (NOT .badge).
   Plugin's #anchor-features-wawi .price-clip sets bg orange
   #FF9A26 at 1,1,0 specificity. Override at 2,1,0 + !important. */
#anchor-features-wawi .price-table .price-clip,
#anchor-features-wms .price-table .price-clip,
.price-table .price-clip {
    background: #2722f8 !important;
    background-color: #2722f8 !important;
    color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    padding: 2px 10px !important;
    border-radius: 5px !important;
    text-transform: capitalize;
    vertical-align: middle;
    display: inline-block;
    margin-left: 6px;
}

/* Hide the column-highlight 0,5,1 cell-tints (light gray); the
   restyle relies on a flat colour scheme. The plugin's
   .price-table.pt-highlight-* rules use no !important so a
   higher-specificity override + transparent !important wins. */
.price-table.pt-highlight-start .price-table__accordion .price-table__cell--start,
.price-table.pt-highlight-advanced .price-table__accordion .price-table__cell--advanced,
.price-table.pt-highlight-pro .price-table__accordion .price-table__cell--pro,
.price-table.pt-highlight-enterprise .price-table__accordion .price-table__cell--enterprise {
    background: transparent !important;
}

/* Mobile (<=991): keep table structure but tighten padding and
   shrink fonts. */
@media (max-width: 991.98px) {
    .price-table {
        padding: 40px 16px !important;
    }
    .price-table .price-table_inner-top .text-description {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 24px;
    }
    .price-table .price-table__header .price-table__cell {
        padding: 12px 16px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .price-table .price-table__category-header {
        padding: 12px 16px !important;
    }
    .price-table .price-table__sub-title .price-table__cell--feature,
    .price-table .price-table__table .price-table__cell--feature {
        padding-left: 16px !important;
    }
    .price-table .price-table__table .price-table__cell {
        font-size: 13px !important;
        line-height: 18px !important;
        padding: 8px 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Post-Slider — "Post-Slider" module (Komp widget — JP-355)
   Restyle the BlogStandard widget to match Figma "Post-Slider-Desktop 1440"
   (file VSSY3wxlC31HrYDwwmHmrv, after-node 351:6573).

   SCOPING — page-scoped to the demo page body.page-id-322911
   (/de/demo-post-slider/), same JP-83 / JP-344 / JP-354 pattern. BlogStandard
   is used on 6 live pages in an orange-panel context; a global Light-Sand
   restyle would visually break them. Re-theming those sections is Phase 3.

   Widget scope = the BlogStandard swiper cards + arrow nav. The "SUCCESS
   STORIES" overline, the heading "Wie JTL dich erfolgreich macht!", and
   the "ALLE BEITRÄGE" outline button are sibling widgets/elements on the
   demo page (TextStandard with helper classes — same composition pattern
   JP-83 uses on /de/demo-quote-no-box/).

   Documented structural gaps (need Blog/Standard/Template.php edits — out
   of CSS scope):
     - card body has only image + date + title; Figma adds excerpt +
       "Mehr erfahren" link + arrow icon under the title.
     - the per-post image colour overlay ("Genuss Berlin" logo blob) is a
       per-post asset, not a widget concern.

   Tokens (from get_design_context 351:6573):
     #eeeee7 JTL Light Sand   #0b1b45 JTL Dark Blue
     #2722f8 JTL Tech Blue    #ffffff white
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer "box" — the Figma frame has the whole module inside a Light Sand
   rounded-46 panel with 46px padding. Wrap the demo page's content row so
   the slider lives inside this panel. */
body.page-id-322911 main > section {
    background-color: #ffffff;
    padding: 80px 64px;
}
body.page-id-322911 .container > .row {
    background-color: #eeeee7;
    border-radius: 46px;
    padding: 46px;
    margin: 0;
    position: relative;  /* anchor for the absolutely-positioned nav arrows */
}

/* Heading — Kurdis Wide Bold 32/46, JTL Dark Blue, tracking 0.64px
   (Figma node I351:6573;116:13070). Hide the theme's decorative orange
   underline `h2::after` (58×6px block) — Figma has no underline. */
body.page-id-322911 h2.post-slider-heading {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    color: #0b1b45;
    margin: 6px 0 46px;
}
body.page-id-322911 h2.post-slider-heading::after {
    display: none !important;
}

/* Swiper root — make position static so my absolutely-positioned nav arrows
   resolve against the parent .row (the Light-Sand panel) and end up at the
   bottom-right of the panel, not the bottom-right of the slider. overflow
   visible so the absolute nav buttons can sit outside the swiper bounds. */
body.page-id-322911 .swiper[id^="slider-"] {
    position: static;
    overflow: visible;
}

/* Each card — white body, rounded-24 corners, image fills the top.
   The widget renders `.swiper-slide > .card.h-100.border-0.mx-0.bg-transparent`. */
body.page-id-322911 .swiper[id^="slider-"] .swiper-slide .card {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden;
}
body.page-id-322911 .swiper[id^="slider-"] .card-img-top,
body.page-id-322911 .swiper[id^="slider-"] picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px 24px 0 0;
}
body.page-id-322911 .swiper[id^="slider-"] .card-body {
    padding: 24px !important;
    background-color: #ffffff;
}

/* Hide the legacy "Veröffentlicht am ..." date line — Figma doesn't show it. */
body.page-id-322911 .swiper[id^="slider-"] .card-body .small.text-muted {
    display: none !important;
}

/* Card title — Inter SemiBold 20/28, JTL Dark Blue. */
body.page-id-322911 .swiper[id^="slider-"] .card-body .h6 {
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    margin: 0 !important;
    display: block;
}
body.page-id-322911 .swiper[id^="slider-"] .card-body .h6 a {
    color: #0b1b45 !important;
}

/* ── Extended card body (card_extended="yes") ─────────────────────────────
   Adds the excerpt + "Mehr erfahren" link the Figma card has but the legacy
   widget didn't render. Template.php gates this behind the atts flag so the
   5 production BlogStandard pages keep their existing layout — only the
   demo page 322911 opts in.

   Figma structure (node I351:6573;351:6442 "Text-Area"):
     .card-body { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
       .post-card-textblock { display: flex; flex-direction: column; gap: 6px; }
         .post-card-title    (Inter SemiBold 20/28 Dark-Blue)
         .post-card-excerpt  (Inter Regular   16/24 Dark-Blue)
       .post-card-more       (justify-between; Inter Bold 16/24 Dark-Blue + arrow)
*/
body.page-id-322911 .swiper[id^="slider-"] .card-body:has(.post-card-textblock) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
body.page-id-322911 .swiper[id^="slider-"] .post-card-textblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Title inside the extended block — same typography as the legacy rule but
   drop the 3-line clamp; Figma title is allowed to wrap freely. */
body.page-id-322911 .swiper[id^="slider-"] .post-card-textblock .h6.post-card-title {
    margin: 0 !important;
    overflow: visible;
    -webkit-line-clamp: unset;
    display: block;
}
body.page-id-322911 .swiper[id^="slider-"] .post-card-excerpt {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    margin: 0;
}
/* "Mehr erfahren" row — Inter Bold 16/24 Dark-Blue label on the left, 46×28
   arrow wrapper on the right. Whole row is the post link so the whole strip
   is clickable. */
body.page-id-322911 .swiper[id^="slider-"] .post-card-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45 !important;
    text-decoration: none !important;
}
body.page-id-322911 .swiper[id^="slider-"] .post-card-more:hover .post-card-more-label {
    text-decoration: underline;
}
body.page-id-322911 .swiper[id^="slider-"] .post-card-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px;
    height: 28px;
    color: #0b1b45;
}
body.page-id-322911 .swiper[id^="slider-"] .post-card-more-arrow svg {
    display: block;
    width: 16px;
    height: 14px;
}

/* Swiper arrow nav — rounded-46 white pills with Dark-Blue chevrons,
   absolute-positioned at the bottom-right of the Light-Sand panel so they
   sit on the same row as the CTA (Figma: CTA-left + nav-right). Override
   the theme's orange FA chevron glyph. */
body.page-id-322911 .swiper-button-prev,
body.page-id-322911 .swiper-button-next {
    width: 46px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 46px;
    box-shadow: 0 1px 2px rgba(11, 27, 69, 0.04);
    position: absolute;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: auto;
    bottom: 46px;
    z-index: 2;
}
body.page-id-322911 .swiper-button-next { right: 46px; left: auto; }
body.page-id-322911 .swiper-button-prev { right: 116px; left: auto; }
body.page-id-322911 .swiper-button-prev::after,
body.page-id-322911 .swiper-button-next::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Pro", "FontAwesome", sans-serif;
    font-size: 14px;
    color: #0b1b45;
    font-weight: 900;
}
body.page-id-322911 .swiper-button-prev::after { content: "\f060"; }  /* fa-arrow-left */
body.page-id-322911 .swiper-button-next::after { content: "\f061"; }  /* fa-arrow-right */

/* "ALLE BEITRÄGE" outline button — Dark Blue border + text, pill, 12/24
   padding, Inter SemiBold 16/24 tracking 0.32px uppercase. */
body.page-id-322911 .post-slider-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    margin-top: 32px;
    border: 2px solid #0b1b45;
    border-radius: 145px;
    color: #0b1b45 !important;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none !important;
    width: max-content;
}
body.page-id-322911 .post-slider-cta:hover {
    background-color: #0b1b45;
    color: #ffffff !important;
}

/* Overline sits tight to the heading (Figma gap = 6px). */
body.page-id-322911 .overline-success {
    display: block;
    margin: 0;
}

/* Mobile — single column inside the rounded panel; smaller heading. */
@media (max-width: 767.98px) {
    body.page-id-322911 main > section {
        padding: 40px 16px;
    }
    body.page-id-322911 .container > .row {
        padding: 24px;
        border-radius: 32px;
    }
    body.page-id-322911 h2.post-slider-heading {
        font-size: 24px;
        line-height: 32px;
        margin: 6px 0 32px;
    }
}

/* =====================================================================   JP-425 — Page-Header live-widget restyle (rework of merged PR #67 / JP-369).
   Targets the production `.hero-product-section` rendered by the WPBakery
   composite on 158 live pages (e.g. /de/finanzbuchhaltung-software/,
   /de/shopware/, /de/shopify/, etc.). Source SCSS lives at
   `dump-clone/overlay/plugins/wpb-oop-widget-with-global/assets/scss/style.scss`
   but we layer the Figma-specific overrides here so the change ships without
   re-running the plugin's build step.

   Figma master: VSSY3wxlC31HrYDwwmHmrv node 374:7654 ("Page Header-Desktop 1440").

   Deferred (Phase 3, separate ticket):
     - Rounded-pill site nav  (theme-wide redesign — different DOM)
     - Custom-clipped photo  (live uses plain <picture> rectangle)
     - Breadcrumb visual tweaks  (theme-wide #nav-breadcrumb)
   ============================================================================ */

/* Scoped to `body:not(.home)` because the home page hero (JP-337, lines
   1308-1342 above) paints `.hero-product-section` Dark Blue and expects
   the title to render WHITE. PR #76 used `!important` to beat the theme's
   default `#333`, but that `!important` was overpowering the home page's
   non-!important white. The exclusion preserves PR #76's intent on the
   158 product-landing pages without breaking the homepage hero. */
body:not(.home) .hero-product-section {
    background-color: #eeeee7; /* JTL Light Sand band per Figma */
}

body:not(.home) .hero-product-section__content--title {
    color: #0b1b45 !important; /* JTL Dark Blue — theme h1 default is #333 */
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
}

/* JP-470 Page-Header eyebrow — Figma 374:7654 specifies Inter Semi-Bold,
   18 / 24 px, 5 % tracking (0.9 px). The live eyebrow node carries the
   `product-support-section__subtitle` class, so Text-3-Col's Kurdis 20 px
   rule wins by default — override it for hero-scoped eyebrows. */
body:not(.home) section.hero-product-section h2.product-support-section__subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    color: #2722f8 !important;
}

/* JP-470 Page-Header CTA pair — Figma 374:7654 primary (Orange-on-Dark-Blue)
   + secondary (bordered Dark Blue). NO markup change: if a page editor adds
   buttons via the existing ButtonsStandard widget, the rules below paint
   them per Figma. If the editor adds no buttons, nothing renders.
   - Primary  = `.has-wawi-gradient` (matches the convention the home hero
     already uses for its orange primary)
   - Secondary = the un-modified `.product-button-group__button--with-icon` */
body:not(.home) section.hero-product-section .product-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}
body:not(.home) section.hero-product-section .product-buttons-group a.product-button-group__button--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    /* Secondary (default) — transparent + 2px Dark Blue border, Dark Blue text */
    background-color: transparent !important;
    background-image: none !important;
    border: 2px solid #0b1b45 !important;
    color: #0b1b45 !important;
}
body:not(.home) section.hero-product-section .product-buttons-group a.product-button-group__button--with-icon.has-wawi-gradient {
    /* Primary — Orange fill, Dark Blue text, no border */
    background-color: #fb581f !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    color: #0b1b45 !important;
}
body:not(.home) section.hero-product-section .product-buttons-group a.product-button-group__button--with-icon:hover {
    filter: brightness(0.95);
}

/* JP-470 Fakten-Grid (.keyfacts-new) — Figma 248:2030 Update side.
   Live widget: section.product-management-section > .keyfacts-new__wrapper
   with 4 gradient-filled colored cards. JP-433/440 Box-Facts restyle never
   reached this variant (different markup family). Per-page request: keep
   ALL 4 stats but flatten them to Figma Update typography: 4-col row,
   Kurdis 39 px Tech Blue numbers + Inter Semi-Bold 14 px Dark Blue labels,
   no card backgrounds. Scope body:not(.home) so home's Box-Facts stays. */

/* — Stack the row: info card above + stats below, each spanning full width.
   Scoped to `:has(.keyfacts-new__wrapper)` so storytelling
   `.product-management-section` instances (Gründerjahre / Freeware / etc.)
   keep their original image-left + text-right side-by-side layout. */
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) > .container > .row > [class*="col-lg-6"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 32px;
}
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) > .container > .row > [class*="col-lg-6"]:last-child {
    margin-bottom: 0;
}

/* — Hide the icon-list (Name / Geschäftsführung / Branche / Bekanntestes
   Produkt / Standorte) — not in Figma Update. Keep the h2 "Über das
   Unternehmen" as the section title and centre it. Strip the Light Sand
   card chrome too so the title floats over the section's own Light Sand
   background like Figma's centred-panel layout. Scoped via `:has()` to the
   Fakten-Grid section only. */
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) .row.no-gutters .list-widget {
    display: none !important;
}
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) .row.no-gutters > [class*="pt-"] {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    text-align: center;
}
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) .row.no-gutters h2 {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.3 !important;
    color: #0b1b45 !important;
    text-align: center !important;
    margin: 0 auto 16px !important;
    max-width: 720px;
}
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) .row.no-gutters h2 .font-weight-normal,
body:not(.home) section.product-management-section:has(.keyfacts-new__wrapper) .row.no-gutters h2 .font-weight-bold {
    font-weight: inherit !important;
    color: inherit !important;
}

/* JP-470 Zitat / Testimonial-single — Figma 351:6725 "Quote-no-box".
   Live widget = section.testimonial-single-product-landing (per-page
   testimonial, different markup family from QuoteStandard the JP-83
   block above covers). CSS-only restyle bridges what Figma reachable
   without markup edits:
     - photo: oval pill (vs 20 px rounded rectangle)
     - SVG quote-mark gradient: Light Blue (vs Orange)
     - quote + attribution colour: JTL Dark Blue (vs theme grey #333)
   Out of scope here (needs editor to add to post_content):
     - "SUCCESS STORY" Tech Blue eyebrow
     - White company-logo pill + the second Light Blue secondary pill
     - Orange "JOIN THE JTL ECOSYSTEM" CTA button */

/* Strip the beige peach panel behind the quote text (#FFCC92) — Figma 351:6725
   sits the quote directly on the Light Sand section bg, no nested panel.
   Also kill the `position:relative; left:-35px` offset that originally pulled
   the beige panel back to overlap the photo (decorative only) — without the
   panel, the negative offset just makes the quote text bleed over the image. */
body:not(.home) section.testimonial-single-product-landing.orange .testimonial-single-content-block .testimonial-single-content-block__wrapper {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    left: 0 !important;
}

/* Add breathing room between photo (left) and content (right) — Figma has ~48 px gap. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block {
    padding-left: 48px;
}

/* JP-507: stretch the Success-Story quote wider so it reads on fewer lines and
   balances the avatar height. The widget caps the content block at 566px
   (full_image layout) which left the quote tall/narrow; widen to 820px.
   max-width (not width) → shorter quotes on other product pages just stay
   narrower, and line length stays capped on ultrawide screens. Desktop
   side-by-side layout only (≥1201px); the widget's stacked ≤1200 layout is
   untouched. Image height auto-tracks the content, so the columns stay
   height-balanced. */
@media (min-width: 1201px) {
    body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block {
        max-width: 820px;
    }
}

/* JP-470 typography normalisation — storytelling .product-management-section
   h2s use `Kurdis, "Kurdis Wide"` stack (asking for the regular cut as primary)
   while Hero h1 + Fakten h2 use `"Kurdis Wide Bold", "Kurdis Wide"` (asking for
   the wide-bold cut as primary). On staging/prod where both Kurdis variants
   are available these render differently — normalise to Kurdis Wide Bold per
   Figma deck rule 17. Scope excludes the Fakten-Grid section (already styled)
   and home (separate hero treatment). */
body:not(.home) section.product-management-section:not(:has(.keyfacts-new__wrapper)) h2.product-management-section__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
}

/* Inject "SUCCESS STORY" Tech Blue eyebrow above the quote text — Figma
   351:6725 has it. The live markup has no eyebrow element so it must be
   added via ::before. Hardcodes English copy in CSS; acceptable on this
   single-page testimonial. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block::before {
    content: "SUCCESS STORY";
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.7px; /* 5 % of 14 px */
    color: #2722f8;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* JP-507 (client feedback 2026-06-02, [GLOBAL]): the "JOIN THE JTL ECOSYSTEM"
   orange CTA pill was REMOVED from the product-landing Success-Story widget on
   all product pages, per client request ("Success Story widget: remove button
   on all product pages"). It was a cosmetic ::after placeholder (non-clickable,
   no href, untranslated) plus speculative styling for an optional real <a> pill
   — the widget's View (SingleTestimonial/Views/single_wrapper.php) emits no such
   anchor, so those rules were inert. The "SUCCESS STORY" ::before eyebrow above
   is intentionally KEPT. If the CTA is ever wanted back, restore from git
   history (this block) or rebuild from Figma 351:6725. */

/* JP-543 (client feedback 2026-06-02, [C08]): the quote-mark SVG icon recolour
   (orange → Light Blue via a hue-rotate filter) used to live here, scoped to
   product-landing testimonials only — which left other quote icons orange and
   themed sections shifted to different hues ("icon shown in different colors").
   It has been moved OUT of this shared file into the widget plugin SCSS
   (wpb-oop-widget-with-global/assets/scss/style.scss), applied to BOTH quote
   widgets (.testimonial-single-wrapper .quotes + .quote-widget) so the icon is
   consistently Light Blue everywhere. All quote-icon colour logic now lives
   with the widgets — see that file. */

/* Quote body — Dark Blue, slightly larger Inter for legibility */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text,
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text p {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 28px !important;
}

/* Attribution wrapper — kill the 43 px indent so name/title align with
   the paragraph (left) and the CTA pill (left), not pushed right. */
body:not(.home) section.testimonial-single-product-landing .user-data {
    margin-left: 0 !important;
}

/* Attribution name — Dark Blue Inter Bold */
body:not(.home) section.testimonial-single-product-landing .user-data__info-name {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

/* Attribution position — Dark Blue Inter Regular */
body:not(.home) section.testimonial-single-product-landing .user-data__info-position,
body:not(.home) section.testimonial-single-product-landing .user-data__info-position span,
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text__link {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-decoration: none !important;
}

/* — 4-col stat row (was 2×2 fixed-width grid set by inline `--columns` style).
   minmax(0, 1fr) keeps cells equal even when label text is long. */
body:not(.home) section.product-management-section .keyfacts-new__wrapper.grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 24px 32px !important;
    padding: 0 !important;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 767px) {
    body:not(.home) section.product-management-section .keyfacts-new__wrapper.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* — Flatten each card: no gradient bg, no shadow, NO colored border, no rounded chrome.
   Reset the inline `.utils-xxx { grid-column: X; grid-row: Y; }` cell placements
   so cards auto-flow into the 4-col row instead of staying in their original 2×2
   coordinates. */
body:not(.home) section.product-management-section .keyfacts-new__wrapper .keyfacts-container {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    text-align: center;
    color: #0b1b45 !important;
}

/* — Number: Kurdis Wide Bold, 39 px, Tech Blue, ~3 % tracking */
body:not(.home) section.product-management-section .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
body:not(.home) section.product-management-section .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > * {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 39px !important;
    line-height: 1 !important;
    letter-spacing: 1.17px !important;
    color: #2722f8 !important;
}

/* — Label: Inter Semi-Bold, 14 px, Dark Blue */
body:not(.home) section.product-management-section .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #0b1b45 !important;
    margin-top: 8px;
    display: block;
}

/* Theme paints an orange `h1::after` border-bottom underline with !important;
   Figma headline carries no underline. Suppress on every page (home included). */
.hero-product-section__content--title::after {
    display: none !important;
}

/* JP-438 cascade sweep — Einkauf page: hero H1 family, overline (subtitle
   above H1), list item size, and secondary button colour/border were all
   falling back to theme defaults on body:not(.home) pages.
   Figma master 374:7654 (scaled 1.44× from the 1000px deck preview). */

/* H1 — Kurdis Wide Bold (theme default is Inter on body:not(.home)). */
body:not(.home) .hero-product-section .hero-product-section__content--title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}

/* Overline above H1 — the WPBakery widget renders it as
   `h2.product-support-section__subtitle.text-uppercase.h3`, which inherits
   the theme's h3 (Kurdis Bold). Figma 374:7687 is Inter Semi Bold 18/24,
   Tech Blue, uppercase, letter-spacing 0.9px (Figma letterSpacing:5 = 5%
   of 12.5px deck size = 0.625px → 0.9px after ×1.44 scale). */
body:not(.home) .hero-product-section .product-support-section__subtitle {
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    color: #2722f8 !important;
}

/* List items — Figma 374:7694 is Inter Regular 20/28 (13.889 × 1.44 = 20). */
body:not(.home) .hero-product-section .list-icons li {
    font-size: 20px;
    line-height: 28px;
}

/* Secondary button — transparent bg + 1.4px Dark Blue border + Dark Blue
   text. Theme default leaves it as transparent w/ theme-grey #333 text and
   no border. The home rule above (line 1366) styles the inverse pair
   (Light Sand text + border) for the Dark Blue home hero. */
body:not(.home) .hero-product-section .product-buttons-group a.product-button-group__button--with-icon:not(.has-wawi-gradient) {
    background-color: transparent;
    border: 1.4px solid #0b1b45;
    color: #0b1b45;
    border-radius: 145px;
}
body:not(.home) .hero-product-section .product-buttons-group a.product-button-group__button--with-icon:not(.has-wawi-gradient) .product-button-group__button--with-icon__text {
    color: #0b1b45;
}

/* JP-438 (cont.) — issues found on /de/einkaufssoftware/ that also recur
   on other Sprint-2 product pages (JP-435..JP-445). All scoped narrowly. */

/* CTA-Box-small h2 inside the Dark Navy card on .product-support-section.
   The card has `.basic-card-widget.text-tertiary` (bg #142830). The
   existing section-scoped rule paints `.product-support-section__title`
   Dark Blue, which on Dark Navy reads as invisible. Override when nested
   inside the dark card. */
.product-support-section .basic-card-widget.text-tertiary .product-support-section__title,
.product-support-section .basic-card-widget.text-tertiary .product-support-section__title .font-weight-bold {
    color: #eeeee7 !important;
}

/* Orange CTA button (.has-wawi-gradient) — Figma spec is Dark Blue text on
   Orange bg, not white. JP-83 confirmed; the home hero rule sets it on
   that hero but the support-section / basic-card variants default to
   white from the plugin SCSS. Scope to the dark CTA-card so we don't
   break any orange button intentionally white elsewhere. */
.product-support-section .basic-card-widget a.product-button-group__button--with-icon.has-wawi-gradient,
.product-support-section .basic-card-widget a.product-button-group__button--with-icon.has-wawi-gradient .product-button-group__button--with-icon__text {
    color: #0b1b45 !important;
}

/* TabbedWidget h2 — Figma spec is Kurdis Wide Bold like every other h2.
   Plugin renders `h2.tabbed-widget__title` with theme Inter weight 700;
   swap the family. */
.tabbed-widget .tabbed-widget__title,
.tabbed-widget .tabbed-widget__title .font-weight-bold {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
}

/* LinkBoxen Tech-Blue band heading — same h2 family fix on the Tech Blue
   card. Figma 372:7097: white Kurdis Bold heading. Note: the plugin
   renders the heading as `div.chanel-heading__title` (sic — typo in
   plugin), not an h2. */
.product-payments-section.cross-chanel-product-landing .chanel-heading__title,
.product-payments-section.cross-chanel-product-landing h2 {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}

/* Accordion h2 — Kurdis is already loaded but weight resolves to 400.
   Bump to 700 (Bold) so it reads as a heading not body. */
.product-accordion-section .product-accordion-section__title {
    font-weight: 700 !important;
}

/* JP-435 cont. — three more cascade leaks surfaced on
   /de/warenwirtschaftssystem-software/ (sweep 2026-05-27). All widget-
   global so other pages using these components inherit the fix. */

/* Pricing card h2 (.dark-card-widget__title) — Figma 351:7269 spec is
   Kurdis Wide Bold white on Dark Blue card. Plugin renders it as
   Inter 600 28px white; family swap only. */
.dark-card-widget .dark-card-widget__title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}

/* image-with-list-widget h2 (used by CTA section-1570 and similar
   text+image+list compositions) — same Kurdis family swap. */
.image-with-list-widget .image-with-list-widget__title {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}

/* Testimonial single widget — quote text + author link in theme grey
   #333; Figma spec across all testimonial variants is Dark Blue. */
.testimonial-single .testimonial-single-text,
.testimonial-single .testimonial-single-text p,
.testimonial-single .testimonial-single-text__link {
    color: #0b1b45 !important;
}

/* JP-435 LinkBoxen card chrome (Figma 372:7098 "Link-Box-3er") — restyle
   each `.chanel-content` white card on the Tech Blue band:
   - Icon: 48x48 Dark Blue rounded square with white document-text glyph,
     inline in the heading row (currently a 17x22 Tech Blue FA glyph
     absolutely positioned in the corner).
   - "Mehr erfahren" text → Inter Bold 700 (was 400).
   - Orange right-arrow appended via ::after pseudo on the link wrapper. */
section.product-payments-section.cross-chanel-product-landing .chanel-content {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 20px !important;
    border-radius: 24px !important;
    position: relative;
}

/* New icon styling — hide the FA glyph and render the Figma
   vuesax/bold/document-text SVG (Dark Blue document shape with
   text-line cutouts) at the card's top-right corner. */
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__icon-deco {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
    background-color: transparent !important;
    background-image: url("images/jp435/linkboxen/document-text-white.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 36px 36px !important;
    border-radius: 0 !important;
    color: transparent !important;            /* hide the FA glyph color */
    font-size: 0 !important;                  /* collapse the FA glyph */
    line-height: 0 !important;
}
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__icon-deco::before {
    content: none !important;                 /* suppress FA glyph pseudo */
}

/* Heading area — leave room on the right for the icon. */
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__name {
    padding-right: 64px !important;
    height: auto !important;
}

/* Link wrapper — bottom row: "Mehr erfahren" bold + orange arrow at right. */
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__link-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__link {
    flex: 1 1 auto;
}
section.product-payments-section.cross-chanel-product-landing .chanel-content .content-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    text-decoration: none !important;
}
section.product-payments-section.cross-chanel-product-landing .chanel-content .content-link__title {
    font-family: "Inter", "Inter Bold", sans-serif !important;
    /* Weight 900 (Inter Black) — bumped from 700 (Bold) per user feedback
       that the 700 weight wasn't visually distinct enough on this widget. */
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
}
/* Append orange arrow via ::after on the link */
section.product-payments-section.cross-chanel-product-landing .chanel-content .content-link::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 13px;
    margin-left: auto;
    background-image: url("images/jp435/linkboxen/arrow-orange.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex: 0 0 auto;
}

/* Plugin paints a Unicode "→" text glyph on .chanel-content__link::after
   that would render alongside our SVG arrow. Suppress so only the proper
   Figma orange arrow shows. */
section.product-payments-section.cross-chanel-product-landing .chanel-content .chanel-content__link::after {
    content: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   JP-356 Video-Slider — SliderStandard.slider-success-stories restyle
   Figma 398:6038 "Video Slider-Desktop 1440" (Update side of deck 248:7338).
   ------------------------------------------------------------
   WIDGET scope: every SliderStandard rendering with class
   `slider-success-stories` (the production-side identifier for the
   Success Stories video slider). Originally JP-356 chained
   `.slider-success-stories.slider-stylized` and so only matched 2 pages
   (referenzen, case-studies); home /de/ + /en/ shipped the slider
   WITHOUT the `.slider-stylized` marker, so the home Video Slider
   stayed on the legacy Dark Navy `#142830` + Inter + orange-overlay
   chrome despite JP-356 being "done" for over a month.

   2026-05-26 DESCOPE (this commit): dropped the `.slider-stylized`
   marker requirement from every JP-356 selector. Same root cause as
   JP-341 / JP-440 / JP-435 — CSS pointed at a marker only some
   instances carry; the cascade then silently missed the rest. Per
   CLAUDE.md rule 17, this widget is dynamic content (video posts
   pulled from the CMS) — layout/chrome must match Figma but the
   slides themselves are whatever the editor authored.
   The cards are CardsWithHeaderAndLink wrapping a YouTubeStandard;
   the existing markup is preserved — every change is CSS only.
   The Figma "near-identical to Post-Slider" pattern lives here so
   JP-355 can reuse the same rule set under a sibling selector.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Outer panel: navy #0b1b45 with 46px radius (Figma frame I398:6038;116:12497).
   Scoped via :has() so the generic .decorated-container-wrapper colour stays
   intact for every other section using the same component.
   The DecoratedContainer plugin SCSS sets `.orange.black .decorated-container-inner
   .decorated-container-wrapper { background:#142830 }` — specificity (0,3,0). We
   beat it by chaining :has() onto each of the same ancestor classes — same chain
   specificity (0,3,0) — and add (0,2,0) from inside :has() to win the cascade. */
.orange.black .decorated-container-inner .decorated-container-wrapper:has(.slider-success-stories),
.orange.black .decorated-container-inner .decorated-container-wrapper:has(.slider-success-stories) .decorated-container {
    background-color: #0b1b45;
}
.decorated-container-wrapper:has(.slider-success-stories) {
    border-radius: 46px;
}

/* — Card chrome: cream body, 24px radius, no border, image clips top corners.
   Bootstrap utilities `.text-gray-333` and `.border-top-0` ship with
   !important, so colour/border overrides need !important too (CLAUDE.md #10). */
.slider-success-stories .card.card-header-link {
    background-color: #eeeee7;
    color: #0b1b45 !important;
    border-radius: 24px;
    overflow: hidden;
    border: 0 !important;
}

/* — .card-header now hosts BOTH the image and the heading flowing below it.
   The theme ships `.card-header-link .card-header { height: 300px }` (forcing
   the embed to fill the whole header and the heading to overflow under the
   card-body); reset to auto and let aspect-ratio carry the image height. */
.slider-success-stories .card.card-header-link > .card-header {
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    height: auto;
}

/* — YouTube embed inside slider cards: 16:9 aspect-ratio + square corners
   (the card's overflow:hidden + border-radius clips the top). */
.slider-success-stories .youtube-standard {
    border-radius: 0;
    background-color: #0b1b45 !important; /* poster fallback */
    aspect-ratio: 16 / 9;
    height: auto !important; /* override Bootstrap `.h-100` */
    width: 100% !important;
    position: relative;
}

/* — Play button (Figma I398:6038;347:5634): solid orange disc, white triangle.
   The existing .embed-play span carries Font Awesome's play-circle glyph; we
   suppress the glyph (font-size 0, override ::before content) and rebuild as
   a flex box hosting a CSS triangle. The inline `font-size: 35.5068px` on the
   span forces !important on our font-size reset. */
.slider-success-stories .embed-play.fa-play-circle {
    width: 64px !important;
    height: 64px !important;
    font-size: 0 !important;
    background-color: #fb581f;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}
.slider-success-stories .embed-play.fa-play-circle::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
    /* Optical centring: the triangle's visual centre is left of its bbox centre. */
    margin-left: 5px;
    font-size: 0; /* belt + braces in case FA re-injects a glyph */
}

/* — Title (.card-header-text): lift out of the absolute overlay and render
   as a 20px / 28px semibold heading flush with the cream body. */
.slider-success-stories .card-header-text {
    position: static;
    background-color: transparent;
    padding: 24px 24px 0;
    color: #0b1b45 !important;
}
.slider-success-stories .card-header-text .row {
    display: block;
}
.slider-success-stories .card-header-text .col {
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #0b1b45;
}

/* — Card body: cream bg, dark-blue 16px copy, with a "Mehr erfahren" link
   row injected via ::after (the whole card is the link, so this is a
   visual cue only — matches Figma node I398:6038;116:12741). The orange
   chevron arrow on the right is an inline SVG background-image so we
   stay CSS-only; the `display: block` + `background-position: right`
   puts the text on the left and the arrow flush to the card edge. */
.slider-success-stories .card.card-header-link > .card-body {
    background-color: transparent;
    color: #0b1b45 !important;
    padding: 8px 24px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
}
.slider-success-stories .card.card-header-link > .card-body > p:last-child {
    margin-bottom: 0;
}
.slider-success-stories .card.card-header-link > .card-body::after {
    content: "Mehr erfahren";
    display: block;
    margin-top: 16px;
    min-height: 24px;
    padding-right: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #0b1b45;
    letter-spacing: 0.32px; /* 2 % of 16 px, per Figma */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' fill='none'%3E%3Cpath d='M1 7H19M13 1L19 7L13 13' stroke='%23fb581f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 20px 14px;
}

/* — Belt-and-braces: kill any drop-shadow / text-shadow the theme may apply
   to the heading or card chrome (the user reported the title looked
   "shadowed" — strip every shadow inside the slider widget). */
.slider-success-stories .card,
.slider-success-stories .card-header,
.slider-success-stories .card-header-text,
.slider-success-stories .card-header-text *,
.slider-success-stories .card-body,
.slider-success-stories .card-body * {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* — The real source of the heading "shadow": the theme paints a
   `linear-gradient(... rgba(0,0,0,.59) 100%)` on `.card-header::before` to
   improve legibility of an absolute-positioned title overlaid on the image.
   We moved that title BELOW the image, so the gradient now bleeds onto the
   cream heading band as a dark shadow. Disable the pseudo for this slider. */
.slider-success-stories .card.card-header-link .card-header::before {
    content: none !important;
    background-image: none !important;
    display: none !important;
}

/* — Remove the orange-yellow square decoration (.decorated-container-square-overlay)
   that the `.orange` DecoratedContainer renders as a 64deg #FF9A26 → #FFC935
   gradient diamond. Scoped via :has() so other .orange sections keep theirs. */
.decorated-container-inner:has(.slider-success-stories) .decorated-container-square-overlay {
    display: none !important;
}

/* — Module title block (overline + heading + description) inside the navy panel.
   Figma node I398:6038;116:12499 / I398:6038;116:12500. The DecoratedContainer
   plugin paints the overline as an orange→yellow gradient via background-clip;
   we replace that with the Figma light-blue and re-spec the typography. Kurdis
   Wide Bold isn't loaded in this environment — Inter Bold serves as fallback
   (see CLAUDE.md note on Kurdis). Scoped via :has() so other DecoratedContainer
   instances retain their orange treatment. */
/* Plugin paints overline/title via a 4-class chain
   (`.orange .decorated-container-inner .decorated-container-wrapper
   .decorated-container-heading__over-title`) with !important. Chain the
   same ancestors here (specificity 5-6 vs their 4) to win cleanly even at
   tied source order, regardless of stylesheet load sequence. */
.orange.black .decorated-container-inner .decorated-container-wrapper:has(.slider-success-stories) .decorated-container-heading__over-title {
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #89d2ff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-427 Post-Slider — de-scope widget-styling rules from body.page-id-322911
   to .swiper[id^="slider-"] (the BlogStandard widget's actual rendered root).

   PR #69 (merged) correctly edited Blog/Standard/Template.php + Widget.php
   to inject the new markup globally, but every visual CSS rule above is
   page-id-322911-scoped, so 10 other live pages (releases ×2, paypal ×2,
   kaufland ×2, gemeinsam-online-handeln, dein-start-auf-amazon-polen,
   skalieren-und-wachsen-im-multichannel-e-commerce, whitepaper) get the
   new markup with NO Figma styling.

   This block re-applies the card-only / typography-only rules at widget
   scope so all pages auto-pick-up. Composition rules (Light-Sand panel,
   heading, nav arrows that anchor to the page panel, CTA, mobile panel)
   stay page-scoped above because they depend on a page wrapping the
   widget inside a specific .container > .row layout that the other 10
   pages don't share.
   ═══════════════════════════════════════════════════════════════════════════ */

.swiper[id^="slider-"] .swiper-slide .card {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden;
}
.swiper[id^="slider-"] .card-img-top,
.swiper[id^="slider-"] picture img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px 24px 0 0;
}
.swiper[id^="slider-"] .card-body {
    padding: 24px !important;
    background-color: #ffffff;
}

/* Hide the legacy "Veröffentlicht am ..." date line — Figma omits it. */
.swiper[id^="slider-"] .card-body .small.text-muted {
    display: none !important;
}

/* Card title — Inter SemiBold 20/28 Dark Blue. */
.swiper[id^="slider-"] .card-body .h6 {
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    margin: 0 !important;
    display: block;
}
.swiper[id^="slider-"] .card-body .h6 a {
    color: #0b1b45 !important;
}

/* Extended card body rules — only render when Template.php's
   card_extended="yes" flag is set, so legacy pages (no excerpt /
   no Mehr-erfahren link) keep their old layout untouched. */
.swiper[id^="slider-"] .card-body:has(.post-card-textblock) {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.swiper[id^="slider-"] .post-card-textblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.swiper[id^="slider-"] .post-card-textblock .h6.post-card-title {
    margin: 0 !important;
    overflow: visible;
    -webkit-line-clamp: unset;
    display: block;
}
.swiper[id^="slider-"] .post-card-excerpt {
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
    margin: 0 !important;
    -webkit-line-clamp: unset !important;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-420 Logo-Slider — restyle live OurPartnersSlider widget globally.
   Figma: VSSY3wxlC31HrYDwwmHmrv node 351:6770.

   Live widget: our_partners_slider_widget (JTL-EXT plugin) — 3 live pages
   including homepage /de/ (8 partner logos).
   Markup: .our-partner-slider-items-wrapper > .our-partner-slider.swiper
   > .swiper-wrapper > .swiper-slide (with .swiper-slide__name label +
   .swiper-slide__logo picture).
   ═══════════════════════════════════════════════════════════════════════════ */

.our-partner-slider-items-wrapper {
    padding: 32px 0;
}
.our-partner-slider.swiper {
    overflow: hidden;
}
.our-partner-slider-items.swiper-wrapper {
    align-items: stretch;
}
.our-partner-slider .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
}
.our-partner-slider .swiper-slide a {
    text-decoration: none !important;
    color: #0b1b45 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.our-partner-slider .swiper-slide__logo {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 16px;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(11, 27, 69, 0.04);
}
.our-partner-slider .swiper-slide__logo img,
.our-partner-slider .swiper-slide__logo picture {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.our-partner-slider .swiper-slide__name {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #0b1b45;
    margin: 0;
    text-transform: none;
}

@media (max-width: 767.98px) {
    .our-partner-slider .swiper-slide__logo {
        border-radius: 16px;
        padding: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-429 Video-big — opt-in `.video-big-band` marker class.

   PR #31 (merged) injected `.youtube-standard` globally via Widget.php → the
   24px-radius + orange play button reach all 299 live YouTubeStandard uses
   (correct). BUT the section-composition rules (light-sand band, 864px
   max-width, centred heading) were `body.page-id-322549`-scoped because
   YouTubeStandard appears in many contexts on production — inside sliders
   (.swiper-slide > .card-header on /de/referenzen/), columns, hilfecenter
   cards, etc. Promoting the band rules globally to `section:has(.youtube-
   standard)` would repaint every one of those parents with a sand band +
   crush in-card embeds with the 864px clamp + force-center every .h3/.h6
   in those sections (including unrelated headlines).

   Correct route: an opt-in marker class an editor adds to the WPBakery row
   when they want the "Video-big" full-band composition. The four
   body.page-id-322549 rules become .video-big-band rules. The widget's own
   visual treatment (radius, navy fallback, orange play) stays where it is
   — already global, already correct.

   Usage in WPBakery: set the row's `el_class` to `video-big-band` and the
   composition applies on any page. The demo page (322549) can opt in too.
   ═══════════════════════════════════════════════════════════════════════════ */
section.video-big-band,
.video-big-band > section,
.video-big-band {
    background-color: #eeeee7;
    padding: 80px 64px;
}
.video-big-band > .container,
section.video-big-band > .container {
    max-width: 864px;
}
.video-big-band .h3,
.video-big-band .h6 {
    text-align: center;
}
.video-big-band .youtube-standard,
.video-big-band .embed-responsive.youtube-standard {
    margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-351 Accordion mit Filter — restyle live SearchFilterStandard widget
   Figma: VSSY3wxlC31HrYDwwmHmrv node 382:15596 ("Accordion+Filter-Desktop 1440").

   Live page: /de/hilfecenter/webinare/ (post 85338, only page using
   [search_filter_standard ...] today).
   Authoritative markup: theme/jtl/search-filter/webinare.php +
     theme/jtl/page-templates/partials/webinare/item.php.

   Scope:
     #accordion-webinare         — hardcoded id in webinare.php (widget-stable)
     #webinare-rebuild-filter-section — page-stable id on post 85338's section row
     #webinare-rebuild-filter-nav     — page-stable id on the filter form host
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer section band — Light Sand 80/64 (Figma); page-stable id on 85338. */
#webinare-rebuild-filter-section {
    background-color: #eeeee7;
    padding: 80px 64px;
}

/* Eyebrow + title row at the top.
   IMPORTANT: the theme's default eyebrow style on `.product-support-section__subtitle`
   uses a gradient text effect (`background: linear-gradient(...)` + `background-clip: text`
   + `-webkit-text-fill-color: transparent`) to paint eyebrows orange-yellow. Plain
   `color: #2722f8` is invisible under that; we must also kill the gradient background
   AND force the webkit text-fill-color to the JTL Tech Blue. Use !important because
   the theme rule wins on specificity. */
#webinare-rebuild-filter-section h2.product-support-section__subtitle {
    margin: 0 0 12px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2722f8 !important;                       /* JTL Tech Blue */
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;
}
#webinare-rebuild-filter-section > .col-lg-12 > h2.mt-0,
#webinare-rebuild-filter-section h2.font-weight-normal {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 46px;
    letter-spacing: 0.64px;
    color: #0b1b45;          /* JTL Dark Blue */
    margin: 0;
}
#webinare-rebuild-filter-section h2.mt-0::after,
#webinare-rebuild-filter-section h2.font-weight-normal::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
}

.hero-product-section__content--text,
.hero-product-section__content--small-text {
    color: #0b1b45;
}
/* Filter pill row — SF Pro markup. */
#webinare-rebuild-filter-nav {
    margin: 32px 0 24px;
}
#webinare-rebuild-filter-nav form.searchandfilter > ul {
    display: flex;
    flex-wrap: wrap;
    /* Align by bottom edges so the search pill (no <h4> label above it) sits
       at the same baseline as the dropdown pills (which have a 37px h4 + 16px
       margin pushing them down inside their <li>). */
    align-items: flex-end;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#webinare-rebuild-filter-nav form.searchandfilter > ul > li {
    margin: 0;
    padding: 0;
}
#webinare-rebuild-filter-nav .chosen-container,
#webinare-rebuild-filter-nav select.sf-input-select {
    width: 250px !important;
}
#webinare-rebuild-filter-nav .chosen-container-single .chosen-single {
    box-sizing: border-box;
    height: 52px;
    padding: 12px 22px;
    background: #eeeee7;
    border: 2px solid #0b1b45;
    border-radius: 24px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
#webinare-rebuild-filter-nav .chosen-container .chosen-drop {
    border: 2px solid #0b1b45;
    border-radius: 24px;
    overflow: hidden;
}
/* Search-text pill — matches dropdown pills (250×52, dark-blue border on
   Light Sand, 24px radius). Theme defaults to white-bg 50×229 with 10px
   radius; override the input directly. Magnifying-glass icon is painted
   as a background-image on the right (the theme's separate <li class="sf-field-submit">
   is hidden — its tiny default submit button would clash with our pill). */
/* NOTE: the page-content CSS for post 85338 sets
   `#webinare-rebuild-filter-nav form li { flex: 0 0 229px !important; ... }`
   on EVERY <li> — so plain flex/width here loses. Use !important on the flex
   shorthand to override the 229 basis at the higher-specificity layer. */
#webinare-rebuild-filter-nav .sf-field-search {
    flex: 0 0 250px !important;
    width: 250px !important;
}
#webinare-rebuild-filter-nav .sf-field-search label {
    display: block;
    margin: 0;
    width: 100%;
}
#webinare-rebuild-filter-nav .sf-field-search input.sf-input-text {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 52px !important;
    padding: 12px 48px 12px 22px !important;
    background-color: #eeeee7 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230b1b45' stroke-width='2'><circle cx='9' cy='9' r='6'/><line x1='13.5' y1='13.5' x2='18' y2='18' stroke-linecap='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 20px 20px !important;
    border: 2px solid #0b1b45 !important;
    border-radius: 24px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
    box-shadow: none !important;
}
#webinare-rebuild-filter-nav .sf-field-search input.sf-input-text::placeholder {
    color: #0b1b45;
    opacity: 1;
}
#webinare-rebuild-filter-nav .sf-field-submit {
    display: none !important;
}

/* Accordion — hardcoded #accordion-webinare in webinare.php. */
#accordion-webinare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
}
#accordion-webinare .accordion-row {
    background: transparent;
    border-radius: 24px;
    border: 0;
    border-top: 1px solid #0b1b45;       /* hairline rule between rows */
    overflow: hidden;
}
#accordion-webinare .accordion-row:first-child {
    border-top: 1px solid #0b1b45;
}

/* Row header — Bootstrap collapse button (item.php line 15).
   Live structure: .col-lg-4 title + .col-lg-3 "On-Demand" + .col-lg-2 duration
   + .col speaker. */
#accordion-webinare .accordion-row > button.accordion-header.btn-link {
    width: 100%;
    padding: 24px 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0b1b45 !important;
    text-align: left;
    text-decoration: none !important;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}
#accordion-webinare .accordion-row > button.accordion-header.btn-link:hover,
#accordion-webinare .accordion-row > button.accordion-header.btn-link:focus {
    text-decoration: none !important;
    color: #0b1b45 !important;
}
#accordion-webinare .accordion-header > .col-lg-4 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
}
#accordion-webinare .accordion-header > .col-lg-3,
#accordion-webinare .accordion-header > .col-lg-2 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #2722f8;
}
#accordion-webinare .accordion-header > .col {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    margin: 0;
}
.swiper[id^="slider-"] .post-card-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45 !important;
    text-decoration: none !important;
}
.swiper[id^="slider-"] .post-card-more:hover .post-card-more-label {
    text-decoration: underline;
}
.swiper[id^="slider-"] .post-card-more-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 46px;
    height: 28px;
    color: #0b1b45;
}
.swiper[id^="slider-"] .post-card-more-arrow svg {
    display: block;
    width: 16px;
    height: 14px;
}
#accordion-webinare .accordion-header .fal {
    color: #0b1b45;
}
/* The +/× toggle icon is painted by `.accordion-header::after` (Font Awesome
   glyph) and the theme colors it orange (#ff9a26). The Figma asset is a thin
   crossing-lines SVG with stroke `#2722F8` (Tech Blue — the purple-blue used
   for the eyebrow and "45 Minuten" label), NOT Dark Blue. */
#accordion-webinare .accordion-row > button.accordion-header::after,
#accordion-webinare .accordion-row > button.accordion-header[aria-expanded="true"]::after {
    color: #2722f8 !important;
}

/* Expanded body — Inter Regular 16/24 Dark Blue + orange CTA. */
#accordion-webinare .accordion-row .accordion-body {
    padding: 0 0 24px;
    color: #0b1b45;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
#accordion-webinare .accordion-row .accordion-body strong,
#accordion-webinare .accordion-row .accordion-body b {
    font-weight: 700;
}
#accordion-webinare .accordion-row .accordion-body a.bordered-orange-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 2px solid #fb581f;
    border-radius: 999px;                     /* full pill */
    background: #fb581f;                      /* JTL Orange */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #0b1b45;
}

/* --- infobox (StepsStandard → white card) -------------------- */
.jtl-text-infobox .steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 40px;
    background: #fff;
    border-radius: 46px;
}

.jtl-text-infobox .steps-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;
    /* legacy steps space non-last rows with padding/margin to host the
       connector line; the redesign uses the flex `gap` on .steps */
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
}

/* icon column — shrink to the 32px icon */
.jtl-text-infobox .steps-icon {
    flex: 0 0 32px;
    width: 32px;
    max-width: 32px;
    min-height: 0;
    padding: 0;
}

/* drop the circular badge — plain icon */
.jtl-text-infobox .steps-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;             /* legacy inset shadow */
}

/* kill the legacy circle-badge + step connector-line decorations */
.jtl-text-infobox .steps-circle::before,
.jtl-text-infobox .steps-circle::after,
.jtl-text-infobox .steps-icon::before,
.jtl-text-infobox .steps-icon::after {
    display: none;
}

.jtl-text-infobox .steps-circle-inner {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;      /* legacy white fill */
    box-shadow: none;
}

.jtl-text-infobox .steps-circle-inner span {
    font-size: 28px;
    color: #0b1b45;
    /* render FontAwesome duotone icons as a solid Dark-Blue glyph
       (Figma uses solid icons, not the default two-tone look) */
    --fa-secondary-opacity: 1;
    --fa-secondary-color: #0b1b45;
}

/* content column */
.jtl-text-infobox .steps-content {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.jtl-text-infobox .steps-content .h4 {        /* item title */
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #0b1b45;
}

.jtl-text-infobox .steps-content p {          /* item description */
    margin: 0;
    border-radius: 145px;
    color: #fb581f !important;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none !important;
}
#accordion-webinare .accordion-row .accordion-body a.bordered-orange-link:hover {
    background-color: #fb581f;
    color: #ffffff !important;
}

/* Pagination — #webinare-rebuild-filter-section .mt-5 .pagination
   (Bootstrap-style emitted by getPaginatedLinks). */
#webinare-rebuild-filter-section .pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    height: 32px;
}
#webinare-rebuild-filter-section .pagination .page-item .page-link {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 0;
    border-radius: 20px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #0b1b45;
    padding: 0;
    text-decoration: none;
}
#webinare-rebuild-filter-section .pagination .page-item.active .page-link {
    background-color: #2722f8;
    color: #ffffff;
    font-weight: 700;
}
#webinare-rebuild-filter-section .pagination .page-item .page-link:hover {
    background-color: #e7e6df;
}
/* Dots (…) — no pill background, just inline text. */
#webinare-rebuild-filter-section .pagination .page-item .page-link.dots {
    background-color: transparent;
    width: auto;
    color: #0b1b45;
}
/* "Weiter" next link — Figma shows a 46×32 white pill with a thin right-arrow
   icon (line + arrowhead). The live markup is
   <a class="next page-link">Weiter <span></span></a>, so we hide the German
   label text and the empty inner <span>, then paint the arrow as a centered
   SVG background-image. SVG glyph chosen over Unicode → because the typographic
   arrow renders inconsistently across system fonts and doesn't match Figma's
   thin-line arrowhead style. */
#webinare-rebuild-filter-section .pagination .page-item .page-link.next {
    width: 46px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%230b1b45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='7' x2='15' y2='7'/><polyline points='10,2 15,7 10,12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 14px;
}
#webinare-rebuild-filter-section .pagination .page-item .page-link.next > span {
    display: none;
}

/* Mobile — stack the header row vertically, tighter section padding. */
@media (max-width: 991.98px) {
    #webinare-rebuild-filter-section {
        padding: 60px 24px;
    }
    #webinare-rebuild-filter-section > .col-lg-12 > h2.mt-0,
    #webinare-rebuild-filter-section h2.font-weight-normal {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.48px;
    }
    #webinare-rebuild-filter-nav form.searchandfilter > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    #webinare-rebuild-filter-nav .chosen-container,
    #webinare-rebuild-filter-nav select.sf-input-select {
        width: 100% !important;
    }
    /* On mobile the ul switches to flex-column → flex-basis becomes HEIGHT,
       so the desktop `flex: 0 0 250px` made the search li a 250×250 square.
       Reset to natural sizing and stretch across the column. */
    #webinare-rebuild-filter-nav .sf-field-search {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
    #accordion-webinare .accordion-row > button.accordion-header.btn-link {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }
    #accordion-webinare .accordion-header > .col-lg-4 {
        font-size: 16px;
        line-height: 22px;
    }
    #accordion-webinare .accordion-header > .col-lg-3,
    #accordion-webinare .accordion-header > .col-lg-2,
    #accordion-webinare .accordion-header > .col {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-428 Zitat — de-scope ONE colour-neutral rule (img.rounded blob) globally.

   PR #36 (merged) restyled QuoteOverlap. Its `blockquote.blockquote-overlap`
   marker rules are already global (good — applied by Widget.php). The rest
   of PR #36's CSS is `body.page-id-322555`-scoped because all 6 live
   QuoteOverlap pages render on DARK sections with WHITE text — a global
   Dark-Blue restyle would make their typography invisible.

   The ONLY rule that's colour-neutral and safe to promote is the photo
   shape — the "blob" `border-radius` + soft shadow. Promoting it globally
   gives all 6 live pages the Figma photo shape without changing any text
   colour. The other rules stay page-scoped; re-theming the 6 dark-bg
   pages individually is Phase 3 work (not a "de-scope" fix).

   Pages affected: /de/jetzt-wechseln-v/, /de/jetzt-wechseln-n/,
   /de/lagerverwaltungssystem-von-jtl/, /de/wechsel-zu-jtl/,
   /de/dein-start-auf-amazon-polen/, /de/plentyone-jtl-wechsel/
   ═══════════════════════════════════════════════════════════════════════════ */
blockquote.blockquote-overlap img.rounded {
    border-radius: 38% 62% 41% 59% / 53% 39% 61% 47% !important;
    box-shadow: 0 4px 16px rgba(11, 27, 69, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-364 Box-Facts — navy variant of the .box-facts BEM composition.
   Figma: VSSY3wxlC31HrYDwwmHmrv node 371:6038 ("Box-Facts-Desktop 1441",
   the Update side of deck 248:6857). Real widget composition:
     - HeadlineStandard + TextStandard wrapped in a vc_row tagged
       `.box-facts-section.box-facts-section--navy.box-facts-section--head`
     - 3 × CardsNumber (each carrying `.box-facts.box-facts--navy`) wrapped
       in a vc_row tagged `.box-facts-section.box-facts-section--navy.box-facts-section--grid`
   ------------------------------------------------------------
   Why the `--navy` modifier: the same `.box-facts*` BEM hooks also carry
   the JP-346 sand variant (centered text + transparent cards, Figma 83:9
   — see open PR #63). The two designs share semantic markup but render
   differently, so this block opts in via a `--navy` modifier instead of
   swallowing the namespace globally. Any production page that wants the
   navy stat-card composition adds `box-facts-section--navy` to its
   section `el_class` and `box-facts--navy` to each CardsNumber `el_class`.
   No page-id gating; no demo URL baked into shipped CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Outer panel: navy bg with 46 px rounding, constrained to 1312 px so
   the page light-sand bg shows on either side. Both --head and --grid
   sections paint navy and share the same horizontal frame; --head rounds
   the top, --grid rounds the bottom, and we kill the seam between them
   by zeroing the grid row's top margin. The two together render as one
   continuous panel. */
.box-facts-section--navy {
    background-color: #0b1b45;
    padding-left: 46px;
    padding-right: 46px;
    max-width: 1312px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 128px);
    box-sizing: border-box;
}
.box-facts-section--navy.box-facts-section--head {
    background-color: #0b1b45;       /* override JP-346 sand */
    padding-top: 46px;
    padding-bottom: 0;
    border-radius: 46px 46px 0 0;
    margin-top: 80px;
    text-align: left;                /* override JP-346 center */
}
.box-facts-section--navy.box-facts-section--grid {
    background-color: #0b1b45;       /* override JP-346 sand */
    padding-top: 32px;
    padding-bottom: 46px;
    border-radius: 0 0 46px 46px;
    margin-top: 0 !important;        /* close the seam between rows */
    margin-bottom: 80px;
}

/* Neutralise theme container/column padding inside the navy panel so the
   46 px panel padding is the only spacing around inner content. Without
   this, .vc_column-inner + .wpb_wrapper add ~64 px of vertical air that
   blows the intro-to-cards gap from the Figma 32 px to 160 px. */
.box-facts-section--navy > .container,
.box-facts-section--navy > .container > .row {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.box-facts-section--navy .vc_column-inner,
.box-facts-section--navy .wpb_wrapper,
.box-facts-section--navy .vc_column_container > .vc_column-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.box-facts-section--navy p {
    margin-bottom: 0;
}

/* — Head typography on navy (light-blue overline, light-sand heading + intro).
   Specificity bumped past JP-346's sand-variant typography by chaining the
   --navy section modifier in front of the head class. */
.box-facts-section--navy .box-facts-overline,
.box-facts-section--navy .box-facts-overline * {
    color: #89d2ff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important; /* 5 % of 18 px */
    text-transform: uppercase !important;
}
.orange.black .decorated-container-inner .decorated-container-wrapper:has(.slider-success-stories) .decorated-container-heading__title {
    color: #eeeee7 !important;
    font-family: 'Kurdis Wide Bold', 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important; /* 2 % of 32 px */
}
.orange.black .decorated-container-inner .decorated-container-wrapper:has(.slider-success-stories) .decorated-container-heading__description {
    color: #eeeee7 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

/* — Slider gap: 32px between slides (Figma) instead of the Swiper-config 30. */
.slider-success-stories .swiper-slide {
    margin-right: 32px !important;
}

/* — Navigation arrows: white pill (46×32, radius 20) pulled down to sit on
   the same horizontal band as the "Alle Success Stories" CTA at the bottom
   of the panel (Figma puts arrows + CTA on one row). The arrows live inside
   .swiper, so we anchor with bottom:-Xpx to overflow past the slider and
   land in the CTA row. z-index lifts them above any sibling that overlaps.
   The JTL-EXT plugin uses !important on `.slider-stylized` padding and on
   prev/next `background`, `width`, `height`, `left/right` — every override
   here needs !important to win that cascade. */
.slider-success-stories.swiper {
    position: relative;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    /* Default `.swiper { overflow: clip }` from Swiper v6 clips the prev/next
       buttons we anchor at `bottom: -112px`. Allow vertical overflow but
       keep horizontal clipping intact (slide masking depends on it). */
    overflow-x: clip;
    overflow-y: visible;
}
.slider-success-stories .swiper-button-prev,
.slider-success-stories .swiper-button-next {
    position: absolute;
    top: auto !important;
    bottom: -112px !important; /* desktop: aligned with CTA row */
    width: 46px !important;
    height: 32px !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 14px !important;
    border-radius: 20px !important;
    color: #0b1b45;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.slider-success-stories .swiper-button-next {
    /* The theme's `.swiper-navigation-outside .swiper-button-next { left:100% }`
       rule offsets next by ~23px past .swiper's right edge — added padding
       brings the visible pill back inside the navy panel. */
    right: 24px !important;
    left: auto !important;
    /* Figma arrow asset (node I398:6038;351:6356;351:6339) — solid filled
       right-arrow, viewBox 16×14, fill #0B1B45. Exact path copied from the
       Figma SVG export. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M0 6.04942H12.9312L8.74512 1.62255C8.39418 1.25132 8.39412 0.649562 8.74512 0.27837C9.09613 -0.0928221 9.66515 -0.0927578 10.0162 0.27837L15.7367 6.32791C16.0878 6.69914 16.0878 7.30087 15.7367 7.67209L10.0162 13.7216C9.66515 14.0928 9.09613 14.0928 8.74512 13.7216C8.39412 13.3504 8.39418 12.7487 8.74512 12.3775L12.9312 7.95058H0V6.04942Z' fill='%230B1B45'/%3E%3C/svg%3E") !important;
}
.slider-success-stories .swiper-button-prev {
    right: 94px !important; /* 24 (next offset) + 46 (next width) + 24 (Figma gap) */
    left: auto !important;
    /* Same SVG, but the whole pill is flipped horizontally via CSS so the
       arrowhead points left. Rounded pill is symmetric — only the inner
       arrow visually mirrors. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M0 6.04942H12.9312L8.74512 1.62255C8.39418 1.25132 8.39412 0.649562 8.74512 0.27837C9.09613 -0.0928221 9.66515 -0.0927578 10.0162 0.27837L15.7367 6.32791C16.0878 6.69914 16.0878 7.30087 15.7367 7.67209L10.0162 13.7216C9.66515 14.0928 9.09613 14.0928 8.74512 13.7216C8.39412 13.3504 8.39418 12.7487 8.74512 12.3775L12.9312 7.95058H0V6.04942Z' fill='%230B1B45'/%3E%3C/svg%3E") !important;
    transform: scaleX(-1);
}
/* Kill the inherited Font Awesome chevron pseudo so it doesn't overlay
   our background SVG (the JTL-EXT plugin paints `content:"\F060"` /
   `"\F178"` in FA 6 Pro). */
.slider-success-stories .swiper-button-prev::after,
.slider-success-stories .swiper-button-next::after {
    content: none !important;
    display: none !important;
}

/* — Mobile: the CTA renders full-width below the slider, so the desktop
   "arrows-overflow-into-CTA-row" trick collides with it. Place arrows on
   their own row above the CTA and centre them, matching the original
   mobile stacking (cards → arrows → CTA). */
@media (max-width: 767px) {
    .slider-success-stories.swiper {
        padding-bottom: 64px !important;
    }
    .slider-success-stories .swiper-button-prev,
    .slider-success-stories .swiper-button-next {
        bottom: 16px !important;
    }
    .slider-success-stories .swiper-button-next {
        right: calc(50% - 51px) !important; /* 46/2 + 24/2 + 4 */
    }
    .slider-success-stories .swiper-button-prev {
        right: calc(50% + 5px) !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
    background: none !important;
    -webkit-text-fill-color: #89d2ff !important;
    text-align: left;
}
}
.box-facts-section--navy h2.box-facts-heading,
.box-facts-section--navy .box-facts-heading,
.box-facts-section--navy .box-facts-heading * {
    color: #eeeee7 !important;
    /* Figma uses Kurdis Wide Bold (paid Pangram Pangram Foundry); not loaded
       in this environment. Inter ExtraBold (800) at 32/40 with 0.64 px
       tracking is the closest local approximation. Kurdis is listed first
       in the family stack so it auto-overrides once the webfont ships. */
    font-family: 'Kurdis Wide', Kurdis, 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    letter-spacing: 0.64px !important;
    margin: 0 0 24px !important;
    max-width: 812px;
    text-align: left;
}
.box-facts-section--navy .box-facts-heading::after {
    display: none !important;
    content: none !important;
}
.box-facts-section--navy .box-facts-intro,
.box-facts-section--navy .box-facts-intro * {
    color: #eeeee7 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    max-width: 812px;
    margin: 0;
    text-align: left;
}

/* — Cards: white box, 24 px radius/padding, flex column with the CTA row
   anchored to the bottom via justify-between + margin-top:auto. Override
   the JP-346 sand variant's transparent/centered/border-0 treatment. */
.card.box-facts--navy {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 24px;
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;                    /* equal-height columns in the flex row */
    text-align: left;                /* override JP-346 center */
}
.card.box-facts--navy .card-body {
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.card.box-facts--navy .card-body > p {
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* — Stat headline (purple): 36/40 Inter Semibold. Figma reserves an 80-px
   row so all three cards align their body/CTA on the same baseline
   regardless of stat string length. Overrides JP-346's 56-px centered stat. */
.box-facts--navy .box-facts__stat {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0;
    color: #2722f8;
    min-height: 80px;
    margin: 0 0 24px;
    text-align: left;
}
.box-facts--navy .box-facts__body {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0b1b45;
}

/* --- responsive --------------------------------------------- */
@media (max-width: 1199px) {
    .jtl-text-infobox {
        padding: 64px 48px;
    }
}

@media (max-width: 991px) {
    .jtl-text-infobox .row {
        flex-direction: column;
        gap: 40px;
    }
    .jtl-text-infobox .row > .col:first-child,
    .jtl-text-infobox .row > .col:last-child {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .jtl-text-infobox {
        padding: 40px 20px;
    }
    .jtl-text-infobox h2.h2 {
        font-size: 26px;
        line-height: 34px;
    }
    .jtl-text-infobox .row > .col:first-child > p {
        font-size: 16px;
        line-height: 24px;
    }
    .jtl-text-infobox .steps {
        padding: 28px;
        border-radius: 32px;
    }
    min-height: 80px;
    margin: 0 0 16px;
    text-align: left;
}
.box-facts--navy .box-facts__source {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #0b1b45;
    margin: 0 0 24px;
    text-align: left;
}
.box-facts--navy .box-facts__source a {
    color: #0b1b45;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* — "Mehr erfahren" CTA row: bold dark-blue label + orange chevron. The
   chevron is an inline SVG anchored right via ::after. Overrides JP-346's
   orange pill-button treatment of `.box-facts__cta`. */
.box-facts--navy .box-facts__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 32px 0 0;
    background: transparent;
    border-radius: 0;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
}
.box-facts--navy .box-facts__cta::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' fill='none'%3E%3Cpath d='M1 7H19M13 1L19 7L13 13' stroke='%23fb581f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

/* — Equal-height card stretch: WPBakery's .vc_column_container doesn't
   stretch by default. Force the inner chain to fill column height so
   .card.box-facts--navy can rely on height: 100%. */
.box-facts-section--navy.box-facts-section--grid .vc_column_container,
.box-facts-section--navy.box-facts-section--grid .vc_column_container > .vc_column-inner,
.box-facts-section--navy.box-facts-section--grid .vc_column_container > .vc_column-inner > .wpb_wrapper {
    height: 100%;
}

/* — Mobile (≤767 px): stack cards full-width, soften the outer radius,
   relax the rigid 80-px reserved rows so stacked cards size to content. */
@media (max-width: 767px) {
    .box-facts-section--navy {
        padding-left: 24px;
        padding-right: 24px;
    }
    .box-facts-section--navy.box-facts-section--head {
        padding-top: 32px;
        border-radius: 24px 24px 0 0;
        margin-top: 32px;
    }
    .box-facts-section--navy.box-facts-section--grid {
        padding-bottom: 32px;
        border-radius: 0 0 24px 24px;
        margin-bottom: 32px;
    }
    .box-facts-section--navy.box-facts-section--grid .row {
        flex-direction: column;
        gap: 24px;
    }
    .box-facts-section--navy.box-facts-section--grid .col {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .box-facts-section--navy h2.box-facts-heading,
    .box-facts-section--navy .box-facts-heading,
    .box-facts-section--navy .box-facts-heading * {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .box-facts--navy .box-facts__stat {
        min-height: 0;
        margin-bottom: 16px;
    }
    .box-facts--navy .box-facts__body {
        min-height: 0;
        margin-bottom: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-416 Link-Boxen — restyle live WawiPanels widgets globally.
   Figma: VSSY3wxlC31HrYDwwmHmrv node 372:7097 / mobile 73:3117.

   Live widget: wawi_panels_widget + wawi_panels_item (JTL-EXT plugin).
   8 live pages: /de/warenwirtschaftssystem-software/jtl-wawi-download/,
   /de/jobs/, /de/jtl-meetup-kaufland/, /de/startseite-redesign/,
   /en/careers/, /en/erp-software-from-jtl-smart-solutions-for-ecommerce/,
   plus translations.
   ═══════════════════════════════════════════════════════════════════════════ */

section.wawi-panels-section {
    background-color: #2722f8;       /* JTL Tech Blue band per Figma */
    border-radius: 46px;
    padding: 64px;
    margin: 32px auto;
    max-width: 1312px;
}
section.wawi-panels-section h2.wawi-panels-section__title {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #ffffff !important;
    text-align: center;
    margin: 0 0 32px !important;
}
section.wawi-panels-section h2.wawi-panels-section__title::after {
    display: none !important;
    content: none !important;
}

div.wawi-panels-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

div.wawi-panels-widget__item {
    box-sizing: border-box;
    flex: 1 1 calc((100% - 48px) / 3);   /* 3 columns with 24px gap */
    min-width: 280px;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 32px;
    text-align: left;
}
a.wawi-panels-widget__item--link.no-icon {
    display: block;
    text-decoration: none !important;
    color: #0b1b45 !important;
}
a.wawi-panels-widget__item--link.no-icon .wawi-panels-widget__item--title,
a.wawi-panels-widget__item--link.no-icon .wawi-panels-widget__item--content {
    color: #0b1b45;
}

h5.wawi-panels-widget__item--title {
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    margin: 0 0 12px !important;
}
p.wawi-panels-widget__item--content {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #0b1b45;
    margin: 0;
}

@media (max-width: 991.98px) {
    section.wawi-panels-section {
        padding: 40px 24px;
        border-radius: 32px;
        margin: 24px;
    }
    section.wawi-panels-section h2.wawi-panels-section__title {
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.48px !important;
    }
    div.wawi-panels-widget__item {
        flex: 1 1 100%;
        padding: 24px;
    }
}

/* JTL theme has a global rule pushing #content into white. Keep light-sand
   visible directly under our section. The body-level rule earlier in this
   file already handles the page-template-product-landing background. */
/* ═══════════════════════════════════════════════════════════════════════════
   JP-370 Text-Boxen — Fresh-Up restyle (Figma 382:15846 Box-grid-ohneBild)
   ------------------------------------------------------------
   WIDGET scope: any `wawi_panels_widget` tagged `text-boxen-update` via the
   widget's `class` shortcode attribute. The live /jobs/ page also uses
   wawi_panels_widget (without that class) so the scope keeps its existing
   styling untouched. The cards inside hold an optional `.text-boxen-list`
   for the checklist pattern from the Figma update.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Outer section: light-sand bg, centred content, 80 px vertical padding.
   Only paints on the demo page so it can't affect the live /jobs/ page
   wrapping. */
body.page-id-322792 {
    background-color: #eeeee7;
}
body.page-id-322792 #app,
body.page-id-322792 #content {
    background-color: transparent;
}
.text-boxen-section {
    background-color: #eeeee7;
    padding: 80px 64px;
    margin: 0;
}
/* Theme's `.container { padding: 64px 0 }` adds dead space inside the row;
   strip it. */
.text-boxen-section > .container,
.text-boxen-section > .container > .row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.text-boxen-section .vc_column-inner,
.text-boxen-section .wpb_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* — Title block (overline + heading + intro): centred per Figma's Text-Area
   instance (gap 24 between heading and intro, gap 6 inside overline+heading). */
.text-boxen-overline,
.text-boxen-overline * {
    display: block;
    color: #2722f8 !important;
    background: none !important;
    -webkit-text-fill-color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: center;
    margin: 0 0 6px !important;
}
.text-boxen-heading,
.text-boxen-heading * {
    color: #0b1b45 !important;
    /* Kurdis Wide Bold isn't loaded — Inter ExtraBold is the closest
       local approximation. See JP-356/JP-364 notes. */
    font-family: 'Kurdis Wide Bold', 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    text-align: center;
    margin: 0 0 24px !important;
    max-width: 864px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* The theme paints an orange 58×6 `::after` underline on every H2
   (`border-bottom: 6px solid #F68B25`). Figma has no underline — kill it. */
.text-boxen-heading::after,
.text-boxen-heading::before {
    content: none !important;
    border: 0 !important;
    background: none !important;
    display: none !important;
}
.text-boxen-intro,
.text-boxen-intro * {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-align: center;
    max-width: 864px;
    margin: 0 auto 46px !important;
}
.text-boxen-section p {
    margin-bottom: 0;
}

/* — Cards container: flex row with 32 px gap (Figma Boxes container) */
.wawi-panels-widget.text-boxen-update {
    display: flex;
    gap: 32px;
    align-items: stretch;
    width: 100%;
    background: transparent !important;
    padding: 0;
}

/* — Each card: white, 24 px radius, 24 px padding, flex column gap 16
   (matches Figma `Box`). */
.wawi-panels-widget.text-boxen-update .wawi-panels-widget__item {
    flex: 1 1 0;
    min-width: 0;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 0;
}

/* — Card title: 16/24 Inter Regular dark-blue */
.wawi-panels-widget.text-boxen-update .wawi-panels-widget__item--title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0b1b45;
    margin: 0;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* — Checklist: orange arrow chevron before each `<li>` (the Figma uses
   the same arrow asset as the slider/Mehr-erfahren rows). Replaces the
   default `<ul>` bullet. */
.text-boxen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.text-boxen-list li {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 12px;
    align-items: start;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0b1b45;
}
.text-boxen-list li::before {
    content: "";
    display: block;
    width: 16px;
    height: 14px;
    margin-top: 5px; /* optical alignment with the 24-px line-height */
    /* Figma arrow asset (node I382:15846;116:11890), fill #2722F8 tech-blue.
       Exact path from the SVG export. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.81 10.23' fill='none'%3E%3Cpath d='M11.6022 5.60491C11.8734 5.33371 11.8734 4.89401 11.6022 4.62281L7.18274 0.203398C6.91154 -0.0677998 6.47184 -0.0677997 6.20065 0.203398C5.92945 0.474596 5.92945 0.914293 6.20065 1.18549L10.129 5.11386L6.20065 9.04223C5.92945 9.31343 5.92945 9.75313 6.20065 10.0243C6.47185 10.2955 6.91154 10.2955 7.18274 10.0243L11.6022 5.60491ZM0 5.11386L0 5.80831L11.1111 5.80831L11.1111 5.11386L11.1111 4.41942L0 4.41942L0 5.11386Z' fill='%232722F8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* — Mobile (≤767px): single-column stack with 24 px between cards. */
@media (max-width: 767px) {
    .text-boxen-section {
        padding: 40px 24px;
    }
    .text-boxen-heading,
    .text-boxen-heading * {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .wawi-panels-widget.text-boxen-update {
        flex-direction: column;
        gap: 24px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
   JP-415 Fakten-Grid — restyle real widget composition via .box-facts BEM.
   Figma: VSSY3wxlC31HrYDwwmHmrv nodes 83:9 (desktop) / 83:49 (mobile).

   Live composition uses real WP widgets via WPBakery `el_class`:
     - .box-facts-section.box-facts-section--head  outer head band
       (HeadlineStandard `.box-facts-overline` + `.box-facts-heading`
       + TextStandard `.box-facts-intro`)
     - .box-facts-section.box-facts-section--grid  3-col stat row
       (3 × CardsNumber `.box-facts` containing TextStandard
       `.box-facts__stat | __body | __source | __cta`)
   Selectors are page-stable BEM emitted by editors via el_class on real
   widgets — page using composition today is /jp-364-box-facts-preview/
   (canonical reference). Other pages can adopt by adding the same el_class.
   ═══════════════════════════════════════════════════════════════════════════ */

.box-facts-section--head {
    background-color: #eeeee7;       /* JTL Light Sand */
    padding: 80px 64px;
    text-align: center;
}
.box-facts-section--head > .container,
.box-facts-section--head .box-facts-overline + h2,
.box-facts-section--head .box-facts-heading {
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
}
.box-facts-overline {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2722f8;                  /* JTL Tech Blue */
    margin: 0 0 8px;
}
h2.box-facts-heading,
.box-facts-heading {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
    margin: 0 0 24px !important;
}
.box-facts-heading::after {
    display: none !important;
    content: none !important;
}
.box-facts-intro {
    font-family: Inter, sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
    margin: 0 auto 0;
    max-width: 864px;
}

.box-facts-section--grid {
    background-color: #eeeee7;
    padding: 0 64px 80px;
}
.box-facts-section--grid > .container > .row {
    gap: 32px 0;
}
.box-facts {
    background: transparent;
    border: 0;
    text-align: center;
    padding: 0 16px;
}
.box-facts__stat {
    display: block;
    font-family: "Kurdis Test Wide", "Kurdis Wide", Kurdis, Inter, sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 42px;
    letter-spacing: 1.68px;
    color: #2722f8;                  /* JTL Tech Blue */
    margin: 0 0 16px;
}
.box-facts__body {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
    margin: 0;
}
.box-facts__source {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #767676;
    margin: 8px 0 0;
}
.box-facts__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    margin-top: 16px;
    border-radius: 145px;
    background-color: #fb581f;       /* JTL Orange */
    color: #0b1b45 !important;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none !important;
}

@media (max-width: 767.98px) {
    .box-facts-section--head,
    .box-facts-section--grid {
        padding-left: 24px;
        padding-right: 24px;
    }
    .box-facts-section--head { padding-top: 60px; padding-bottom: 0; }
    .box-facts-section--grid { padding-bottom: 60px; }
    h2.box-facts-heading,
    .box-facts-heading {
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.48px !important;
    }
    .box-facts-intro {
        font-size: 18px;
        line-height: 28px;
    }
    .box-facts__stat {
        font-size: 52px;
        line-height: 60px;
        letter-spacing: 1.56px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-413 Logo-Box — restyle live CompaniesGallery widget
   Figma: VSSY3wxlC31HrYDwwmHmrv node 374:7373 ("Logo-Box-Desktop 1440").

   Live widget: CompaniesGallery (JTL-EXT plugin) — shortcode
   [companies_gallery] — 20 live pages (finanzbuchhaltung-software,
   shop-software, pos-system, jtl-warenwirtschaft-cloud, jtl-cloud-erp,
   shopware, shopify, woocommerce, etc.). Widget renders a Swiper.js
   carousel with .product-payments-section__gallery-item slides; logo
   counts per page vary 4–14, so a fixed 3×2 CSS grid would BREAK pages
   with >6 logos. Keep the Swiper carousel — restyle each slide as a
   Figma white rounded tile + apply panel decorations to the wrapping
   .product-payments-section.

   Section wrapper (.product-payments-section) is a column class set via
   WPBakery `advanced` attr on the surrounding [vc_row], not the widget
   itself — that means the panel restyle reaches the section, while the
   per-tile chrome reaches every CompaniesGallery instance regardless of
   wrapper.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Per-tile Figma chrome — global on every CompaniesGallery instance. */
.product-payments-section__gallery-item {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(11, 27, 69, 0.04);
}
.product-payments-section__gallery-item img,
.product-payments-section__gallery-item picture {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.product-payments-section__gallery-item--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

/* Panel restyle — Light Blue background. Some live pages wrap
   CompaniesGallery in a .container-product-payments-card.card with
   an injected <style> background-image; we override the bg-color
   while leaving the background-image untouched (some pages use it
   for decorative overlay). */
.container-product-payments-card.card {
    background-color: #b1d8f6;        /* JTL Light Blue from Figma */
    border-radius: 46px;
    border: 0;
    overflow: hidden;
    padding: 0;
}

/* Gallery column spacing — give the tile row breathing room inside
   the panel. */
.product-payments-section__gallery {
    padding: 32px;
}

/* Headline column (sibling of gallery) — Kurdis title per Figma.
   headline per Figma. The h2 already exists; just enforce typography. */
.product-payments-section__title,
.product-payments-section .product-payments-section__title {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
    padding: 32px !important;
    margin: 0 !important;
}
.product-payments-section__title::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
}

/* Mobile (≤767px) — tighter padding. */
@media (max-width: 767.98px) {
    .container-product-payments-card.card {
        border-radius: 32px;
    }
    .product-payments-section__title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: 0.48px;
        padding: 24px;
    }
    .product-payments-section__gallery {
        padding: 16px 24px 24px;
    }
    .product-payments-section__gallery-item {
        padding: 12px;
        border-radius: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-414 Infoboxen — restyle live CardsStandard CTA variant (CTA-Box-small).
   Figma: VSSY3wxlC31HrYDwwmHmrv node 248:6559.

   Live widget: CardsStandard (jtl-pagebuilder) — shortcode [cards_standard].
   The CTA-Box-small variant emits `.card.bg-secondary.text-center` with a
   centered button inside `.card-body`. Live sample: /de/quickstart-onlinehandel/
   "Jetzt Beratungstermin vereinbaren!" card (1 of 150 CardsStandard uses;
   `:has()` narrows to CTA-shaped ones).

   Scope is intentionally narrow — only cards that ARE a CTA (bg-secondary +
   text-center + contain a button) get the Figma restyle. Other CardsStandard
   uses on the 150 live pages stay as-is.
   ═══════════════════════════════════════════════════════════════════════════ */

.card.bg-secondary.text-center:has(.card-body a[class*="btn"]),
.card.bg-secondary.text-center:has(.card-body .product-button-group__button--with-icon) {
    background-color: #ffffff !important;        /* white, beats theme bg-secondary */
    border: 0 !important;
    border-radius: 46px !important;
    padding: 80px 64px !important;
    box-shadow: 0 1px 2px rgba(11, 27, 69, 0.04);
    color: #0b1b45 !important;
}

.card.bg-secondary.text-center:has(.card-body a[class*="btn"]) .card-title,
.card.bg-secondary.text-center:has(.card-body a[class*="btn"]) h2,
.card.bg-secondary.text-center:has(.card-body a[class*="btn"]) h3 {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
    margin: 0 0 16px !important;
}

.card.bg-secondary.text-center:has(.card-body a[class*="btn"]) .card-body p,
.card.bg-secondary.text-center:has(.card-body a[class*="btn"]) .card-body {
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #0b1b45;
}

@media (max-width: 767.98px) {
    .card.bg-secondary.text-center:has(.card-body a[class*="btn"]) {
        padding: 48px 24px !important;
        border-radius: 32px !important;
    }
    .card.bg-secondary.text-center:has(.card-body a[class*="btn"]) .card-title,
    .card.bg-secondary.text-center:has(.card-body a[class*="btn"]) h2,
    .card.bg-secondary.text-center:has(.card-body a[class*="btn"]) h3 {
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.48px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 2 CASCADE RESTORE  —  May 2026 audit
   ───────────────────────────────────────────────────────────────────────────
   Multi-PR audit confirmed three real cascade gaps in the Phase 2 widget
   restyle wave. Each block below rescopes a demo-only design onto its real
   live-widget selectors so the Figma look lands on production. The original
   demo CSS blocks are kept intact (no regression on the preview pages).

   Audit verdicts (see PR body for full table):
     ✅ FIX  — JP-424 Partner  (rework of merged #52 / JP-368): live
              `.partner-tabs-widget` on /de/partner-suchen/ rendered in
              theme-default greys with old underline tabs.
     ✅ FIX  — JP-422 Roadmap  (rework of merged #56 / JP-365): live
              `.numbered-list-widget__item` chain on 8 pages incl.
              /de/ki/agentic-commerce/ rendered in theme-default greys.
     ✅ FIX  — JP-416 ↔ JP-341 conflict: JP-416's section-wide chrome was
              bleeding `border-radius: 46px` and `max-width: 1312px` into
              JP-341's homepage Linkboxen-mit-Bild band.
     ⏭  SKIP — JP-358 Infobox-mit-Bild: live `.image-with-list-widget` is
              already plugin-styled (Light Sand bg ✓, Tech Blue eyebrow ✓,
              Dark Blue heading ✓). Figma 351:6707 is the CTA variant;
              live widget is the LIST variant — different valid composition.
     ⏭  SKIP — JP-363 Text-mit-Infobox: live `.steps-circle` on
              /de/quickstart-onlinehandel/ renders Font Awesome ICONS
              (envelope etc.), not numbered steps. Different valid composition.
     ⏭  SKIP — JP-370 Text-Boxen: live `.wawi-panels-widget` pages already
              cascaded by JP-416 (Tech Blue band + white 24-radius 3-up
              cards). JP-370 Fresh-Up is a different visual variant.
     ⏭  SKIP — JP-357 Video-Box, JP-362 Infobox-mit-Box, JP-367 Infobox-Split,
              JP-346 Fakten-Grid sand, JP-429 video-big-band: rule-13
              defensible exceptions — no live widget renders that composition.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── JP-424 Partner ─ live cascade for `.partner-tabs-widget` ──────────────
   Rework of merged #52 / JP-368. Live page /de/partner-suchen/ wraps the
   widget in `section.partner-search-tabs > .container > .row > .col` so we
   anchor the band to the section. The widget ships two pieces we restyle:
     • `.partner-tabs-widget__header-title`  → Dark Blue Inter Semibold 30/38
     • `.partner-tabs-widget__header-nav`    → white pill bar with active
        Tech-Blue-filled pill (live emits `.active` on the chosen button)
   Content area below the tab nav (legacy sidebar+map composition) is left
   alone — that's a Phase-3 template rework, not a CSS cascade.
   Figma: VSSY3wxlC31HrYDwwmHmrv node 371:5571 (Partner-Desktop 1440).
   ─────────────────────────────────────────────────────────────────────────── */

section.partner-search-tabs {
    background-color: #eeeee7;       /* JTL Light Sand */
    padding: 80px 64px;
    margin: 32px auto;
    border-radius: 46px;
    max-width: 1312px;
}
section.partner-search-tabs > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

section.partner-search-tabs h2.partner-tabs-widget__header-title {
    font-family: 'Kurdis Wide', Kurdis, 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    line-height: 38px !important;
    color: #0b1b45 !important;       /* JTL Dark Blue */
    margin: 0 0 32px !important;
}
/* Suppress theme's orange `h2::after` underline (no underline in Figma). */
section.partner-search-tabs h2.partner-tabs-widget__header-title::after,
section.partner-search-tabs h2.partner-tabs-widget__header-title::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* Pill-tab nav bar — white container with rounded children. */
section.partner-search-tabs .partner-tabs-widget__header-nav--wrapper {
    background-color: #ffffff;
    border-radius: 25px;
    padding: 8px;
    display: inline-flex;
    width: auto;
    max-width: 100%;
    overflow: visible;
}
section.partner-search-tabs .partner-tabs-widget__header-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border-bottom: 0 !important;     /* theme adds an orange underline */
}
section.partner-search-tabs .partner-tabs-widget__header-nav--item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 17px !important;
    border: 0 !important;
    border-radius: 50px !important;
    background-color: transparent;
    color: #0b1b45 !important;        /* JTL Dark Blue */
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    letter-spacing: 0.28px !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
}
section.partner-search-tabs .partner-tabs-widget__header-nav--item:hover,
section.partner-search-tabs .partner-tabs-widget__header-nav--item:focus {
    background-color: rgba(39, 34, 248, 0.08);   /* Tech Blue 8% */
    color: #0b1b45 !important;
    text-decoration: none !important;
}
section.partner-search-tabs .partner-tabs-widget__header-nav--item.active {
    background-color: #2722f8 !important;        /* JTL Tech Blue */
    color: #ffffff !important;
}
/* The current widget paints an orange ::after underline on the active item —
   the pill design has none. Suppress on every state. */
section.partner-search-tabs .partner-tabs-widget__header-nav--item::after,
section.partner-search-tabs .partner-tabs-widget__header-nav--item::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* Header layout: title above pill bar, both centred on a band.
   IMPORTANT: also nuke the theme's `background-color: #FFF5E9` (cream/peach)
   on this header. The theme paints a 1064×172 cream block at the top of
   the section that visually fragments the band — heading area renders
   peach, filter+cards area renders the section's Light Sand. The Figma
   shows a uniform Light Sand surface for the whole module, so we want
   the header to be transparent (let the section bg show through). Also
   strip the theme's `padding: 28px 37px 0px` so there's no internal
   "card" box-shape inside our band. */
section.partner-search-tabs .partner-tabs-widget__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    section.partner-search-tabs {
        padding: 48px 24px;
        margin: 16px;
        border-radius: 32px;
    }
    section.partner-search-tabs h2.partner-tabs-widget__header-title {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 24px !important;
    }
    section.partner-search-tabs .partner-tabs-widget__header-nav--wrapper {
        width: 100%;
        display: flex;
        overflow-x: auto;
    }
    section.partner-search-tabs .partner-tabs-widget__header-nav {
        flex-wrap: nowrap;
    }
    section.partner-search-tabs .partner-tabs-widget__header-nav--item {
        flex: 0 0 auto;
    }
}


/* ── JP-422 Roadmap ─ live cascade for `.numbered-list-widget__item` ───────
   Rework of merged #56 / JP-365. Live pages (8) wrap items in
   `.list-widget > ul.list-widget__wrapper > li.numbered-list-widget__item`.
   Editors typically place two `.list-widget` columns side-by-side in a
   `.row > .col-lg-6` for the "Was JTL dir abnimmt / Was du ohne JTL
   stemmen müsstest" two-column timeline. We restyle the item, number, and
   content typography without touching layout — so two-column or one-column
   editor compositions both pick up the new look.

   Notes:
     • The number's inline color is editor-controlled (e.g. purple on
       /de/ki/agentic-commerce/ for AI theming). We respect editor intent
       and don't override the number color, but bump size + weight.
     • Content text was rendering as theme-default grey rgb(51,51,51); we
       set Dark Blue per the JTL design system.
   Pages affected (DB grep `numbered_list`): einstieg-und-start-up,
   getting-started, schulungen, training, ratgeber-shopsystem, ecommerce,
   /de/ki/agentic-commerce, /en twins.
   ─────────────────────────────────────────────────────────────────────────── */

.list-widget .list-widget__wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

li.numbered-list-widget__item {
    display: flex;
    align-items: flex-start;
    column-gap: 24px;
    padding: 0;
}

.numbered-list-widget__item--number {
    flex: 0 0 auto;
    min-width: 40px;
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: #2722f8;                 /* JTL Tech Blue fallback when no
                                       editor inline color is set. */
    letter-spacing: 0.64px;
}
.numbered-list-widget__item--number > span {
    /* Editor inline `style="color:#NNN"` on this span wins by specificity;
       we just upsize the number to match the Figma timeline aesthetic. */
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.64px;
}

.numbered-list-widget__item--content {
    flex: 1 1 0;
    min-width: 0;
    color: #0b1b45;                 /* JTL Dark Blue */
}
.numbered-list-widget__item--content h3,
.numbered-list-widget__item--content .h5,
.numbered-list-widget__item--content .h4 {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 0 0 8px !important;
}
/* Suppress theme's orange `h3::after` underline on the headings. */
.numbered-list-widget__item--content h3::after,
.numbered-list-widget__item--content .h5::after,
.numbered-list-widget__item--content .h4::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
.numbered-list-widget__item--content p {
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}
.numbered-list-widget__item--content .headline-link {
    color: #2722f8 !important;      /* anchor next to heading stays Tech Blue */
}

@media (max-width: 767.98px) {
    li.numbered-list-widget__item {
        column-gap: 16px;
    }
    .numbered-list-widget__item--number,
    .numbered-list-widget__item--number > span {
        font-size: 24px;
    }
}


/* ── JP-416 ↔ JP-341 conflict fix — exclude home Linkboxen-mit-Bild ────────
   PR #62 (JP-416 rework) styles `section.wawi-panels-section` site-wide as
   a Tech-Blue 46-radius band. The /de/ homepage Linkboxen-mit-Bild section
   ALSO carries `wawi-panels-section` plus `.product-support-section
   .linkboxen-mit-bild`, so JP-416's border-radius / padding / max-width
   were bleeding into JP-341's Light-Sand variant.

   Exclude `.linkboxen-mit-bild` from JP-416 reach. JP-341 already provides
   the correct chrome via `.product-support-section.linkboxen-mit-bild`
   (lines 2075+). Mirror the desktop and mobile blocks.
   ─────────────────────────────────────────────────────────────────────────── */

section.wawi-panels-section.linkboxen-mit-bild {
    /* Restore JP-341's intended chrome (lines 2003-2015): 24-px radius,
       no section padding (the inner `> .container` gets the 80/64 pad),
       no outer max-width constraint. JP-341's Light-Sand bg is already
       winning via higher specificity. */
    border-radius: 24px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: none !important;
}


/* ── JP-424b Partner content area ─ filter dropdowns + 3-up partner cards ──
   User-flagged after the JP-424 header fix: the Figma "Update" frame
   (https://www.figma.com/design/VSSY3wxlC31HrYDwwmHmrv/JTL-Website-Modules?node-id=248-7906)
   shows the FULL Partner module — band + title + pill tabs (JP-424) PLUS
   a row of Light-Sand-rounded-pill filter dropdowns and a 3-up grid of
   white partner cards with a Tech-Blue footer button. The live
   `#technologiepartner-tab` / `#steuerberater-tab` already render that
   exact structure (SearchAndFilter Pro form + `.col-sm-6.col-lg-4 > .card`
   grid); only the visual styling is off.

   Live structure observed at /de/partner-suchen#technologiepartner:
     .partner-tabs-widget__content-item
       form.searchandfilter
         ul > li.sf-field-* (each contains an h4 label + select|input)
       .col-sm-6.col-lg-4 > .card.card-hover-bg-transform.h-100
         .card-header.p-3.row.no-gutters
           .col-7 (title link + categories) | .col-5 (logo)
         .card-body
           p (description)
           ul.list-inline (tag chips)

   Scope: every rule is anchored to
   `section.partner-search-tabs .partner-tabs-widget__content-item`
   so cascade can't leak into other pages' SearchAndFilter forms or
   Bootstrap `.card` instances.
   ─────────────────────────────────────────────────────────────────────────── */

/* Filter-row layout — strict single row of 4 evenly-spaced controls (3 selects
   + search), matching Figma 248-7906 "Filter" (flex, gap 23.5px, no wrap).
   JP-457 (2026-05-28): flex-wrap was `wrap`, which let the controls drop onto a
   second line on narrower desktops; `nowrap` + `flex: 1 1 0` keeps all four on
   one axis and shrinks them evenly instead. Mobile stacking is handled in the
   ≤991.98px media query below (re-enables wrap). */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: stretch;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
/* SF Pro emits an h4 inside each li ("Lösungsbereiche" etc.) — hide it for the
   Figma compact look (the select option label "Bitte auswählen" carries the
   field meaning). */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li > h4 {
    position: absolute;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
    border: 0; padding: 0; margin: 0;
}

/* Dropdowns + search input — Figma 365:2696 style (Light Sand fill + Dark Blue
   2px border + 24-px radius + Dark Blue Inter Bold label).
   Specificity bumped past the plugin's `.searchandfilter select` baseline by
   chaining the section + tab-content selectors.
   JP-457 (2026-05-28): target ONLY `input.sf-input-text` (the real search field),
   NOT every `input[type="text"]`. The Steuerberater tab's multiselect filters are
   enhanced by the Chosen plugin, whose internal typeahead `input.chosen-search-input`
   is also a text input — styling it as a pill made it overflow its container and
   read as a "broken bottom border". Chosen is styled separately below. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter select.sf-input-select,
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter input.sf-input-text {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    background-color: #eeeee7 !important;             /* JTL Light Sand */
    color: #0b1b45 !important;                        /* JTL Dark Blue */
    border: 2px solid #0b1b45 !important;
    border-radius: 24px !important;
    padding: 13px 23px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    letter-spacing: 0.28px !important;
    box-shadow: none !important;
    /* JP-457 (2026-05-28): truncate the selected-option label with an ellipsis
       so its last glyph can't leak past the right border when the control shrinks
       on narrow desktops (the "stray n" artifact). A native <select> already clips
       its option text to the content box, so NO `overflow: hidden` is used here —
       keeping overflow visible guarantees the 2px pill border (incl. the bottom
       curve) can never be clipped. */
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Dark-Blue chevron caret SVG (Figma vector node) baked into the right side
       of the select. */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230b1b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter input.sf-input-text {
    /* search field has a magnifier glyph, not a chevron */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%230b1b45' stroke-width='2'/%3E%3Cpath d='M13 13L17 17' stroke='%230b1b45' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: right 18px center;
    padding-right: 48px !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter select.sf-input-select::-ms-expand {
    display: none;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter label {
    display: block;
    margin: 0;
    width: 100%;
}

/* NOTE: Steuerberater-tab Chosen multiselect dropdowns (.chosen-container-multi)
   are styled in the consolidated "(g) jQuery Chosen plugin" block further down
   (search for "jQuery Chosen plugin wrapper sweep"). The reset link + filter-row
   layout for that tab live in the "(d)" / "(e)" blocks further down too. Both
   have higher specificity, so all that styling lives there to avoid a split
   source. */

/* Card grid container — keep the Bootstrap row, just normalise the gap. */
section.partner-search-tabs .partner-tabs-widget__content-item .row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

/* Each partner card — white, rounded-top 25, NO bottom radius (the injected
   footer ::after carries the bottom radius). Figma `Text-Area` 17.63px ≈ 18px
   for the inner padding at deck scale.
   SCOPE NOTE (2026-05-26 JP-424c fix): narrowed from `.card, .card.card-hover-
   bg-transform` to ONLY `.card.card-hover-bg-transform` — the Servicepartner
   tab's questionnaire form is wrapped in a bare `.card` that is NOT a partner
   card. Painting it as a partner card (Tech-Blue-footer styling) was a
   cascade leak; restrict to the partner-card class only. */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform {
    position: relative;                              /* anchor for ::after */
    background-color: #ffffff !important;            /* JP-457 (2026-05-28): match
                                                       Figma 371:5571 white card fill
                                                       — reverts the JP-424f transparent
                                                       "let Light Sand show through"
                                                       deviation, per user request to
                                                       follow the updated design. */
    border: 0 !important;
    border-radius: 25px !important;                  /* round all 4 corners; the
                                                       Tech-Blue ::after footer carries
                                                       the bottom radius on top. */
    box-shadow: none !important;                     /* drop shadow with no fill
                                                       reads as a halo on Light
                                                       Sand — remove. */
    margin-bottom: 32px !important;                  /* leaves room for ::after */
    padding-bottom: 56px !important;                 /* room for the Tech Blue footer band */
    overflow: visible !important;
    color: #0b1b45 !important;
}

/* Card header — Dark Blue title typography (Figma 14.69→21px at 1.44× scale). */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header {
    background-color: transparent !important;
    border: 0 !important;
    padding: 25px 25px 17px !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header h2,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header h2.h5,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header h5 {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 0 0 6px !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header h2::after,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header h5::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header a {
    color: #0b1b45 !important;
    text-decoration: none !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header span {
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 17px;
}

/* Make the entire card clickable by stretching the title `<a>` over the card
   (Figma cards behave as a single click target → partner detail page). */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Lift the bullet list above the stretched link so option clicks work too. */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-header > .col-5 {
    position: relative;
    z-index: 2;
}

/* Card body — Dark Blue Inter body + soft divider. */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body {
    padding: 0 25px 25px !important;
    color: #0b1b45 !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body hr {
    border: 0;
    border-top: 1px solid rgba(11, 27, 69, 0.12);
    margin: 0 0 17px;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body p {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 17px;
}

/* Feature list → vertical column, one feature per row (Figma 371:5571 `Lists`
   = flex-col, gap ~17px). The widget already emits a `.fa-angle-right` chevron
   before each label — keep it (recoloured to Tech Blue). The ::before/::after
   suppression below means the old doubled-arrow bug (2026-05-26: a prior column
   layout injected a ::before SVG that doubled with the .fa-angle-right) cannot
   recur, so stacking vertically is now safe. JP-457 (2026-05-28): restored the
   vertical stack to match the updated design. */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body ul.list-inline {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body ul.list-inline > li.list-inline-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    list-style: none !important;
    white-space: nowrap;
}
/* Bullet icon → the Figma "List" arrow (→), Tech Blue. The widget emits a
   Font Awesome <span class="far fa-angle-right">, but the FA webfont is NOT
   loaded in the clone (document.fonts.check === false), so that glyph degrades
   to a stray ">"-like chevron. JP-457 (2026-05-28): paint the brand → arrow as
   an inline SVG background on the span and blank its FA ::before glyph, so every
   feature row renders a clean Tech-Blue arrow that matches Figma 248-7906.
   Selector is scoped to `.card-body span.fa-angle-right` (not a specific list
   class) so it covers BOTH the Technologiepartner cards (`ul.list-inline` +
   `.text-wawi`) AND the Steuerberater cards (`ul.list-unstyled` + `.text-primary`). */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body span.fa-angle-right,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body span[class*="fa-angle"] {
    color: #2722f8 !important;
    flex: 0 0 auto;
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
    margin-right: 4px;
    font-size: 0 !important;                          /* suppress any fallback glyph box */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7H11M11 7L7 3M11 7L7 11' stroke='%232722f8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    vertical-align: middle;
}
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body span.fa-angle-right::before,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body span[class*="fa-angle"]::before {
    content: "" !important;                           /* kill the FA \f105 chevron */
}
/* Suppress any ::before / ::after arrow injection on these li (older
   JP-424b rule injected an SVG ::before that doubled with the
   .fa-angle-right; explicit `content: none` makes it impossible for
   that to come back). */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body ul.list-inline > li.list-inline-item::before,
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform .card-body ul.list-inline > li.list-inline-item::after {
    content: none !important;
    background: none !important;
    display: none !important;
}

/* Tech-Blue footer band — pure CSS, anchored via ::after on the card.
   Carries the partner-name text via a CSS custom property the editor can
   set on the card (`--jtl-partner-name`); falls back to "Mehr erfahren". */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform::after {
    content: var(--jtl-partner-name, "Mehr erfahren");
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 48px;
    background-color: #2722f8;
    color: #ffffff;
    border-radius: 0 0 25px 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 48px;
    padding: 0 25px;
    /* arrow → */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.81 10.23' fill='none'%3E%3Cpath d='M11.6022 5.60491C11.8734 5.33371 11.8734 4.89401 11.6022 4.62281L7.18274 0.203398C6.91154 -0.0677998 6.47184 -0.0677997 6.20065 0.203398C5.92945 0.474596 5.92945 0.914293 6.20065 1.18549L10.129 5.11386L6.20065 9.04223C5.92945 9.31343 5.92945 9.75313 6.20065 10.0243C6.47185 10.2955 6.91154 10.2955 7.18274 10.0243L11.6022 5.60491ZM0 5.11386L0 5.80831L11.1111 5.80831L11.1111 5.11386L11.1111 4.41942L0 4.41942L0 5.11386Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 25px center;
    background-size: 16px 14px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 0;                    /* behind the stretched title link */
}

/* Hover lift — match Figma's affordance. */
section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform:hover {
    transform: translateY(-2px);
    transition: transform 0.18s ease;
    box-shadow: 0 8px 28px rgba(11, 27, 69, 0.10) !important;
}

@media (max-width: 991.98px) {
    /* Mobile: allow the filter controls to wrap and stack full-width (the
       desktop base above is nowrap). */
    section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul {
        flex-wrap: wrap;
    }
    section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li {
        flex: 1 1 100%;
    }
    section.partner-search-tabs .partner-tabs-widget__content-item .card.card-hover-bg-transform {
        padding-bottom: 48px !important;
    }
}


/* ── JP-353b Logo-Slider outer chrome (home `/de/` band) ───────────────────
   User-flagged after JP-353/JP-420 shipped: the inner widget restyle works
   but the OUTER composition the editor wraps it in still ships the legacy
   chrome (light cyan band + teal/mint decorative blob + teal-gradient
   eyebrow text). The full Figma "Update / Produkt-Grid" target is node
   248:3561 (Dark Blue panel, 2×4 brand cells, Orange CTA cell) — that's a
   brand-new "Neu" module that needs a Phase 3 widget build (no live widget
   currently emits the 8-cell composition; the home page editor placed the
   wrong widget — `our_partners_slider_widget` — which only renders 5 cards).

   This block delivers the quick CSS-only chrome patch that PR #85 can ship:
   Light Sand band + brand-aligned typography + hidden decorative blob, so
   the section reads on-brand while the Phase 3 ticket builds the real
   Produkt-Grid module.

   Scope guards (CRITICAL — `.decorated-container` is reused by Success
   Stories above and other sections):
     • Every rule below is anchored to `:has(.our-partner-slider)` so it
       lands only on the section that contains the partner slider. The
       Success Stories `.decorated-container` (rgb(20,40,48) navy) is left
       untouched.
     • `.decorated-container-square-overlay` is the abs-positioned
       teal-mint gradient blob (502×356 hanging at y:-4) that sticks out
       the top-left of the cyan band. We hide it ONLY when it sits inside
       a `:has(.our-partner-slider)` parent.

   Live structure (Playwright getComputedStyle May 26, 2026):
     .decorated-container-wrapper (bg rgb(230,249,250) cyan)
       .decorated-container-square-overlay   ← teal-mint blob, kill
       .decorated-container                  ← cyan, re-paint Light Sand
         .decorated-container-inner
           .decorated-container-heading
             div.decorated-container-heading__over-title   "JTL-GROUP" — teal-mint gradient text-clip → Tech Blue
             div.decorated-container-heading__title        "Best-in-Class-Lösungen unter einem Dach" — Dark Blue Kurdis
             div.decorated-container-heading__description  body text — Dark Blue Inter
           .decorated-container-items-wrapper
             .our-partner-slider-items-wrapper           ← inner widget restyled by JP-420

   Figma: VSSY3wxlC31HrYDwwmHmrv node 248:2742 (deck slide); the real Update
   Module is 248:3561 "Box-grid-Desktop 1440" — see Phase 3 ticket.
   ─────────────────────────────────────────────────────────────────────────── */

/* Outer band: re-paint cyan → Light Sand */
.decorated-container-wrapper:has(.our-partner-slider),
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container {
    background-color: #eeeee7 !important;   /* JTL Light Sand */
    background-image: none !important;
}

/* Kill the teal-mint decorative blob. It sits in `.decorated-container-inner`
   as a sibling of `.decorated-container-wrapper` (not a descendant), so we
   scope at the `-inner` level. Playwright confirmed there are only 2 blobs
   on /de/ — orange one belongs to a different section higher up; teal one
   belongs to the logo-slider section we're restyling. */
.decorated-container-inner:has(.our-partner-slider) .decorated-container-square-overlay {
    display: none !important;
}

/* Eyebrow — "JTL-GROUP" — was painted via teal-mint gradient text-clip.
   Override to flat Tech Blue per Figma. Targets the gradient pattern by
   nulling all the text-fill / background variations the legacy CSS used. */
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__over-title {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;  /* JTL Tech Blue */
    color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 8px !important;
    width: auto !important;
    display: inline-block !important;
}

/* Headline — "Best-in-Class-Lösungen unter einem Dach". The DIV contains
   a <strong> wrapping the bold half; promote the whole thing to Kurdis. */
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title,
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title strong,
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title * {
    color: #0b1b45 !important;       /* JTL Dark Blue */
    font-family: 'Kurdis Wide', Kurdis, 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
}
/* Suppress the theme's orange `::after` underline (h2-style) if any */
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title::after,
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* Body — "Die JTL-Gruppe mit ihren Tochterunternehmen…" */
.decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__description {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 16px 0 0 !important;
}

@media (max-width: 767.98px) {
    .decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title,
    .decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title strong,
    .decorated-container-wrapper:has(.our-partner-slider) .decorated-container-heading__title * {
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.48px !important;
    }
}


/* ── JP-341b Linkboxen-mit-Bild "Get Connected and Evolve" — force the
       cascade JP-341 intended ─────────────────────────────────────────────
   User-flagged: the homepage Linkboxen section ("Get Connected and Evolve
   – mit dem JTL-Plan") still renders the OLD design (no photos on cards,
   "JTL COMMUNITY & PARTNER" overline still visible, content left-aligned)
   even though JP-341 (PR #42) shipped the full Figma 248:7625 restyle
   nearly a month ago.

   Playwright getComputedStyle root-cause on /de/ today (May 26 2026):
     • .product-support-section__subtitle    display: BLOCK (JP-341 said `none`)
     • .product-support-section.linkboxen-mit-bild .wawi-panels-widget__item::before
                                              content: NONE (JP-341 said `""`)
     • h2.product-management-section__title   text-align: LEFT (JP-341 said `center`)
     • Card overflow: VISIBLE (JP-341 said `hidden`)
   → A later plugin or theme rule is winning specificity for these JP-341
     properties — they all use specificity (0,3,1) without !important.

   This block re-asserts JP-341's intent with !important on the critical
   declarations. Scope guard: every selector chains `.linkboxen-mit-bild`
   so cascade can't leak into other `.product-support-section` users.

   Asset existence verified (all HTTP 200):
     /uploads/2025/09/{birgit,felix,jana}-mitarbeiter-stories.jpg
     /site/themes/jtl/images/jp341/{image-mask.png, arrow-right.svg}

   Figma: VSSY3wxlC31HrYDwwmHmrv node 248:7625 ("Linkboxen-mit-Bild"
   homepage module, Update side of the Before/Update deck slide).
   ───────────────────────────────────────────────────────────────────────── */

/* Hide the overline ("JTL COMMUNITY & PARTNER"). Figma Update drops it. */
.product-support-section.linkboxen-mit-bild .product-support-section__subtitle {
    display: none !important;
}

/* Centre the heading + body — Figma Update centres everything. */
.product-support-section.linkboxen-mit-bild .product-management-section__title,
.product-support-section.linkboxen-mit-bild .col-lg-6 p {
    text-align: center !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Photo at top of each card. JP-341 already declared the ::before with
   image-mask, but plugin CSS is winning. Force the rules with !important.
   3:2 aspect, image-mask applied to round the bottom curve per Figma. */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item {
    overflow: hidden !important;
    padding: 0 !important;
}
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    background-color: #d8d2c4 !important;     /* tone-on-tone load state */
    background-size: cover !important;
    background-position: center !important;
    -webkit-mask-image: url("images/jp341/image-mask.png") !important;
    -webkit-mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-image: url("images/jp341/image-mask.png") !important;
    mask-size: 100% 100% !important;
    mask-repeat: no-repeat !important;
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--founder::before {
    background-image: url("/uploads/2025/09/birgit-mitarbeiter-stories.jpg") !important;
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--kmu::before {
    background-image: url("/uploads/2025/09/felix-mitarbeiter-stories.jpg") !important;
}
.product-support-section.linkboxen-mit-bild .linkboxen-card--enterprise::before {
    background-image: url("/uploads/2025/09/jana-mitarbeiter-stories.jpg") !important;
}

/* Card text-button row layout — make sure the inner link doesn't shrink the
   card down to a single line (live had display:flex on the card so the link
   collapsed the row; force block layout for the link). */
.product-support-section.linkboxen-mit-bild .wawi-panels-widget__item .wawi-panels-widget__item--link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
}


/* ── JP-341c Linkboxen "Get Connected and Evolve" — force HEADING typography
       (JP-341 + JP-341b shipped subtitle/cards/photos but the h2 colour +
       font-family rule on line 2040 had no !important; a theme rule with
       !important is winning, leaving the headline in grey Inter instead of
       the Figma Kurdis Wide Bold Dark Blue) ────────────────────────────────
   Playwright (May 26 2026) confirmed on /de/:
     h2.product-management-section__title text "Get Connected and Evolve…"
     → color rgb(51,51,51) (theme grey), font-family Inter
     → Figma 163:4979 / 248:7625 wants Kurdis Wide Bold 32/46 #0b1b45
   Selector chains .linkboxen-mit-bild so it can't leak to sibling
   .product-support-section users. */
.product-support-section.linkboxen-mit-bild .product-management-section__title {
    color: #0b1b45 !important;                  /* JTL Dark Blue        */
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    text-align: center !important;
    margin: 0 auto 24px !important;
    max-width: 864px !important;
}
/* Suppress theme h2::after orange underline inside this section (Rule 10). */
.product-support-section.linkboxen-mit-bild .product-management-section__title::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}


/* ── JP-433 Facts "DAS IST JTL" (home /de/) — restyle the second
       wawi-panels-section variant on home ─────────────────────────────────
   This is the section <section class="wawi-panels-section home-version orange
   product-support-section mr-lg-10 ml-lg-10"> rendering "DAS IST JTL /
   Innovative ERP-Software made in Germany!" + keyfacts grid on the right.
   Figma 163:4304 "Facts-Desktop" wants: Light Sand band, Tech-Blue eyebrow
   (Inter 600 18/24 ls 0.9 uppercase), Dark-Blue Kurdis Wide Bold headline.
   The Sand bg + Tech-Blue eyebrow already render correctly (inherited from
   JP-341's broader `.product-support-section` rules), but the h2 still
   shows grey Inter because:
     - h2 has class .mr-6 only (NOT .product-management-section__title)
     - selector .product-support-section h2 wasn't covered by any earlier JP
   Scope guard: :not(.linkboxen-mit-bild) so we don't double-style cards. */
section.wawi-panels-section.home-version.product-support-section.mr-lg-10:not(.linkboxen-mit-bild) h2 {
    color: #0b1b45 !important;                  /* JTL Dark Blue        */
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
}
section.wawi-panels-section.home-version.product-support-section.mr-lg-10:not(.linkboxen-mit-bild) h2 span.font-weight-bold {
    font-weight: 700 !important;
    color: inherit !important;
}
section.wawi-panels-section.home-version.product-support-section.mr-lg-10:not(.linkboxen-mit-bild) h2::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}


/* ── JP-434 Kontaktieren — Figma 163:5063 "Kontakt-Box" full restyle ───
   Live HTML: section#kontaktieren > .container > .row > .col-lg-12 >
   .row.pt-5...pl-lg-7.basic-br[bg #FFF5E9] >
     .col-lg-6  (text: H2 overline + SPAN title + body + 9-logo grid)
     .col-lg-6  (Hubspot form — empty in clone, outbound blocked)
   Figma asks for: Dark Blue rounded card (46px radius, padding 46/64),
   Light Blue overline, white headline + body, Hubspot form col on the
   right. The 9-partner-logo grid in the left col is NOT in this Figma
   slot (it lived in earlier marketing variants); hide it. */
#kontaktieren {
    background: transparent !important;
}
/* Dark Blue 46-rounded card. */
#kontaktieren .row .row.basic-br,
#kontaktieren [class*="utils-6a1608310f1d3"] {
    background-color: #0b1b45 !important;
    background-image: none !important;
    border-radius: 46px !important;
    padding: 46px 64px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Light Blue curved "tab" overlay on the right side (Figma 163:5064
   Vector — rotated 180° per Figma 163:5063 layer chain `rotate-180`).
   Drawn as a pseudo so the live text + the form column stay above
   it. Positioned with the SVG anchored at right, scaled to fit the
   card height while preserving aspect ratio so the curve reads
   exactly as in image copy 10.png. */
#kontaktieren .row .row.basic-br::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    background-image: url('images/jp434/kontakt/light-blue-vector.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;                /* preserve SVG aspect */
    transform: rotate(180deg);                 /* Figma rotate-180 wrapper */
    z-index: 0;
    pointer-events: none;
}
/* Figma 163:5065 Content row layout: w-1200, gap-262 between Text-Area
   (350px) and Hubspot-iframe (form panel, max-w-675). Override
   Bootstrap's 50/50 col-lg-6 split. */
#kontaktieren .row .row.basic-br {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 262px !important;                     /* Figma 163:5065 gap-262 */
}
#kontaktieren .row .row.basic-br > .col-lg-6:first-child {
    flex: 0 0 350px !important;                /* Figma 163:5066 w-350 */
    max-width: 350px !important;
    width: 350px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}
#kontaktieren .col-lg-6.container-contact {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    min-height: 660px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;        /* centre form horizontally
                                                 inside the Light Blue area */
}

/* Static fallback form — renders only when injected by the inline
   `<script>` we add (see mu-plugin or theme hook). Pure HTML inputs,
   styled to match Figma 163:5072. */
.kontakt-fallback-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px 24px;
    width: 100%;
    max-width: 588px;
    margin-left: auto;
    margin-right: auto;                       /* centre inside the Light Blue area */
    font-family: Arial, sans-serif;
    color: #0b1b45;
}
.kontakt-fallback-form .row-2 {
    display: flex;
    gap: 18px;
}
.kontakt-fallback-form .row-2 > .field { flex: 1; }
.kontakt-fallback-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kontakt-fallback-form label {
    font-size: 13px;
    line-height: 20px;
    color: #0b1b45;
    font-weight: 400;
}
.kontakt-fallback-form label .req { color: #fb581f; }
.kontakt-fallback-form input[type="text"],
.kontakt-fallback-form input[type="email"],
.kontakt-fallback-form input[type="tel"],
.kontakt-fallback-form textarea,
.kontakt-fallback-form select {
    background: #fff;
    border: 1px solid #89d2ff;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 14.8px;
    line-height: 17px;
    font-family: inherit;
    color: #0b1b45;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
}
.kontakt-fallback-form textarea { height: 66px; resize: vertical; }
.kontakt-fallback-form .row-phone {
    display: flex;
    gap: 10px;
}
.kontakt-fallback-form .row-phone select { width: 155px; flex: 0 0 auto; }
.kontakt-fallback-form .row-phone input { flex: 1; }
.kontakt-fallback-form .row-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 6px;
}
.kontakt-fallback-form .row-consent input[type="checkbox"] {
    margin-top: 4px;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}
.kontakt-fallback-form .row-consent label {
    font-size: 14px;
    line-height: 18px;
    color: #0b1b45;
}
.kontakt-fallback-form .row-consent a { color: #2722f8; text-decoration: underline; }
.kontakt-fallback-form .row-submit {
    margin-top: 10px;
}
.kontakt-fallback-form .submit-btn {
    background: #fb581f;
    color: #0b1b45;
    border: 0;
    border-radius: 145px;
    padding: 12px 24px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    cursor: pointer;
}
/* Stale rule (form-panel.png) removed — the form is now real HTML
   injected by the mu-plugin, and the Light Blue background is the
   SVG vector overlay on the inner row's ::before pseudo. */
/* Overline — "KONTAKT & BERATUNG", Inter Semi Bold 18/24/0.9 Light Blue. */
#kontaktieren h2.redesign-styles__overtitle {
    color: #89d2ff !important;                /* JTL Light Blue */
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;               /* Figma Sub+Headline gap-6 */
}
#kontaktieren h2.redesign-styles__overtitle::after,
#kontaktieren h2.redesign-styles__overtitle::before {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}
/* Title — "Jetzt kostenfrei starten!", Kurdis Wide Bold 32/46/0.64 white. */
#kontaktieren .redesign-styles__title,
#kontaktieren .redesign-styles__title .font-weight-bold {
    color: #ffffff !important;
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    display: block !important;
}
/* Body text + phone line — Inter Regular 18/28 white. */
#kontaktieren .redesign-styles__text,
#kontaktieren .redesign-styles__text p {
    color: #ffffff !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin-top: 12px !important;              /* Figma 163:5066 gap-12 */
}
#kontaktieren .redesign-styles__text strong,
#kontaktieren .redesign-styles__text b {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 20px !important;               /* Figma phone number 20px bold */
    display: block !important;                /* Phone on its own line below
                                                 "Oder rufe uns direkt an:" */
    white-space: nowrap !important;           /* and no mid-digit wrap */
}
/* Hide the 9-partner-logo grid — Figma 163:5063 doesn't show it
   inside the Kontakt-Box. */
#kontaktieren .col-lg-6 .w-lg-80,
#kontaktieren .col-lg-6 .grid {
    display: none !important;
}
/* Right col — Hubspot form. Cap height + keep the white form on top
   of the dark band (form is rendered by JS and outbound blocked in
   the clone, so it'll be empty visually — that's environmental). */
#kontaktieren .col-lg-6.container-contact {
    min-height: 460px;
}


/* ── JP-435 Home /de/ "AKTUELLE JTL-NEWS" Post-Slider chrome ───────────────
   User-flagged: the home /de/ #news section still renders the OLD
   cream-peach band with theme typography even though JP-427 (PR #69 +
   #78) shipped Post-Slider styling. Root cause: JP-427's CSS targets
   `.swiper[id^="slider-"] .swiper-slide .card` (BlogStandard widget
   markup); home /de/ #news uses a different widget that renders
   `.swiper-slide.card-mobile-item` (no `.card` child). So none of
   JP-427's rules match here.

   Figma 248:4447 / 351:6573 "Post-Slider-Desktop 1440 Update Module":
     - Outer band: white page bg
     - Inner panel: Light Sand #eeeee7, rounded 46px, padding 80/64
     - Heading: SUCCESS STORIES (eyebrow Tech Blue Inter 600 uppercase)
       + "Wie JTL dich erfolgreich macht!" (Kurdis Wide Bold Dark Blue)
     - Cards: 3 horizontal cells, each white bg rounded 24px with:
         • Image top rounded 24 24 0 0
         • Text area below (white): title Inter 600 Dark Blue + body
           Inter 400 Dark Blue + "Mehr erfahren →" link in Dark Blue
     - Bottom row: "ALLE BEITRÄGE" pill + nav arrows (NOT in live DOM —
       CSS-only patch can't add them; tracked as Phase 3 below)

   This CSS keeps the editor text content ("Aktuelle JTL-News / Immer am
   Puls des E-Commerce" body text — JTL admin will rewrite copy if they
   want to match Figma's "SUCCESS STORIES" / "Wie JTL dich erfolgreich
   macht!" — that's a content decision, not CSS).

   Scope guard: `#news` only — the only `.decorated-container-fluid` on
   home with this composition. Other `.decorated-container` users
   (Success Stories at #success-stories, the home logo-slider band)
   are unaffected.
   ───────────────────────────────────────────────────────────────────────── */

/* Outer band — white page bg (kill the cream-peach .orange-tinted theme bg). */
#news.decorated-container-fluid {
    background-color: #ffffff !important;
}

/* Inner panel — Light Sand rounded card. The live .decorated-container is
   the panel; pad it generously per Figma 80/64 (scale to dev viewport). */
#news .decorated-container {
    background-color: #eeeee7 !important;
    border-radius: 46px !important;
    padding: 64px !important;
    margin: 40px 64px !important;       /* outer band gutter */
}
@media (max-width: 991px) {
    #news .decorated-container {
        padding: 32px 24px !important;
        margin: 24px 16px !important;
        border-radius: 24px !important;
    }
}

/* Hide the absolutely-positioned decorative blob (the orange "section-1670"
   theme variant ships a corner-blob SVG via .decorated-container::before or
   a sibling <img>). */
#news.decorated-container-fluid > .decorated-container::before,
#news.decorated-container-fluid > .decorated-container::after,
#news.decorated-container-fluid .decorated-container-square-overlay,
#news.decorated-container-fluid img.decoration,
#news.decorated-container-fluid > .decoration {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* Heading — eyebrow → Tech Blue Inter 600 uppercase; title → Kurdis
   Wide Bold Dark Blue; description → Inter Dark Blue. The live markup
   uses div.decorated-container-heading__{over-title,title,description}. */
#news .decorated-container-heading {
    text-align: center !important;
    max-width: 864px !important;
    margin: 0 auto 32px auto !important;
}
#news .decorated-container-heading__over-title {
    color: #2722f8 !important;          /* JTL Tech Blue */
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
#news .decorated-container-heading__title {
    color: #0b1b45 !important;          /* JTL Dark Blue */
    font-family: 'Kurdis', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    margin: 0 0 16px 0 !important;
}
#news .decorated-container-heading__title::after,
#news .decorated-container-heading__title::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
}
#news .decorated-container-heading__description {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
}

/* Card grid — 3 columns with 24px gap (already a swiper, but ensure
   each slide renders as a white rounded card). */
#news .swiper-slide.card-mobile-item {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Image area — fills the top, rounded only at top corners. */
#news .swiper-slide.card-mobile-item .swiper-slide__top-heading {
    position: relative !important;
    padding: 0 !important;
    background: transparent !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 24px 24px 0 0 !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__image picture,
#news .swiper-slide.card-mobile-item .swiper-slide__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Title row sits over the image in the live "no-overlay" layout — drop
   it under the image so the white text-area below it shows the title in
   Dark Blue on white (matching Figma). */
#news .swiper-slide.card-mobile-item .swiper-slide__title-heading {
    position: static !important;
    background: transparent !important;
    padding: 24px 24px 0 24px !important;
    max-width: none !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__title {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 0 0 8px 0 !important;
    text-shadow: none !important;
}

/* Description — Dark Blue Inter Regular, the body copy under the title. */
#news .swiper-slide.card-mobile-item .swiper-slide__description {
    padding: 0 24px 24px 24px !important;
    background-color: #ffffff !important;
    color: #0b1b45 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__description .text-description {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

/* "Mehr erfahren →" link — Dark Blue bold Inter, arrow inline at right. */
#news .swiper-slide.card-mobile-item .swiper-slide__button-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__button--link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-decoration: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__button--link-text {
    color: inherit !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__button--link-icon {
    color: #fb581f !important;          /* JTL Orange arrow per Figma */
    font-size: 16px !important;
}


/* ── JP-436 Home /de/ + product-page section h2 typography (sweep) ────────
   Sub-agent audit (May 26 2026) found 7 more sections on home /de/ where
   the h2 still renders grey Inter `rgb(51,51,51)` instead of the brand
   Dark Blue Kurdis:
     5× section.product-management-section.{orange,green,purple} (WAWI,
        Lager-Versand, Shopsystem, Marktplätze, Erweiterbarkeit)
     1× section.awards-section.orange ("JTL ist ausgezeichnet!")
     N× any other .product-management-section site-wide that inherits
        the same theme-grey rule
   Plus the secondary outline CTA on each band ("ALLE FUNKTIONEN
   ENTDECKEN" / "ZUM JTL-EXTENSION STORE") which renders grey text on
   transparent — should be Dark Blue text + Dark Blue border per Figma's
   Secondary-neg pattern.
   Scope: deliberately broad on .product-management-section because the
   live page has 5+ users and the rule was never per-page-scoped to
   begin with. The :not() guards make sure already-styled bands (the
   Linkboxen variant, the dark navy pricing band) keep their own
   colour. */
section.product-management-section .product-management-section__title {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}
section.product-management-section .product-management-section__subtitle {
    color: #2722f8 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
}
/* Outline / secondary-neg pill — Dark Blue text + Dark Blue border. */
section.product-management-section .product-button-group__button--with-icon.no-icon:not(.has-wawi-gra),
section.product-management-section a.btn-outline,
section.product-management-section .btn-secondary-neg {
    color: #0b1b45 !important;
    border-color: #0b1b45 !important;
    background-color: transparent !important;
}

/* Awards section heading — separate selector (different h2 class). */
section.awards-section h2,
section.awards-section .title,
section.awards-section h2.title {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}
section.awards-section h2::after,
section.awards-section .title::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}


/* ── JP-437 Master Preise page (/de/preise-und-tarife) — non-card sections
       chrome restyle. The .pricetable2 cards themselves are deferred to
       Phase 3 (covered separately as Known Follow-up #2); this block
       cleans up the surrounding theme-grey/cream-peach chrome so the page
       at least matches the brand palette outside the pricing cards. ──── */
.price-heading-landing.partner-heading-landing h1,
.price-heading-landing.partner-heading-landing h2 {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}
.prices-color-section .prices-tabs__container,
.prices-color-section [class*="prices-tabs"] {
    background-color: #eeeee7 !important;
}
.product-accordion-section h2,
.product-accordion-section h3,
/* Theme app.css ships `.second-content .product-accordion-section__title {
   color:#333!important }` at specificity (0,2,1). Match it with our own
   (0,2,1) chain so we win the cascade. */
.product-accordion-section h2.product-accordion-section__title,
.product-accordion-section h3.product-accordion-section__title,
.second-content .product-accordion-section__title {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}
.product-accordion-section h2::after,
.product-accordion-section h3::after,
.product-accordion-section h2.product-accordion-section__title::after,
.product-accordion-section h3.product-accordion-section__title::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}


/* ── JP-481 Blog archive cluster (/de/blog, /de/whitepaper, /de/themen/*,
       /de/referenzen) — sidebar widget titles + post-card titles use the
       Figma "List-Item-title" (20/28) and "Blog-Titel" (24/32) tokens =
       Inter Semi Bold 600. Supersedes JP-438's earlier Kurdis 700 override
       per Figma node 254:11008 (CLAUDE.md rule 9: Figma is source of truth). */
body.page-template-blog-archive-redesign aside h2,
body.page-template-blog-archive-redesign aside .widgettitle,
body.page-template-blog-archive-redesign .widget .widgettitle,
.blog-archive-redesign aside h2,
.blog-archive-redesign .widget .widgettitle {
    color: #0b1b45 !important;
    font-family: "Inter", "Proxima Nova", Arial, sans-serif !important;
    font-weight: 600 !important;
}
.blog-archive-redesign article h2,
.blog-archive-redesign article h2 a,
.blog-archive-redesign .post-card h2,
.blog-archive-redesign .post-card h2 a {
    color: #0b1b45 !important;
    font-family: "Inter", "Proxima Nova", Arial, sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* JP-462: .bar-card__cta in archive-blog.css sets color: var(--bar-white)
   at specificity (0,1,0) but loses to .page-template-blog a (0,1,1) which
   paints grey #333. Restore the Figma-correct white CTA text. */
.blog-archive-redesign .bar-card__cta,
.blog-archive-redesign .bar-card__cta:hover,
.blog-archive-redesign .bar-card__cta:focus {
    color: #ffffff !important;
}


/* ── JP-439 Jobs page (/de/jobs) heading typography sweep ─────────────────
   The careers landing has 4 sections where h2/h3 still render grey:
     .wawi-tutorial-section h3 eyebrow (should be Tech Blue Kurdis)
     .product-support-section.section-1570 h2 ("Wer wir sind…")
     Job list rows (.section-1570 a) — slate text + legacy orange "Jetzt
     bewerben" button
     ##DeutscheVersion.hero-product-section h2 ("Wir freuen uns…")
   The hero-product-section.orange h1 is already Dark Blue (JP-425); only
   the secondary h2 in that block needs help. */
.wawi-tutorial-section h3 {
    color: #2722f8 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
}
section.product-support-section.section-1570 h2 {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}
section.product-support-section.section-1570 h2::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}
section.hero-product-section.orange h2 {
    color: #0b1b45 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}
section.hero-product-section.orange h2::after {
    display: none !important;
    content: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
}


/* ── JP-440 Fakten-Grid (home /de/ "DAS IST JTL") — restyle .keyfacts-
       container tiles to Figma 248:2030 tokens (CSS portion) ────────────────
   User-flagged: the colored gradient tiles (orange 460+, purple 50000+,
   teal 500+, orange 17 Jahre) on the home are still LIVE today, despite
   JP-346 (Fakten-Grid sand variant) and JP-364 (Fakten-Grid navy variant)
   having merged a month ago. SAME ROOT CAUSE as JP-435 #news and the
   pricing page: JP-346 / JP-364 targeted .box-facts-section markup, but
   the home Fakten Grid renders .keyfacts-container — completely
   different DOM, so neither cascaded.

   This block neutralises the legacy gradient-tile aesthetic
   (Figma "Before") and pushes the tiles toward the Figma "Update Modul"
   typography (Tech Blue Kurdis numbers + Dark Blue Inter labels on plain
   bg). It DOES NOT restructure the section to the centered full-width
   composition shown in Figma 248:2030 because that requires:
     • Editorial: heading copy + body copy + 4→3 stat content swap
     • Structural: split 2-col → single full-width centred + new CTA
   Those are tracked as Bug JP-431 (see PR #85 body).

   Scope: section.product-support-section.mr-lg-10 .keyfacts-container
   (chained so we don't leak into other .keyfacts-container users like
   the Über uns / Karriere pages that may legitimately want the legacy
   colored tiles). */

/* Tiles: kill gradient bg + drop-shadow + rounded corners + theme borders. */
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container,
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container.image-shadow,
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container.keyfacts-color__orange,
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container.keyfacts-color__purple,
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container.keyfacts-color__green {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    color: #0b1b45 !important;
    padding: 16px 8px !important;
}


/* ── JP-431 Fakten-Grid (home /de/) — STRUCTURAL restyle scoped to the
       `facts-grid-redesign` marker class that scripts/db/jp431-fakten-grid-
       home.php injects onto the row. Together with JP-440 (tile colour
       neutralisation above) this delivers Figma 248:2030 Update Modul:
       single full-width Light Sand band + centred eyebrow + headline +
       body + 3 horizontal stats + Orange pill CTA. ──────────────────── */

/* Outer band: full-width Light Sand, generous padding (override JP-341's
   inherited `.product-support-section` chrome that would otherwise leave
   the section split into two columns). */
section.facts-grid-redesign {
    background-color: #eeeee7 !important;
    border-radius: 0 !important;            /* JP-341 puts 46px on .product-support-section — kill */
    padding: 80px 64px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
section.facts-grid-redesign > .container {
    max-width: 1216px;
    margin: 0 auto;
}

/* Force the 2-col `.row` (col-lg-6 + col-lg-6) into a single centred
   column. The .row uses bootstrap flex by default; switching to column
   makes the two .col-lg-6 stack. Each col gets full width + centred text. */
section.facts-grid-redesign > .container > .row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
section.facts-grid-redesign .col-lg-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Eyebrow ("DAS IST JTL") — centred Tech Blue (inherits colour from JP-341,
   we only enforce alignment). */
section.facts-grid-redesign .product-support-section__subtitle {
    text-align: center !important;
    margin-bottom: 6px !important;
}

/* Headline — already Dark Blue Kurdis via JP-433, but ensure centred + no
   right-margin offset that the editor's mr-6 spaces shortcode injects. */
section.facts-grid-redesign h2 {
    text-align: center !important;
    margin: 0 auto 16px !important;
    max-width: 720px !important;
    margin-right: auto !important;
}

/* Body subline — centred Inter Regular, Dark Blue. Replaces the wide
   left-aligned company-history paragraphs. */
section.facts-grid-redesign .pr-lg-10 {
    padding-right: 0 !important;
}
section.facts-grid-redesign .pr-lg-10 p,
section.facts-grid-redesign .col-lg-6 p:not(.facts-grid-redesign-cta) {
    color: #0b1b45 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* Stats grid: original CSS Grid is `302px 1fr` 2-col with row spans.
   Override to a clean 3-col equal-width centred grid (gap 32) — works
   because the DB script deletes the 4th tile, leaving exactly 3 items. */
section.facts-grid-redesign .keyfacts-new__wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 32px !important;
    max-width: 912px !important;
    margin: 32px auto 0 !important;
}
/* Reset every GridCSSStandardItem's column-start/column-end/row-start/
   row-end inline placement (the items each carry responsive_columns_start
   / responsive_rows_start that put them in the old asymmetric 2x2 layout).
   `grid-area:auto` lets each item auto-place into the new 3-col grid. */
section.facts-grid-redesign .keyfacts-new__wrapper > * {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-area: auto !important;
}

/* CTA pill: Orange filled, Dark Blue UPPERCASE text, 145.32px radius
   per Figma I248:2310. .facts-grid-redesign-cta-wrapper wraps a <p>
   that contains the <a class="facts-grid-redesign-cta">. */
section.facts-grid-redesign .facts-grid-redesign-cta-wrapper {
    margin-top: 32px;
    text-align: center;
}
section.facts-grid-redesign a.facts-grid-redesign-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 145.323px !important;
    background-color: #fb581f !important;        /* JTL Orange  */
    color: #0b1b45 !important;                   /* Dark Blue text per Figma */
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}
section.facts-grid-redesign a.facts-grid-redesign-cta:hover,
section.facts-grid-redesign a.facts-grid-redesign-cta:focus {
    background-color: #e74914 !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
}


/* Stat number: white Inter 48px → Tech Blue Kurdis Wide Bold 39px. */
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__title,
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__title * {
    color: #2722f8 !important;                  /* JTL Tech Blue        */
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 39px !important;
    line-height: 1.05 !important;
    letter-spacing: 1.17px !important;
    text-align: center !important;
}

/* Stat label: white → Dark Blue Inter SemiBold. */
section.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__description {
    color: #0b1b45 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 19.5px !important;
    text-align: center !important;
    margin-top: 8px !important;
}


/* ── JP-424c Partner — decor sweep + filter row cleanup ────────────────────
   2026-05-26 user-flagged regressions on /de/partner-suchen vs Figma 371:5571:
     (a) An orange/yellow geometric `decor.webp` graphic anchored top-right of
         the heading band — Figma shows a clean Light Sand band with NO decoration.
         Source: `.partner-tabs-widget__header::after` pseudo with
         `background-image: url(...PartnerTabs/assets/decor.webp); position:
         absolute; top:0; right:0; width:189px; height:107px`. The earlier
         JP-424 block suppressed only the H2's own ::after (theme underline) —
         it never touched the parent `__header::after` (the actual graphic).
     (b) An orange dot indicator on the active pill tab (Steuerberater) —
         `.partner-tabs-widget__header-nav--item.active::after` with
         `background-color: rgb(255, 154, 38)`. JP-424 ::after rule didn't
         apply because the selector chain stopped at `--item::after` without
         the `.active` qualifier the widget actually uses — re-suppress
         explicitly on every state including `.active`.
     (c) A white submit-button square at the tail of the filter row — the
         SearchAndFilter Pro plugin emits `<li class="sf-field-submit"><input
         type="submit">` styled as a generic browser button (white, sharp
         corners, no theming). Figma doesn't show a submit button — the form
         is auto-submitting via the `data-auto-update="1"` attribute, so the
         button is functionally redundant. Hide it.
     (d) A "Filter zurücksetzen" reset link emits as bare text `<li
         class="sf-field-reset">` at the front of the row, sitting in the
         flex row as a 144px slug. Move it out of the pill row and present
         it as an unobtrusive text-link below the filters (Figma doesn't
         show a reset; we keep it for UX but de-emphasise).
     (e) Each filter is emitted as TWO sibling `<li>`s in the plugin's
         combobox mode: `li.sf-field-taxonomy-*` (hidden select + autocomplete
         input + h4 label) followed by `li.search-field` (a parallel input
         the plugin uses for autocomplete UI). The duplication doubles the
         visible pill count and breaks the 4-up Figma row. Hide
         `li.search-field` siblings so only the canonical filter pill renders.

   Scope: every rule chains
     `section.partner-search-tabs .partner-tabs-widget__content-item`
   so cascade can't leak into other pages with SearchAndFilter Pro forms.
   Figma: VSSY3wxlC31HrYDwwmHmrv node 371:5571 (Partner-Desktop 1440).
   ─────────────────────────────────────────────────────────────────────────── */

/* (a) Kill the decor.webp graphic on the heading band. */
section.partner-search-tabs .partner-tabs-widget__header::after,
section.partner-search-tabs .partner-tabs-widget__header::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
}

/* (b) Kill the orange dot indicator on every tab state including .active.
   The earlier JP-424 rule only covered `--item::after/::before` at the bare
   state; the active rule re-applies `background-color: orange` via a separate
   declaration that needs to be explicitly negated. */
section.partner-search-tabs .partner-tabs-widget__header-nav--item::after,
section.partner-search-tabs .partner-tabs-widget__header-nav--item::before,
section.partner-search-tabs .partner-tabs-widget__header-nav--item.active::after,
section.partner-search-tabs .partner-tabs-widget__header-nav--item.active::before,
section.partner-search-tabs .partner-tabs-widget__header-nav--item:hover::after,
section.partner-search-tabs .partner-tabs-widget__header-nav--item:hover::before {
    content: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    display: none !important;
    border: 0 !important;
}

/* (c) Hide the submit button — the form auto-submits and Figma omits it. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li.sf-field-submit,
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li.sf-field-submit input[type="submit"] {
    display: none !important;
}

/* (d) Reset link ("Filter zurücksetzen") — a SearchAndFilter control that clears
   every selected dropdown + the search box in one click and re-runs the query to
   show the full unfiltered list. Rendered as a labeled link BELOW the filter grid.
   Flexbox `order` mis-packs a 100%-basis item in this wrapped row (it lands
   *between* rows, not after them), so the reset is taken OUT of the flex flow and
   pinned in space reserved by the form's bottom padding. Scoped to the
   Steuerberater tab — the only tab that has a reset field. JP-457 (2026-05-28). */
section.partner-search-tabs #steuerberater-tab form.searchandfilter {
    position: relative;
    padding-bottom: 30px;                            /* reserve room for the link */
}
section.partner-search-tabs #steuerberater-tab form.searchandfilter > ul {
    margin-bottom: 0 !important;                     /* reset uses the padding below */
}
section.partner-search-tabs #steuerberater-tab form.searchandfilter > ul > li.sf-field-reset {
    display: block !important;
    position: absolute;
    left: 0;
    /* anchor to the form bottom (top:100%), then pull up into the reserved
       padding. `bottom:auto` is required: with `bottom` set and `top:auto` the
       box stretches from its static top (the form top, since it's the first
       child) to the bottom, spanning the whole form. */
    top: 100%;
    bottom: auto;
    margin-top: -24px !important;
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    text-align: left;
    list-style: none !important;
}
section.partner-search-tabs #steuerberater-tab form.searchandfilter > ul > li.sf-field-reset a.search-filter-reset {
    display: inline-block;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 19px !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* (e) Hide the duplicate `search-field` companion lis emitted by the
   SearchAndFilter Pro combobox mode. The canonical filter UI lives in the
   `sf-field-taxonomy-*` / `sf-field-search` lis we already style; the
   `search-field` lis are a parallel autocomplete-mirror input the plugin
   builds and aren't needed for visual presentation (the hidden <select>
   inside the canonical li still drives the form submission). */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li.search-field {
    display: none !important;
}

/* Re-assert filter-row layout AFTER hiding the duplicates. Remaining lis flow
   4-up (each a quarter of the row).
   JP-457 (2026-05-28): kept the 4-up wrap (NOT a forced single row) so labels
   stay readable. Technologiepartner has 4 fields (3 taxonomies + search) → they
   fit one row. The Steuerberater filter genuinely has 5 taxonomy fields + search
   = 6, which wrap to TWO rows (4 + 2) — chosen over one cramped row where the
   "Alle auswählen" labels would truncate (user request 2026-05-28). Mobile
   (≤991.98px) drops to 2-up, then 1-up below 576px. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul {
    align-items: center;                            /* tame vertical jitter */
    flex-wrap: wrap;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li:not(.sf-field-reset):not(.sf-field-submit):not(.search-field) {
    flex: 1 1 calc(25% - 24px);                     /* 4-up at desktop */
    max-width: calc(25% - 24px);
    min-width: 0;
}
@media (max-width: 991.98px) {
    section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li:not(.sf-field-reset):not(.sf-field-submit):not(.search-field) {
        flex: 1 1 calc(50% - 24px);                 /* 2-up at tablet */
        max-width: calc(50% - 24px);
    }
}
@media (max-width: 575.98px) {
    section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li:not(.sf-field-reset):not(.sf-field-submit):not(.search-field) {
        flex: 1 1 100%;                             /* stacked on mobile */
        max-width: 100%;
    }
}
/* The label wrapping the visible input is `display:block; width:100%` —
   force the input inside to also fill the label so we don't end up with
   ~28px of empty padding showing the band colour through. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li > label > input,
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li > label > select {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* (g) jQuery Chosen plugin wrapper sweep — the SearchAndFilter Pro form's
   *multiselect* fields (Steuerberater tab) are hydrated client-side by jQuery
   Chosen, which hides the native <select> and builds
   `<div.chosen-container-multi> > <ul.chosen-choices> > <li.search-field> >
   <input.chosen-search-input>` (plus `<li.search-choice>` chips per selection).

   HISTORY: the May-26 version made `.chosen-choices` transparent/borderless and
   relied on the `input[type=text]` rule to pill the inner `.chosen-search-input`.
   That broke (JP-457): Chosen sizes the inner input inline (~193px), so the pill
   overflowed its container and read as a "broken bottom border", and the visible
   wrapper had no border at all.

   FIX (JP-457, 2026-05-28): make `.chosen-choices` ITSELF the Light-Sand pill
   (2px Dark-Blue border, 24px radius, right chevron — identical tokens to the
   single-select pills on the other tabs / Figma 248-7906), and neutralise the
   inner search input + chips so they sit as plain inline content inside the pill.
   The inner input is no longer pilled (the `input.sf-input-text` scope above
   excludes `.chosen-search-input`). */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container {
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}
/* The visible pill — same tokens as the single-select dropdowns. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-choices,
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container.chosen-container-multi .chosen-choices {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 47px;
    margin: 0;
    padding: 5px 44px 5px 23px !important;            /* right pad reserves chevron room */
    background-color: #eeeee7 !important;             /* JTL Light Sand */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230b1b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    border: 2px solid #0b1b45 !important;             /* full pill — all 4 sides */
    border-radius: 24px !important;
    box-shadow: none !important;
    overflow: visible !important;                     /* never clip the bottom curve */
}
/* search-field wrapper fills the remaining pill width so the placeholder shows. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-choices li.search-field {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center;
}
/* Inner typeahead input → plain inline text inside the pill, NOT its own pill. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-choices li.search-field input.chosen-search-input {
    width: 100% !important;
    min-width: 60px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;                /* kill the leaked magnifier */
    box-shadow: none !important;
    color: #0b1b45 !important;
    font: 700 14px/19px 'Inter', sans-serif !important;
    letter-spacing: 0.28px !important;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-choices li.search-field input.chosen-search-input::placeholder {
    color: #0b1b45 !important;
    opacity: 1;
}
/* Selected chips inside the pill. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-choices li.search-choice {
    margin: 0;
    padding: 3px 22px 3px 9px;
    background: #ffffff !important;
    border: 1px solid #0b1b45 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #0b1b45 !important;
    font: 700 12px/16px 'Inter', sans-serif !important;
    line-height: 16px;
}
/* The dropdown panel that opens below the pill — white bg + shadow so options
   are readable on the Light Sand band. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-drop {
    background-color: #ffffff !important;
    border: 2px solid #0b1b45 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(11, 27, 69, 0.12) !important;
    margin-top: 4px !important;
    overflow: hidden;
}
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container .chosen-results li.highlighted {
    background-color: #2722f8 !important;
    color: #ffffff !important;
}
/* When the dropdown is open, keep the pill chrome (border + fill) intact. */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter .chosen-container.chosen-container-active.chosen-with-drop .chosen-choices {
    background-color: #eeeee7 !important;
    border: 2px solid #0b1b45 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   JP-434 — Facts-Grid centering + Figma typography (Figma 163:4304)
   --------------------------------------------------------------
   1) Centre the section on the 1440 page (Bootstrap mr/ml-lg-10
      utilities are stripped, so margin: auto is the override).
   2) Hide the "DAS IST JTL" eyebrow — NOT in Figma redesign.
   3) Bump subline from 18→20px to match Figma spec.
   4) Bump stat numbers from 39→56px with 42 lh + 1.68px tracking,
      Tech Blue, Kurdis Wide Bold (Figma 163:4311 / 4314 / 4317).
   5) Bump stat labels from 14→20px Inter Semi Bold 28 lh.
   ------------------------------------------------------------ */
section.facts-grid-redesign {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hide "DAS IST JTL" — Figma redesign drops it */
section.facts-grid-redesign .product-support-section__subtitle {
    display: none !important;
}

/* Subline — Figma Inter Regular 20/28 (was 18/28). The existing
   `section.wawi-panels-section.home-version.product-support-section.mr-lg-10 p`
   rule has specificity (0,0,5,1), so we chain through the same
   classes to win. */
section.facts-grid-redesign.wawi-panels-section.home-version.product-support-section.mr-lg-10 p {
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}

/* Stat numbers — Figma Kurdis Wide Bold 56/42/1.68 Tech Blue.
   The existing `.keyfacts-container .keyfacts-new__title` rule has
   specificity (0,0,6,1) and uses !important, so we chain through
   the SAME 4-class section prefix PLUS `.facts-grid-redesign` to
   land at (0,0,7,1) and win. */
section.facts-grid-redesign.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__title,
section.facts-grid-redesign.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__title * {
    font-size: 56px !important;
    line-height: 42px !important;
    letter-spacing: 1.68px !important;
    font-weight: 700 !important;
    color: #2722f8 !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
}

/* Stat labels — Figma Inter Semi Bold 20/28 Dark Blue. Same
   specificity bump pattern as the title rule above. */
section.facts-grid-redesign.wawi-panels-section.home-version.product-support-section.mr-lg-10 .keyfacts-container .keyfacts-new__description {
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
    color: #0b1b45 !important;
    font-family: Inter, sans-serif !important;
}

/* ------------------------------------------------------------
   JP-434 — Aktuelle JTL-News (Figma 163:4550 "Icon-4er-Grid")
   --------------------------------------------------------------
   Figma: WHITE section bg, 4 LIGHT-SAND icon cards, Tech Blue
   distinct icons per card (document-code / grid / chart / verify),
   body text, orange "BERATUNG VEREINBAREN" CTA. Hides per-card
   "Mehr erfahren" links (Figma doesn't show them). */
section.section-1670 {
    background: #ffffff !important;           /* WHITE section bg (was beige) */
    padding: 80px 0;
}
/* Eyebrow — Tech Blue, not orange */
section.section-1670 .decorated-container__overtitle,
section.section-1670 [class*="overtitle"],
section.section-1670 .h6,
section.section-1670 h6 {
    color: #2722f8 !important;                /* Tech Blue */
}
/* Hide the image at top of each card */
section.section-1670 .card-mobile-item .swiper-slide__image,
section.section-1670 .card-mobile-item .swiper-slide__top-heading {
    display: none !important;
}
/* Strip the peach `decorated-container-wrapper` and inner sand
   panel — Figma wants WHITE section + SAND cards (we keep them
   transparent so the section's white bg shows through). */
section.section-1670 .decorated-container-wrapper,
section.section-1670 .decorated-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Card itself — LIGHT SAND bg (Figma inverts: white section + sand cards).
   The plugin's `#news .swiper-slide.card-mobile-item` rule has
   specificity (1,0,2,0), so we use `#news` too and chain to win.

   `justify-content: center` makes the icon + title + description stack
   vertically center inside the fixed-height card, so the spare bottom
   space splits evenly between top and bottom across all cards regardless
   of how many lines the title / description wraps to. */
#news .swiper-slide.card-mobile-item,
section.section-1670 .card-mobile-item.swiper-slide {
    background: #eeeee7 !important;           /* Light Sand card bg */
    background-color: #eeeee7 !important;
    border-radius: 24px !important;
    padding: 32px 24px !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    justify-content: center !important;
}
/* Per-card distinct Tech Blue icons — REAL Figma SVG assets
   (downloaded from Figma MCP: vuesax/bold/document-code, element-4,
   status-up, verify). Saved to theme/jtl/images/jp434/icons/ with
   the var(--fill-0,…) replaced by literal #2722F8 so they render
   correctly when loaded as background-images.
   The image is shown directly (not as mask) so the SVG's own fill
   color drives the rendering — no extra background-color needed. */
section.section-1670 .card-mobile-item::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 32px;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center;
}
section.section-1670 .card-mobile-item:nth-child(1)::before {
    background-image: url("images/jp434/icons/document-code.svg");
}
section.section-1670 .card-mobile-item:nth-child(2)::before {
    background-image: url("images/jp434/icons/element-4.svg");
}
section.section-1670 .card-mobile-item:nth-child(3)::before {
    background-image: url("images/jp434/icons/status-up.svg");
}
section.section-1670 .card-mobile-item:nth-child(4)::before {
    background-image: url("images/jp434/icons/verify.svg");
}
/* Card body text — Inter 16/24 (Figma p-small), dark blue, centered. */
section.section-1670 .card-mobile-item .swiper-slide__body,
section.section-1670 .card-mobile-item .swiper-slide__heading,
section.section-1670 .card-mobile-item .swiper-slide__description {
    color: #0b1b45 !important;
    text-align: center !important;
    font-family: Inter, sans-serif !important;
}
section.section-1670 .card-mobile-item .swiper-slide__description {
    font-size: 16px !important;        /* Figma p-small */
    line-height: 24px !important;
    font-weight: 400 !important;
}
section.section-1670 .card-mobile-item .swiper-slide__heading {
    font-size: 20px !important;        /* Figma H4 */
    line-height: 28px !important;
    font-weight: 600 !important;       /* Inter Semi Bold */
    margin-bottom: 16px !important;
}
/* HIDE per-card "Mehr erfahren" links — Figma doesn't show them */
section.section-1670 .card-mobile-item .swiper-slide__button,
section.section-1670 .card-mobile-item .swiper-slide__link {
    display: none !important;
}
/* Bottom CTA — orange pill (label change to "Beratung vereinbaren"
   happens via DB script in scripts/db/jp434-home-figma-reorder.php) */
section.section-1670 .button-wrap a,
section.section-1670 > .container button,
section.section-1670 > .container .btn,
section.section-1670 a.btn,
section.section-1670 .product-button-group__button--with-icon {
    background: #fb581f !important;
    color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 145px !important;
    padding: 12px 24px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* --- JP-434 News fix-ups (Figma 163:4550) ------------------------------
   Close the remaining gaps so the live News section matches the Figma:
     (a) 4 cards in ONE row at 1440 (live swiper-wrapper is 1px short)
     (b) Card padding 24 not 32 (Figma)
     (c) Icon ::before pinned to exactly 64x64 (flex-shrink: 0)
     (d) Hide per-card "Mehr erfahren" link (real class is __button--link
         and the wrapping __button-wrapper — previous rule used wrong slug)
*/
/* (a) — force 4-up on the swiper wrapper at desktop. Widen the wrapper
        to fit 4 × (1/4 width) + 3 × 32px gap; switch to CSS grid so the
        1px rounding never wraps the 4th card to a 2nd row. */
@media (min-width: 992px) {
    section.section-1670 .swiper.card-mobile-image,
    section.section-1670 .card-mobile-widget,
    #news .swiper.card-mobile-image,
    #news .card-mobile-widget {
        overflow: visible !important;
    }
    section.section-1670 .swiper-wrapper,
    #news .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 32px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        flex-wrap: nowrap !important;
    }
    section.section-1670 .swiper-wrapper > .swiper-slide.card-mobile-item,
    #news .swiper-wrapper > .swiper-slide.card-mobile-item {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
}

/* (b) — Card padding back to Figma 24 (was 32 24 above for a 3-up layout). */
#news .swiper-slide.card-mobile-item,
section.section-1670 .card-mobile-item.swiper-slide {
    padding: 24px !important;
}

/* (c) — Icon ::before: don't let flex shrink the 64×64 box (live computed
        was 48.56 because the flex column was redistributing height). */
section.section-1670 .card-mobile-item::before,
#news .swiper-slide.card-mobile-item::before {
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    height: 64px !important;
    width: 64px !important;
    aspect-ratio: 1 / 1 !important;
}

/* (d) — Hide the per-card "Mehr erfahren" link (real class is
        `.swiper-slide__button--link` with the wrapping
        `.swiper-slide__button-wrapper`). The earlier rule targeting
        `.swiper-slide__button` / `.swiper-slide__link` was the wrong slug. */
section.section-1670 .card-mobile-item .swiper-slide__button-wrapper,
section.section-1670 .card-mobile-item .swiper-slide__button--link,
#news .swiper-slide.card-mobile-item .swiper-slide__button-wrapper,
#news .swiper-slide.card-mobile-item .swiper-slide__button--link {
    display: none !important;
}

/* (e) — Invert bg: Figma has WHITE section / SAND cards, but the live
        `.decorated-container` is the sand-coloured rectangle. Strip its
        sand bg + padding so the section's white shows through and the
        cards themselves carry the sand. Also widen the inner wrappers
        so 4 × 304px cards (Figma spec) fit on one row at 1440. */
#news.decorated-container-fluid .decorated-container,
section.section-1670 .decorated-container {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    max-width: 1312px !important;
    width: 100% !important;
    margin: 0 auto !important;
}
#news.decorated-container-fluid .decorated-container-items-wrapper,
section.section-1670 .decorated-container-items-wrapper {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
@media (min-width: 992px) {
    #news .slider-mobile-items-wrapper,
    #news .slider-mobile-slider.swiper,
    #news .slider-mobile-items.swiper-wrapper,
    section.section-1670 .slider-mobile-items-wrapper,
    section.section-1670 .slider-mobile-slider.swiper,
    section.section-1670 .slider-mobile-items.swiper-wrapper {
        width: 100% !important;
        max-width: 1312px !important;
    }
}

/* (f) — The card's inner `.swiper-slide__description` block has its own
        white bg (set higher in this file for the original 3-card layout).
        That white was painting over the card's sand bg, making cards look
        white in the rendered output even though their computed bg was
        sand. Force the description block transparent so the card sand
        shows through. */
#news .swiper-slide.card-mobile-item .swiper-slide__description,
section.section-1670 .card-mobile-item .swiper-slide__description {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* (g) — Show the card heading (Figma "Headline Span class H4"). An
        earlier rule hid `.swiper-slide__top-heading` (the wrapper that
        contains the card title), which removed the H4 entirely. Bring
        it back, centred, Inter Semi Bold 20/28 dark blue. */
#news .swiper-slide.card-mobile-item .swiper-slide__top-heading,
section.section-1670 .card-mobile-item .swiper-slide__top-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
/* Plugin's photo-readability scrim — a transparent→rgba(0,0,0,0.2) linear
   gradient ::before that covers the full card (294×434) and darkens the
   bottom-right. We don't show photos in the Figma News variant, so the
   scrim has nothing to overlay — kill it so the card stays a flat sand. */
#news .swiper-slide.card-mobile-item .swiper-slide__top-heading::before,
section.section-1670 .card-mobile-item .swiper-slide__top-heading::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__title-heading,
section.section-1670 .card-mobile-item .swiper-slide__title-heading {
    /* Plugin sets position:absolute + inset:0 + justify-content:flex-end so
       the title overlays the image at its bottom. With the image hidden the
       title still floats over the body and overlaps it; force normal flow. */
    position: static !important;
    inset: auto !important;
    pointer-events: auto !important;
    z-index: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: center !important;
    max-width: none !important;
    width: 100% !important;
    text-shadow: none !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__title,
section.section-1670 .card-mobile-item .swiper-slide__title {
    color: #0b1b45 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    text-align: center !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* (h) — Make all 4 cards equal height. Card uses natural content height
        so the grid row sizes to the tallest card. `align-items: stretch`
        on the grid (default) then stretches the shorter cards to fill
        the row. Don't pin card to `height: 100%` — that fixes it to the
        grid row before the inner flex children know their target height,
        which then squeezes `.swiper-slide__top-heading` below the title
        text and overlaps it onto the description. Plugin sets
        `height: 100%` on `.swiper-slide__description` + `.swiper-slide__
        top-heading`; both need `height: auto` + no flex-shrink so they
        use natural content height inside the card. */
#news .swiper-slide.card-mobile-item,
section.section-1670 .card-mobile-item.swiper-slide {
    min-height: 0 !important;
    height: auto !important;
}
#news .swiper-slide.card-mobile-item .swiper-slide__top-heading,
section.section-1670 .card-mobile-item .swiper-slide__top-heading,
#news .swiper-slide.card-mobile-item .swiper-slide__description,
section.section-1670 .card-mobile-item .swiper-slide__description {
    height: auto !important;
    flex: 0 0 auto !important;
}
@media (min-width: 992px) {
    #news .swiper-wrapper,
    section.section-1670 .swiper-wrapper {
        align-items: stretch !important;
    }
}

/* (i) — Centre the bottom CTA pill (live wrapper inherits `text-align: left`
        + `justify-content: normal` from the hero buttons class it carries).
        Above-button gap: Figma 163:4550 stacks Text-Area + Icon-Grid +
        Buttons row in a `gap-[32px]` flex column AND gives the Buttons row
        `pt-[32px]` — so cards-bottom → button-top = 32+32 = 64px.
        Below-button gap: just the section's `py-[80px]` bottom; the .container
        below contributes 0 (rule below zeroes its 64px pb on #news). */
#news .product-buttons-group,
section.section-1670 .product-buttons-group {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding-top: 64px !important;
    margin: 0 !important;
}
/* Theme's `.container` ships with 64px pb that pushes the section bottom
   past Figma's 80px section-pb target. Zero it on the news section. */
#news > .container,
section.section-1670 > .container {
    padding-bottom: 0 !important;
}

/* (j) — Eyebrow color: the `.orange` ancestor on the section applies an
        orange gradient as background + `-webkit-text-fill-color:
        transparent` to the over-title, which masks my Tech Blue `color`
        token. Override both so the eyebrow renders Tech Blue solid. */
section#news .decorated-container-heading__over-title,
section.section-1670 .decorated-container-heading__over-title,
.decorated-container-fluid#news .decorated-container-heading__over-title {
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;
}

/* (k) — Tighten the Text-Area stack to Figma 163:4551 (eyebrow + headline
        + description packed with ~0 gap; the visual breathing room comes
        from the headline's line-height, not from margin/padding). Plugin
        defaults add 32px padding-bottom + 16px margin-bottom to the
        headline = ~48px gap; Figma is ~0. */
#news .decorated-container-heading__over-title,
section.section-1670 .decorated-container-heading__over-title {
    margin: 0 !important;
    padding: 0 !important;
}
#news .decorated-container-heading__title,
section.section-1670 .decorated-container-heading__title {
    margin: 0 !important;
    padding: 0 !important;
}
#news .decorated-container-heading__description,
section.section-1670 .decorated-container-heading__description {
    margin: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   JP-434 — Home (/de/) Figma compositions for the 6 sections
   inserted by scripts/db/jp434-home-figma-reorder.php.
   --------------------------------------------------------------
   Reorder script places existing widgets at the right positions
   with matching copy, but each section needs a Figma-specific
   wrapper composition that no per-widget ticket has shipped yet.
   This block adds the missing per-section CSS scoped to the
   `home-*-section` wrapper class the Phase-3 script emits.

   No new widget code, no new shortcodes — only CSS.
   ============================================================ */

/* ------------------------------------------------------------
   Section #3 — Video (Figma 163:4330 "Media-Desktop 1440")
   --------------------------------------------------------------
   864 × 522 navy video card centred in a 1440 × 682 band with
   a soft cream/white wave under it, orange 80 × 80 round play
   button overlaid in the centre of the video.
   ------------------------------------------------------------ */
section.home-video-section {
    background: #eeeee7;                    /* JTL Light Sand top half */
    padding: 80px 0 0;                       /* Figma 80 top, 0 bottom (wave hangs) */
    position: relative;
    overflow: hidden;
}
section.home-video-section::after {
    /* Soft white wave that fills the bottom — Figma "HG-Form" vector */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: #ffffff;
    clip-path: ellipse(85% 100% at 75% 100%);
    z-index: 0;
}
section.home-video-section > .container {
    max-width: none;
    padding: 0;
    position: relative;
    z-index: 1;
}
section.home-video-section > .container > .row {
    margin: 0;
    justify-content: center;
}
section.home-video-section > .container > .row > .col {
    flex: 0 0 auto;
    max-width: 864px;                        /* Figma video width */
    width: 864px;
    padding: 0;
}
section.home-video-section .home-figma-video {
    background-color: #0b1b45 !important;    /* JTL Dark Blue card */
    border-radius: 24px;
    overflow: hidden;
    height: 522px !important;                /* Figma height */
    padding: 0 !important;
    position: relative;
}
section.home-video-section .home-figma-video .embed-cover {
    border-radius: 24px;
}
/* Orange round play button — 80×80, Figma "Play-Button" */
section.home-video-section .home-figma-video .embed-play-button,
section.home-video-section .home-figma-video::after {
    /* leave the widget's own play overlay; just style it to orange round */
}
section.home-video-section .embed-play-button {
    background: #fb581f !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    box-shadow: 0 4px 18px rgba(11,27,69,0.18);
}

/* ------------------------------------------------------------
   Section #6 — Quote (Figma 163:4630 "Quote-no-box-Desktop 1440")
   --------------------------------------------------------------
   Two-col 640 × 480: round image left, content right (eyebrow
   "Success Story" + dark blue Kurdis quote + Inter source +
   orange CTA pill).
   ------------------------------------------------------------ */
section.home-quote-section {
    background: #eeeee7;                     /* Figma Light Sand */
    padding: 80px 64px;                       /* Figma px-64 py-80 */
}
section.home-quote-section > .container > .row > .col > .blockquote {
    display: flex;
    align-items: center;
    gap: 32px;                                /* Figma 163:4631 gap-32 */
    max-width: 1312px;
    margin: 0 auto;
}
/* Left col — image cell. Override Bootstrap `.maxw-6` (which clamps the
   column to 208px and squishes the photo into a tall oval). */
section.home-quote-section .blockquote > .col-lg-auto:first-child {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* LEFT col visual — Figma 163:4632 bakes the Martin Bauer photo, the
   white SportFits logo blob, and the cyan quote-mark blob into a single
   640×480 render. Hide the live `<picture>` (which only carries the photo)
   and paint the Figma composite as a background-image so the blobs land
   in their Figma positions without us recreating the clip-paths in CSS. */
section.home-quote-section .blockquote > .col-lg-auto:first-child {
    background-image: url('images/jp434/quote/testimonial-composite.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    aspect-ratio: 640 / 480;
    max-width: 640px;
    min-height: 480px;
}
section.home-quote-section .blockquote picture,
section.home-quote-section .blockquote picture img {
    display: none !important;
}
/* Hide the widget's inline FontAwesome quote glyphs. */
section.home-quote-section .blockquote .blockquote-quote-left,
section.home-quote-section .blockquote .blockquote-quote-right {
    display: none !important;
}
/* Right col — text block. Live class is `.col-lg`, NOT `.col`. The old
   `> .col` selector silently missed and the ::before eyebrow never
   landed. */
section.home-quote-section .blockquote > .col-lg {
    flex: 0 0 640px !important;
    max-width: 640px !important;
    padding: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;                     /* Figma 163:4633 gap-24 */
}
/* "SUCCESS STORY" eyebrow — Figma 163:4634: Tech Blue Inter Semi Bold
   18/24, letter-spacing 0.9px, uppercase. Injected via ::before. */
section.home-quote-section .blockquote > .col-lg::before {
    content: "SUCCESS STORY";
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2722f8;                           /* Tech Blue */
    margin: 0;
}
/* Quote — Figma 163:4635: Inter Medium 24/38, Dark Blue. The text lives
   inside `.mx-4 > p`; null the Bootstrap mx-4 margin so the quote aligns
   with the eyebrow left edge. */
section.home-quote-section .blockquote .mx-4 {
    margin: 0 !important;
}
section.home-quote-section .blockquote p,
section.home-quote-section .blockquote .blockquote-text {
    font-family: Inter, sans-serif !important;
    font-weight: 500 !important;              /* Medium */
    font-size: 24px !important;
    line-height: 38px !important;
    letter-spacing: 0.48px !important;        /* Figma 2% of 24 */
    color: #0b1b45 !important;
    margin: 0 !important;
    text-align: left !important;
}
/* Footer — `Martin Bauer{br}CEO von SportFits, <a>Success Stories…</a>`.
   Live text contains the literal string `{br}` because no upstream code
   substitutes it for a real newline. CSS can't reliably turn the four
   literal chars into a `<br>`, so the footer renders inline; the DB
   script that owns this section content is the right place to fix the
   line break (and the CTA label). For now, style what CSS can. */
/* Footer — Figma 163:4636 stacks "Martin Bauer" + "CEO von SportFits"
   on two lines. The widget output is
     <span.quote-name>Martin Bauer</span><br><span.quote-role>CEO von
     SportFits</span>, <a>{cta label}</a>
   i.e. the widget always appends `, {link}` after the source, so a
   literal `, ` text node sits between the role span and the CTA pill.
   Hide it with `font-size: 0` on the footer and explicit resets on the
   named children + the link — anonymous text nodes inherit `font-size:
   0` and disappear. */
section.home-quote-section .blockquote-footer {
    font-family: Inter, sans-serif !important;
    font-size: 0 !important;                   /* hide unnamed text nodes */
    line-height: 0 !important;
    color: #0b1b45 !important;
    margin: 0 !important;
    text-align: left;
    background: none !important;
}
section.home-quote-section .blockquote-footer::before {
    display: none !important;
    content: none !important;
}
section.home-quote-section .blockquote-footer .quote-name {
    display: block;
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;                          /* Inter Semi Bold */
    color: #0b1b45;
}
section.home-quote-section .blockquote-footer .quote-role {
    display: block;
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;                          /* Inter Regular */
    color: #0b1b45;
    text-decoration: underline;
    text-decoration-color: #fb581f;             /* JTL Orange */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    width: max-content;                         /* underline only hugs text */
}
/* Source link styled as the orange "Join the JTL Ecosystem" CTA pill
   (Figma 163:4637 → 331:3619). The DB still ships the German label
   "Success Stories entdecken"; until that's swapped via a DB script,
   the visual treatment matches Figma even if the text doesn't. */
section.home-quote-section .blockquote a,
section.home-quote-section a.blockquote-source-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    margin-top: 48px;                          /* Figma: gap-24 between
                                                  author block and Buttons row
                                                  + pt-24 inside Buttons row */
    background: #fb581f;
    color: #0b1b45;
    border-radius: 145px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Section #7 — Was hält dich auf? (Figma 163:4676 "Icon-3er-Grid")
   --------------------------------------------------------------
   Light SAND band (not cyan — Figma corrects to #eeeee7),
   Tech-Blue overline + BLACK Kurdis 36/46/0.72 headline,
   3 bare tiles (no card chrome) with a 64×64 Dark Blue SVG icon
   above a 2-line Inter Semi Bold 20/28 label.
   Icons fetched directly from Figma 163:4718 / 4731 / 4742 and
   saved as SVG in theme/jtl/images/jp434/icons-3er/.
   ------------------------------------------------------------ */
section.home-icon-3er-section {
    background: #eeeee7 !important;          /* Figma Light Sand */
    padding: 80px 64px;
}
section.home-icon-3er-section > .container,
section.home-icon-3er-section > .container > .row {
    max-width: none;
    margin: 0;
    padding: 0;
}
/* Strip the theme's cyan-tinted decorated-container chrome (cyan bg
   + 15px radius) so the section's Light Sand shows through cleanly.
   Include `.decorated-container-items-wrapper` because it ships
   `padding: 40px 40px 24px` from the theme, which would push the
   grid 40px below Figma's 32px Text-Area→Grid gap. */
section.home-icon-3er-section .decorated-container-wrapper,
section.home-icon-3er-section .decorated-container,
section.home-icon-3er-section .decorated-container-inner,
section.home-icon-3er-section .decorated-container-items-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
section.home-icon-3er-section .decorated-container-heading {
    text-align: center;
    margin: 0 auto 32px !important;          /* Figma section gap-32 */
    max-width: 860px;
}
/* Overline — the theme paints a teal-mint gradient via
   `background-image` + `-webkit-text-fill-color: transparent` to
   text-clip the brand colours. Override both AND the gradient so
   the overline renders solid Tech Blue per Figma 163:4679. */
section.home-icon-3er-section .decorated-container-heading .h6,
section.home-icon-3er-section .decorated-container-heading__over-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;               /* Tech Blue overline */
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;        /* Figma 5% of 18 */
    text-transform: uppercase !important;
    margin: 0 !important;
}
section.home-icon-3er-section .decorated-container-heading h2,
section.home-icon-3er-section .decorated-container-heading__title {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 46px !important;
    letter-spacing: 0.72px !important;       /* Figma 2% of 36 */
    color: #000 !important;                  /* Figma var(--jtl-black, black) */
    margin: 0 !important;
}
/* 3-tile grid */
section.home-icon-3er-section .home-icon-3er-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;                               /* Figma 163:4682 gap-42 */
    max-width: 1008px;                       /* Figma 1008 */
    margin: 0 auto;
}
section.home-icon-3er-section .home-icon-3er-grid > [class*="col"] {
    flex: 1 1 auto;
    max-width: none;
    padding: 0;
    width: 100%;
}
/* Bare tile — strip Bootstrap `.card` chrome (white bg, border,
   border-radius, padding). Figma 163:4683 is just flex-col with
   gap-32 (icon → label). */
section.home-icon-3er-section .card {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    text-align: center;
}
section.home-icon-3er-section .card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;                               /* Figma 163:4683 gap-32 */
}
/* 64×64 Dark Blue SVG icon above each label (Figma 163:4718 /
   4731 / 4742). Per-column ::before nth-child swap so each tile
   gets its specific icon. */
section.home-icon-3er-section .card-body::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px 64px;
    flex: 0 0 64px;
}
section.home-icon-3er-section .home-icon-3er-grid > .col:nth-child(1) .card-body::before {
    background-image: url('images/jp434/icons-3er/chart-fail.svg');
}
section.home-icon-3er-section .home-icon-3er-grid > .col:nth-child(2) .card-body::before {
    background-image: url('images/jp434/icons-3er/code.svg');
}
section.home-icon-3er-section .home-icon-3er-grid > .col:nth-child(3) .card-body::before {
    background-image: url('images/jp434/icons-3er/trend-down.svg');
}
section.home-icon-3er-section .card .h5,
section.home-icon-3er-section .card h5 {
    font-family: Inter, sans-serif;
    font-size: 20px;                         /* Figma H4 20/28 */
    font-weight: 600;                        /* Inter Semi Bold */
    line-height: 28px;
    color: #0b1b45;                          /* Dark Blue */
    margin: 0;
    text-align: center;
}

/* ------------------------------------------------------------
   Section #8 — Lösungen für jede Challenge (Figma 163:4747)
   --------------------------------------------------------------
   Dark blue panel, 1184 × 678 inner with eyebrow + headline +
   body left, 8 logo tiles in a 4×2 grid + CTA tile right.
   ------------------------------------------------------------ */
/* Figma 163:4747: LIGHT SAND outer band with a DARK BLUE rounded
   card inside (46px radius, padding 46/64). Body text + 4×2 logo
   tile grid. The live widget is companies_gallery rendered through
   the partner-slider swiper, so the heading lives in
   `.decorated-container-heading` and the logos in
   `.product-payments-section__gallery`. The swiper is taken out of
   the carousel and forced into a 4-col grid so all 8 tiles render
   in 2 rows like Figma 163:4755. */
section.home-logobox-section {
    background: #eeeee7 !important;          /* Figma Light Sand outer */
    padding: 0 64px 80px !important;          /* Figma pb-80, no pt (adjacent section above) */
    color: #ffffff;
}
section.home-logobox-section > .container,
section.home-logobox-section > .container > .row,
section.home-logobox-section > .container > .row > .col {
    max-width: 1312px !important;
    margin: 0 auto !important;
    padding: 0 !important;                    /* incl. Bootstrap .col 0×15 */
}

/* Dark Blue inner CARD — moves the wrap's cyan/sand chrome out and
   paints the Figma 163:4748 Logo-Box: rounded-46, padding 46/64.
   All descendants inside the wrapper have padding ZEROED — the
   wrapper's 46/64 is the only inset Figma wants. */
section.home-logobox-section .decorated-container-wrapper,
section.home-logobox-section .decorated-container,
section.home-logobox-section .decorated-container-inner {
    background: #0b1b45 !important;
    background-color: #0b1b45 !important;
    background-image: none !important;
    border-radius: 46px !important;
}
section.home-logobox-section .decorated-container-wrapper {
    padding: 46px 64px !important;
}
section.home-logobox-section .decorated-container,
section.home-logobox-section .decorated-container-inner,
section.home-logobox-section .decorated-container-items-wrapper,
section.home-logobox-section .decorated-container-heading,
section.home-logobox-section .decorated-container-heading__over-title,
section.home-logobox-section .decorated-container-heading__title,
section.home-logobox-section .decorated-container-heading__description {
    padding: 0 !important;
    border-radius: 0 !important;             /* only outer wrapper rounds */
    background: transparent !important;
    background-color: transparent !important;
}

/* Heading text colours on Dark Blue. */
section.home-logobox-section .decorated-container-heading {
    max-width: 792px !important;
    margin: 0 0 64px !important;             /* Figma 163:4749 gap-64 */
    text-align: left !important;
}
section.home-logobox-section .decorated-container-heading .h6,
section.home-logobox-section .decorated-container-heading__over-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #89d2ff !important;
    color: #89d2ff !important;               /* Figma Light Blue */
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}
section.home-logobox-section .decorated-container-heading h2,
section.home-logobox-section .decorated-container-heading__title {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #ffffff !important;
    margin: 0 0 12px !important;             /* Figma 163:4750 gap ~12 */
}
section.home-logobox-section .decorated-container-heading p,
section.home-logobox-section .decorated-container-heading .description,
section.home-logobox-section .decorated-container-heading__description {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #ffffff !important;
    margin: 0 !important;
}

/* 4-col tile grid — strip the swiper carousel, lay all 8 tiles out
   in a 4-col grid (gallery has 5 live logos so it'll be 1.25 rows).
   The widget renders `.product-payments-section__gallery > .swiper >
   .swiper-wrapper > .swiper-slide > .product-payments-section__
   gallery-item`. Force display: grid on the wrapper that holds the
   slides; keep .swiper visible and let `display: contents` on the
   .swiper-wrapper expose the slides as direct grid children. */
section.home-logobox-section .decorated-container-items-wrapper {
    padding: 0 !important;
    background: transparent !important;
}
section.home-logobox-section .product-payments-section__gallery,
section.home-logobox-section .home-logobox-grid {
    width: 100% !important;
    padding: 0 !important;                    /* widget ships 32px all-around */
    margin: 0 !important;
}
section.home-logobox-section .swiper-wrapper {
    padding: 0 !important;                    /* swiper-wrapper ships 5px pb */
}
section.home-logobox-section .product-payments-section__gallery .swiper {
    overflow: visible !important;
    width: 100% !important;
}
section.home-logobox-section .product-payments-section__gallery .swiper-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
}
/* The widget renders all 5 logos inside a SINGLE .swiper-slide;
   put the grid there. */
section.home-logobox-section .swiper-slide {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    transform: none !important;
}

/* Logo-Box tile (Figma 163:4757-4764) — 2×2 CSS-grid layout per
   tile: top row = Title left + Icon right, bottom row = (powered-by
   + partner logo) left + Arrow right. 272×180 tile, rounded-24,
   rgba(255,255,255,0.10) bg. The widget's opt-in mode (when class
   contains `home-logobox-grid`) emits .logobox-tile__title /
   __icon / __powered-by / __logo / __arrow inside .logobox-tile. */
section.home-logobox-section .product-payments-section__gallery-item.logobox-tile {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 24px !important;
    padding: 0 !important;
    width: 100% !important;                  /* fill its 1fr grid column
                                                 (plugin's 140px is hard
                                                 width; `auto` collapses to
                                                 content so tile gap looks
                                                 like 72/114px instead of
                                                 the actual 32px grid gap) */
    height: 180px !important;
    box-shadow: none !important;
    display: block !important;
}
section.home-logobox-section .logobox-tile__link {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
        "title    icon"
        ".        ."
        "poweredby ."
        "logo     arrow";
    column-gap: 16px;
    row-gap: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 24px 24px 18px !important;
    background: transparent !important;
    text-decoration: none !important;
}
section.home-logobox-section .logobox-tile__title {
    grid-area: title;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 18px;                          /* shrunk from Figma 20 to fit
                                                  the long German labels
                                                  ("Finanzbuchhaltung",
                                                  "Retourenmanagement") at
                                                  the live ~250px tile width */
    line-height: 24px;
    color: #ffffff;
    /* Clamp to 2 lines; only break at natural word boundaries
       (avoids the previous mid-word "Kundenserv | ice" wrap). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal;
    hyphens: auto;
}
section.home-logobox-section .logobox-tile__icon {
    grid-area: icon;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* Per-nth-child Figma SVG icons (live order: Kundenservice / Finanz-
   buchhaltung / Umsatzsteuer / Retourenmanagement / Preismonitoring) */
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(1) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/user-tag.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(2) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/finance.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(3) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/tax.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(4) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/rotate-3d.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(5) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/pricing-tag.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(6) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/shipping.svg');
}
section.home-logobox-section .swiper-slide > .logobox-tile:nth-child(7) .logobox-tile__icon {
    background-image: url('images/jp434/logobox/trade-network.svg');
}

/* 8th cell = orange CTA tile injected by View.php in home-logobox-grid
   mode (Figma 163:4765). Centred "DISCOVER THE JTL ECOSYSTEM" label
   + small arrow icon, JTL Orange bg, same 24px radius + 180px height
   as the partner tiles. */
section.home-logobox-section .product-payments-section__gallery-item.logobox-tile--cta {
    background: #fb581f !important;
    background-color: #fb581f !important;
    border: 0 !important;
    border-radius: 24px !important;
    padding: 0 !important;
    width: 100% !important;
    height: 180px !important;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25) !important;
    display: block !important;
}
section.home-logobox-section .logobox-tile__link--cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 24px !important;
    background: transparent !important;
    text-decoration: none !important;
}
section.home-logobox-section .logobox-tile__cta-label {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    color: #0b1b45;
    text-align: center;
    max-width: 138px;
}
section.home-logobox-section .logobox-tile__cta-arrow {
    width: 16px;
    height: 13px;
    background-image: url('images/jp434/logobox/arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Bottom-left cluster: "powered by" label above the partner logo. */
section.home-logobox-section .logobox-tile__powered-by {
    grid-area: poweredby;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #ffffff;
    white-space: nowrap;
    margin-bottom: 8px;
}
section.home-logobox-section .logobox-tile__logo {
    grid-area: logo;
    display: block;
}
section.home-logobox-section .logobox-tile__logo picture,
section.home-logobox-section .logobox-tile__logo img {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 120px !important;
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: brightness(0) invert(1);          /* logos white on dark bg */
}

/* Arrow pill — bottom-right of each tile, 46×28 rounded with the
   Figma chevron SVG. */
section.home-logobox-section .logobox-tile__arrow {
    grid-area: arrow;
    align-self: end;
    width: 46px;
    height: 28px;
    background-image: url('images/jp434/logobox/arrow.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 16px 13px;
}

/* ------------------------------------------------------------
   Section #10 — We are in it together (Figma 163:5028 "CTA-Box")
   --------------------------------------------------------------
   2-col 528 + 640 — round/photo left, content right (eyebrow +
   Kurdis headline + body + 2-link list).
   ------------------------------------------------------------ */
/* Figma 163:5028 "CTA-Box-Desktop 1441": Light Sand band, inner box
   = 2-col flex (image-left + text-right) with gap-144 px-0 py-46.
   Image: 528×396 Figma blob composite (3 organic shapes containing
   white chart icons). Right col gap-24 between Sub+Headline / body /
   list-links. Each "list-links" is a WHITE tile card with title left
   + arrow right (Figma 163:5037, p-24, rounded-24). */
section.home-cta-box-section {
    background: #eeeee7 !important;
    padding: 80px 64px !important;
}
section.home-cta-box-section > .container,
section.home-cta-box-section > .container > .row {
    max-width: 1312px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 144px !important;                    /* Figma 163:5029 gap-144 */
}
section.home-cta-box-section > .container > .row > .col {
    flex: 1 !important;
    padding: 0 !important;
}
/* Image — replace the live Blogheader photo with the Figma blob
   composite (3 organic shapes with white chart icons baked in). */
section.home-cta-box-section .home-cta-image {
    content: url('images/jp434/cta-box/testimonial-blobs.png') !important;
    width: 100% !important;
    max-width: 528px !important;
    height: auto !important;
    aspect-ratio: 528 / 396 !important;
    border-radius: 0 !important;              /* Figma has no rounding on the image */
    object-fit: contain !important;
    background: transparent !important;
}
section.home-cta-box-section h6 {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;               /* Figma overline 18, was 14 */
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;         /* 5% of 18 */
    text-transform: uppercase !important;
    color: #2722f8 !important;                /* Tech Blue */
    margin: 0 0 6px !important;               /* Figma Sub+Headline gap-6 */
}
section.home-cta-box-section h2 {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
    margin: 0 0 24px !important;              /* Figma Text gap-24 between blocks */
}
section.home-cta-box-section p {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    margin: 0 0 24px !important;              /* Figma Text gap-24 */
}
/* Convert the live `.product-buttons-group` from a row of pill
   buttons to Figma's vertical stack of white "List-Links2" tile
   cards (rounded-24, p-24, gap-8 between them, full width). */
section.home-cta-box-section .home-cta-box-buttons,
section.home-cta-box-section .product-buttons-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;                      /* Figma 163:5036 gap-8 */
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
}
/* Each link as a white tile card with title-left + arrow-right.
   Override the existing orange pill rule with !important + a more
   specific selector. */
section.home-cta-box-section .product-buttons-group .product-button-group__button--with-icon,
section.home-cta-box-section .product-buttons-group .product-button-group__button--with-icon.is-white {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0b1b45 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 24px !important;
    font-family: Inter, sans-serif !important;
    font-size: 20px !important;               /* Figma H4 */
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    width: 100% !important;
}
/* Arrow icon to the right of each tile's title. */
section.home-cta-box-section .product-buttons-group .product-button-group__button--with-icon::after {
    content: "" !important;
    flex-shrink: 0;
    width: 46px;
    height: 28px;
    background-image: url('images/jp434/cta-box/arrow.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 13px;
}
/* Inner `<span class="...__text">` ships text-transform: uppercase;
   override so the Figma sentence-case label shows ("Partner finden"
   not "PARTNER FINDEN"). */
section.home-cta-box-section .product-buttons-group .product-button-group__button--with-icon__text {
    text-transform: none !important;
    font-family: Inter, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    color: #0b1b45 !important;
}

/* ------------------------------------------------------------
   Section #11 — Bleib im Loop (Figma 163:5050 "Text-Media")
   --------------------------------------------------------------
   2-col text-left + image-right newsletter promo.
   ------------------------------------------------------------ */
/* Figma 163:5050 "Text-Media-Desktop 1440": Light Sand band, 2-col
   text-left + image-right with gap-144. Text col w-528, gap-24
   between Sub+Headline / body / Buttons-row. Buttons row has
   pt-32 → body→button visual gap = 24 (parent gap) + 32 (pt) = 56. */
section.home-text-media-section {
    background: #eeeee7 !important;
    padding: 80px 64px !important;
}
section.home-text-media-section > .container,
section.home-text-media-section > .container > .row {
    max-width: 1312px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 144px !important;                    /* Figma 163:5051 gap-144 */
}
section.home-text-media-section > .container > .row > .col {
    flex: 1 !important;
    padding: 0 !important;
}
section.home-text-media-section h6 {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;               /* Figma overline 18, was 14 */
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;         /* 5% of 18, was 1.4 */
    text-transform: uppercase !important;
    color: #2722f8 !important;
    margin: 0 0 6px !important;               /* Figma Sub+Headline gap-6 */
}
section.home-text-media-section h2 {
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;        /* 2% of 32 */
    color: #0b1b45 !important;
    margin: 0 0 24px !important;              /* Figma Text gap-24 */
}
section.home-text-media-section p {
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    margin: 0 0 56px !important;              /* Figma 24 gap + 32 pt = 56
                                                 between body and Buttons */
}
section.home-text-media-section .product-buttons-group {
    margin: 0 !important;
}
section.home-text-media-section .home-text-media-image {
    width: 100% !important;
    max-width: 640px !important;
    border-radius: 24px !important;
    aspect-ratio: 640 / 438 !important;
    object-fit: cover !important;
}

/* ------------------------------------------------------------
   Shared — orange CTA pill on home-* sections
   ------------------------------------------------------------ */
section.home-cta-box-section .product-button-group__button--with-icon,
section.home-text-media-section .product-button-group__button--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #fb581f;
    color: #0b1b45;
    border: 0;
    box-shadow: none !important;
    border-radius: 145px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    text-decoration: none;
}
section.home-cta-box-section .product-button-group__button--with-icon.is-white,
section.home-text-media-section .product-button-group__button--with-icon.is-white {
    background: transparent;
    color: #0b1b45;
    border: 2px solid #0b1b45;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   Mobile fallback for the home-* sections — stack to 1 col
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    section.home-video-section > .container > .row > .col {
        max-width: 100%;
        width: 100%;
        padding: 0 16px;
    }
    section.home-video-section .home-figma-video {
        height: auto !important;
        aspect-ratio: 16/9;
    }
    section.home-quote-section .blockquote {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }
    section.home-quote-section .blockquote picture,
    section.home-quote-section .blockquote picture img {
        width: 240px !important;
        height: 240px !important;
    }
    section.home-icon-3er-section .home-icon-3er-grid {
        grid-template-columns: 1fr;
    }
    section.home-logobox-section .companies_gallery,
    section.home-logobox-section .home-logobox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    section.home-cta-box-section > .container > .row,
    section.home-text-media-section > .container > .row {
        flex-direction: column;
    }
}

/* ============================================================
   JP-434 — Home JTL Community section (Figma 163:4593
   "Logo-Slider-Desktop 1440")
   --------------------------------------------------------------
   Live: section#jtl-group renders the partner slider via the
   global JP-420 styling (Light Sand `.decorated-container-wrapper`,
   white logo-tile cards, 18×15 SVG nav arrows). Figma asks for
   the home variant of the SAME widget:
     • 46-rounded top corners + 80×64 padding
     • centred eyebrow + headline + body
     • bare logos (no card chrome, no per-logo product title)
     • 46×32 white rounded-pill nav arrows
     • plain black body text (Figma uses --jtl-black, not Dark Blue)
   Scope every rule to `#jtl-group` so the global widget styling
   on /de/integrationen/ + other pages stays untouched.
   ============================================================ */

/* Section band — keep Light Sand bg from JP-420 :has rule, but
   replace 15px all-around radius with 46px top corners only, and
   bump padding to Figma's 80×64 on the WRAPPER. The inner
   `.decorated-container` shipped 80px pb on top of the wrapper's
   80px pb, doubling the bottom gap → zero the inner pad. */
section#jtl-group .decorated-container-wrapper:has(.our-partner-slider) {
    border-radius: 46px 46px 0 0 !important;
    padding: 80px 64px !important;
}
section#jtl-group .decorated-container-wrapper:has(.our-partner-slider) .decorated-container {
    border-radius: 46px 46px 0 0 !important;
    padding: 0 !important;
}

/* Centre the heading block + body text. Plugin inlines
   `max-width: 932px` via the shortcode `max_width` attr; promote
   to 864px (Figma 163:4595 width) and centre with auto margins. */
section#jtl-group .decorated-container-heading {
    max-width: 864px !important;
    margin: 0 auto !important;
    text-align: center !important;
}
section#jtl-group .decorated-container-heading__over-title {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}
section#jtl-group .decorated-container-heading__title,
section#jtl-group .decorated-container-heading__description {
    text-align: center !important;
    width: 100% !important;
}

/* Body — Figma node 163:4599 uses var(--jtl-black, black), not the
   Dark Blue the JP-420 :has rule applies. Margin-top 16→24 matches
   Figma's `gap-[24px]` between Sub+Headline and Body inside the
   Text-Area frame. */
section#jtl-group .decorated-container-heading__description {
    color: #000000 !important;
    margin-top: 24px !important;
}

/* Overline mb 8→6 matches Figma 163:4596's `gap-[6px]` between
   Overline and Headline. */
section#jtl-group .decorated-container-heading__over-title {
    margin-bottom: 6px !important;
}

/* Bare logos — strip the global JP-420 white card chrome (white bg,
   24px radius, 16px padding, 1:1 aspect, shadow) so the logos sit
   directly on the Light Sand band per Figma 163:4602 "Logo-Leiste". */
section#jtl-group .our-partner-slider .swiper-slide__logo {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}
section#jtl-group .our-partner-slider .swiper-slide__logo img,
section#jtl-group .our-partner-slider .swiper-slide__logo picture {
    max-height: 80px !important;
    width: auto !important;
}

/* Hide the per-logo product title ("Kundenservice" etc.). Figma
   shows logos only, no labels. */
section#jtl-group .our-partner-slider .swiper-slide__name {
    display: none !important;
}

/* Logo tile — the plugin paints the white card chrome (bg, 20px
   radius, 24px padding, 9-9-14 shadow) on `.swiper-slide` itself,
   not on `.swiper-slide__logo`. Strip it here so Figma's bare-logo
   row reads through. */
section#jtl-group .our-partner-slider .swiper-slide {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Push the slider inward so the absolute-positioned prev/next
   pills don't sit on top of the edge logos. Figma 163:4600 has
   the 1117px logo strip centred between the 46×32 arrows inside a
   1312px row — i.e. ~52px gap each side. Replicate via horizontal
   padding on the items-wrapper so the swiper is inset and the
   arrows (left:10 / right:10 from this wrapper) clear the logos.
   Vertical padding: top 32→46 = Figma 163:4594 `gap-[46px]`
   between Text-Area and Logo row. */
section#jtl-group .our-partner-slider-items-wrapper {
    position: relative !important;
    padding-top: 46px !important;
    padding-bottom: 0 !important;             /* gap to CTA lives on the CTA margin-top */
    padding-left: 108px !important;
    padding-right: 108px !important;
}
/* Zero the theme's `.decorated-container-items-wrapper` 40px top
   + 24px bottom padding so the body→slider gap and CTA→wrap-bottom
   gap are controlled purely by Figma values (46px above slider,
   80px wrap pb below CTA). */
section#jtl-group .decorated-container-items-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Nav arrows — 46×32 white rounded pill. The buttons are SIBLINGS
   of `.our-partner-slider`, both nested under
   `.our-partner-slider-items-wrapper`, so scope at the wrapper. */
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-prev,
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-next {
    width: 46px !important;
    height: 32px !important;
    background-color: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 4px rgba(11, 27, 69, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: -16px !important;
    color: #0b1b45 !important;
}
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-prev svg,
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-next svg {
    width: 16px !important;
    height: 14px !important;
    display: block !important;
}
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-prev::after,
section#jtl-group .our-partner-slider-items-wrapper .swiper-button-next::after {
    content: none !important;
    display: none !important;
}

/* CTA pill — Figma 163:4622 "Buttons" row has pt-[32px] inside the
   parent flex column whose gap-46 sits above the row. The CTA itself
   is the orange "Beratung Vereinbaren" pill from 331:3615.
   Live: the [product_button_with_icon] shortcode emits
   `<a class="product-button-group__button--with-icon no-icon">` as a
   sibling of `.our-partner-slider-items-wrapper` inside
   `.decorated-container-items-wrapper`. Centre + style as orange pill,
   add the 46+32 = 78px gap above. */
section#jtl-group a.product-button-group__button--with-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 78px auto 0 !important;
    padding: 12px 24px !important;
    background: #fb581f !important;
    color: #0b1b45 !important;
    border-radius: 145px !important;
    font-family: Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    width: max-content !important;
}
/* Centre the inline-flex pill below the slider. Do NOT use
   `display: flex` here — the swiper's translate3d sizing math goes
   haywire inside a flex container (slide widths ballooned to ~32M
   px and only one logo rendered). `text-align: center` + the
   pill's `display: inline-flex` is enough. */
section#jtl-group .decorated-container-items-wrapper {
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-471 Jobs page (/de/jobs/) — typography cascade fixes for widgets where
   the existing rules miss Figma deck rule 17 (Dark Blue Kurdis for h2,
   Tech Blue Inter Semi-Bold for eyebrows). Each rule scoped to body:not(.home)
   so home (different hero treatment) and other pages stay unaffected.
   Hero h1 + hero eyebrow fixes live in PR #89 / branch fix/jp-470-...
   so they are NOT duplicated here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Non-home hero image column — un-absolute it.
   Plugin (wpb-oop-widget-with-global) ships `.hero-product-section__image
   { position: absolute; top: 0 }` for the home full-bleed hero. On non-home
   pages the section is `position: static`, so the absolute escapes to the
   viewport's initial containing block — every hero's right column then
   stacks at page-y=0 and overlaps the page header. On /de/jobs/ this puts
   the bottom hero's beige "Hinweise & Tipps" tip box over the top hero's
   header area. Revert to static layout flow so the right column sits inside
   its own section. */
body:not(.home) section.hero-product-section .hero-product-section__image {
    position: static !important;
    top: auto !important;
}

/* Hide the cyan/teal gradient blob behind the video card — not in Figma
   382:16655. Rendered via ::before on .wawi-tutorial-section__wrapper. */
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__wrapper::before {
    display: none !important;
}

/* wawi-tutorial-section (Video-Box) — restyle to Figma 382:16655 Update.
   White card on Light Sand band, text-left + Dark Blue video-right with
   orange play button. Hide the YouTube thumbnail image (which has baked-in
   "Wir suchen neue Talente" + JTL logo overlays) so the video surface is
   plain Dark Blue per Figma. */
body:not(.home) section.wawi-tutorial-section {
    background-color: #eeeee7;
}
body:not(.home) section.wawi-tutorial-section .container-card-wawi-tutorial.card {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    color: #0b1b45 !important;
}
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
}
/* Video player surface — Dark Blue, no thumbnail */
body:not(.home) section.wawi-tutorial-section .embed-cover {
    background-image: none !important;
    background-color: #0b1b45 !important;
    border-radius: 16px;
}
/* Play button — orange filled circle */
body:not(.home) section.wawi-tutorial-section .embed-play.fa-play-circle,
body:not(.home) section.wawi-tutorial-section .embed-play {
    color: #fb581f !important;
    font-size: 64px !important;
}
/* "BERATUNG VEREINBAREN" CTA pill via ::after (visual placeholder; future-
   proofed: if editor adds a real <a> in the content, the ::after collapses). */
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__content::after {
    content: "BERATUNG VEREINBAREN";
    display: inline-block;
    width: fit-content;
    margin-top: 24px;
    padding: 12px 24px;
    background-color: #fb581f;
    color: #0b1b45;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.32px;
    text-transform: uppercase;
    border-radius: 145px;
}
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__content:has(a)::after {
    display: none;
}
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__content a.btn,
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__content a.vc_btn3,
body:not(.home) section.wawi-tutorial-section .wawi-tutorial-section__content > a {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 24px !important;
    background-color: #fb581f !important;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    border-radius: 145px !important;
    text-decoration: none !important;
}

/* wawi-tutorial-section h3 "VIDEO-EINBLICK" — 20 px → 18 px (eyebrow scale).
   Also reset the orange→yellow `background-clip: text` gradient that's
   making the text appear yellow instead of the Tech Blue `color` I set —
   same JP-83 / JP-26 pattern (background-clip + webkit-text-fill-color
   override is required to actually show the colour). */
body:not(.home) section.wawi-tutorial-section h3.wawi-tutorial-section__subtitle {
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important; /* 5 % of 18 px */
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;
}

/* webinare-slider DecoratedContainer eyebrow "MITARBEITER-STORIES" — Dark
   Blue (navy) per user, Inter Semi-Bold. Reset bg-clip gradient + webkit-
   text-fill-color so the solid colour actually shows. */
body.page-template .webinare-slider-jtl-section .decorated-container-heading__over-title,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-heading__over-title {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    background-image: none !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #0b1b45 !important;
}

/* JP-471 Post-Slider (webinare-slider-jtl-section) — Figma 351:6573.
   Live: dark navy panel with orange decorative square + orange swiper-nav
   buttons. Restyle to Figma:
     - Hide the orange→yellow .decorated-container-square-overlay blob
     - Outer section: white bg
     - Inner panel: Light Sand, rounded 46 px, padding 24 px (tighter than 46)
     - Heading h2 Tech Blue (user override; Figma deck-wide uses Dark Blue for
       h2 but user explicitly asked Blue here — interpret as Tech Blue)
     - Slide cards keep Dark Blue text card body so name + role render WHITE
     - "MEHR ERFAHREN" button replaced with orange arrow icon
     - Swiper nav prev/next: white pills positioned at bottom-right of panel */
body:not(.home) section.webinare-slider-jtl-section .decorated-container-square-overlay {
    display: none !important;
}
/* Outer section bg transparent — inherits the page's Light Sand bg so the
   inner Light Sand panel blends seamlessly without a visible white band
   around it. (Figma 351:6573 puts white outer + Light Sand inner, but on
   our /de/jobs/ page the surrounding sections are Light Sand so white reads
   as an out-of-place band.) */
body:not(.home) section.webinare-slider-jtl-section {
    background-color: transparent !important;
}
body:not(.home) section.webinare-slider-jtl-section .decorated-container-wrapper,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-inner > .decorated-container-wrapper,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-wrapper .decorated-container {
    background-color: #eeeee7 !important;
    border-radius: 46px !important;
    padding: 24px !important;
    position: relative;
}
/* Tighten the heading→slider gap (plugin sets 64 px padding-bottom on the
   heading wrapper — Figma uses ~24 px). */
body:not(.home) section.webinare-slider-jtl-section .decorated-container-heading {
    padding-bottom: 24px !important;
}

/* Heading h2 → Dark Blue Kurdis per Figma 351:6573 (heading is Dark Blue,
   only the eyebrow is Tech Blue). Reset background-clip:text + webkit-text-
   fill-color so the solid colour actually shows. */
body.page-template section.webinare-slider-jtl-section .decorated-container-heading__title,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-heading__title,
body:not(.home) section.webinare-slider-jtl-section h2 {
    color: #0b1b45 !important;
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    background-image: none !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
/* Heading description (if any) → Dark Blue */
body:not(.home) section.webinare-slider-jtl-section .decorated-container-heading__description {
    color: #0b1b45 !important;
}
/* Slide name + role overlay — WHITE per user request (already overlaid on photo) */
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__title,
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__subtitle {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
}
/* Description card bottom — Dark Blue bg + white text so the role description
   also reads white per user request */
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__description {
    background-color: #0b1b45 !important;
    color: #ffffff !important;
}
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__description .text-description,
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__description span,
body:not(.home) section.webinare-slider-jtl-section .swiper-slide__description p {
    color: #ffffff !important;
}
/* Replace "Mehr erfahren" link text with an orange arrow icon, positioned
   bottom-right of the card via absolute positioning (wrapper width was
   overflowing past cardDesc right edge with flex/block approaches). */
body:not(.home) section.webinare-slider-jtl-section .swiper-slide .swiper-slide__description {
    position: relative !important;
    padding-bottom: 48px !important;
}
body:not(.home) section.webinare-slider-jtl-section .swiper-slide .swiper-slide__button-wrapper {
    position: absolute !important;
    right: 24px !important;
    bottom: 12px !important;
    display: block !important;
    width: auto !important;
}
body:not(.home) section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link {
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center;
    margin-left: auto !important;
    width: auto !important;
    min-width: 0 !important;
}
body:not(.home) section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link span.text {
    font-size: 0 !important;
    color: transparent !important;
    width: 0 !important;
    display: none !important;
}
body:not(.home) section.webinare-slider-jtl-section .swiper-slide a.bordered-transparent-link::after {
    content: "→" !important;
    display: inline-block !important;
    font-size: 28px !important;
    color: #fb581f !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    text-align: right;
    width: auto !important;
}
/* Swiper nav prev/next: white pills with arrow icons, positioned BELOW the
   slider wrapper (in the panel's bottom padding area). The buttons are
   children of .slider-mobile-items-wrapper (NOT the panel itself), so
   `bottom: 24px` from THAT wrapper puts them OVER the cards. Use a negative
   bottom value to push them below the slider wrapper into the panel padding.
   Plugin also writes "prev"/"next" text into ::after with font-family
   `swiper-icons` (an icon font where "prev" maps to a left chevron glyph) —
   keep that mechanism, just style colour + size. */
/* Swiper nav prev/next pills — Figma 351:6573 places them at the bottom-
   right of the inner Light Sand panel, INSIDE the panel padding (not
   floating below). Reduce the panel bottom padding from 96 to 64 (matches
   Figma's 46 + button height), keep nav positioned at the BOTTOM-RIGHT of
   the panel using negative bottom relative to their slider-wrapper parent. */
body.page-template section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev,
body.page-template section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next {
    background-color: #ffffff !important;
    background-image: none !important;
    border-radius: 20px !important; /* Figma rounded-[20px] */
    color: #0b1b45 !important;
    width: 46px !important;
    height: 32px !important;
    position: absolute !important;
    top: auto !important;
    bottom: -48px !important;
    margin: 0 !important;
    opacity: 1 !important;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(11, 27, 69, 0.12);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Position next/prev so their right edge aligns with the rightmost card's
   right edge (slider wrapper extends 32 px past the card row). Per Figma
   the nav pills sit flush with the card grid right edge, not the panel
   inner padding edge. */
body.page-template section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next {
    right: 55px !important;
    left: auto !important;
}
body.page-template section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev {
    right: 125px !important; /* 55 + 46 (next width) + 24 (gap) */
    left: auto !important;
}
/* The theme renders the chevron via an inner <i class="fa-arrow-left/right">
   Font Awesome icon, NOT the ::after. The icon's default colour is white
   (made for the old dark nav background); on my white pill it's invisible.
   Force Dark Blue. The :not selector skips the icon if it's not present. */
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev i,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next i,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev i::before,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next i::before {
    color: #0b1b45 !important;
    font-size: 16px !important;
}
/* Hide the swiper-icons ::after if present (theme has its own <i> icon) */
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-prev::after,
body:not(.home) section.webinare-slider-jtl-section .swiper-buttons.swiper-button-next::after {
    display: none !important;
}
/* Panel bottom padding sized to fit the nav pills (which sit at -48px below
   the slider wrapper). Top padding stays 24. Figma uses 46 padding-top/
   bottom; the smaller 24 top keeps the heading area compact. */
body:not(.home) section.webinare-slider-jtl-section .decorated-container-wrapper,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-inner > .decorated-container-wrapper,
body:not(.home) section.webinare-slider-jtl-section .decorated-container-wrapper .decorated-container {
    padding-bottom: 64px !important;
}

/* product-tabs-section h2 "Das bietet dir JTL" — Inter → Kurdis */
body:not(.home) section.product-tabs-section h2.tabbed-widget__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
}

/* Stellenangebote table h4 "Aktuelle Stellenangebote" — Inter grey #333
   → Kurdis Dark Blue */
body:not(.home) section.section-1570 h4.product-management-section__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    color: #0b1b45 !important;
}

/* Stellenangebote SearchFilter facet labels "Firma" / "Standort" — grey → Dark Blue.
   Markup is <li class="sf-field-taxonomy-jobs_*"><h4>label</h4>...</li>. */
body:not(.home) section.section-1570 li[class*="sf-field-taxonomy"] h4 {
    color: #0b1b45 !important;
}

/* JP-471 Infobox mit Bild — Figma 351:6708.
   Keep the live card at its original 700 px size + right-aligned position
   (set by inline .utils-XXX `max-width: 700px; margin-left: 620px`), just
   clean up the chrome: white bg (was teal/cyan #82e3e8) + 24 px radius.
   Inside the card, let the natural Bootstrap col-lg-8 + col-lg-4 layout
   stand; size the image column to match the card height for visual balance. */
body:not(.home) section.product-cta-section.green {
    background-color: #eeeee7;
}
body:not(.home) section.product-cta-section.green .product-subcard-widget {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    padding: 24px !important;
    overflow: hidden;
}
body:not(.home) section.product-cta-section.green .product-subcard-widget > .row {
    align-items: stretch;
}
/* Image column — full-bleed image filling the right column, height matches card */
body:not(.home) section.product-cta-section.green .product-subcard-widget__image-wrapper {
    align-self: stretch;
    overflow: hidden !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
}
body:not(.home) section.product-cta-section.green .product-subcard-widget__image-wrapper picture {
    width: 100%;
    height: 100%;
    display: flex;
    /* Plugin gives the picture `margin-top: -105px` to make it "pop up" above
       the card (a decorative effect). Cancel it so image stays inside card. */
    margin-top: 0 !important;
}
body:not(.home) section.product-cta-section.green .product-subcard-widget__image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
    display: block;
}
body:not(.home) section.product-cta-section.green p {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
}
body:not(.home) section.product-cta-section.green p strong,
body:not(.home) section.product-cta-section.green p b {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    color: #0b1b45 !important;
    display: block;
    margin-top: 8px;
}
body:not(.home) section.product-cta-section.green a.product-button-group__button--with-icon {
    background-color: #fb581f !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important; /* kills the 2px Dark Blue inset shadow that reads as a black border */
    outline: 0 !important;
    color: #0b1b45 !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* JP-471 Top hero CTA — paint the "Aktuelle Stellenangebote" pill orange
   (#fb581f) to match the orange cta-section pill further down the same page.
   Scoped to page-id 8337 only — every other .hero-product-section across the
   158 product-landing pages keeps the JP-425 Dark-Blue CTA. `:not(.mt-0)`
   excludes the second .hero-product-section on this page (the bottom
   "Jetzt bewerben!" block, which renders no .product-button-group anyway). */
body.page-id-8337 section.hero-product-section:not(.mt-0) a.product-button-group__button--with-icon {
    background-color: #fb581f !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: #0b1b45 !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* JP-471 Bottom hero (Jetzt bewerben!) — strip the peach/beige tip-card bg
   (#FFF5E9) so the panel sits flat on the Light Sand page bg. Match all
   text colours to Dark Blue per design tokens. */
body:not(.home) section.hero-product-section.mt-0 .basic-card-border-radius {
    background: transparent !important;
    background-color: transparent !important;
}
body:not(.home) section.hero-product-section.mt-0 .basic-card-border-radius,
body:not(.home) section.hero-product-section.mt-0 p,
body:not(.home) section.hero-product-section.mt-0 li,
body:not(.home) section.hero-product-section.mt-0 strong,
body:not(.home) section.hero-product-section.mt-0 a {
    color: #0b1b45 !important;
}

/* JP-471 Accordion mit Filter (Stellenangebote section.section-1570).
   Actual markup: filter dropdowns use <select class="sf-input-select"> and
   accordion rows use Bootstrap 4 .accordion-row > button.accordion-header
   (NOT BS5 .accordion-button). Restyle filter pills + accordion rows to
   match design tokens (Dark Blue, white pill chrome). */

/* Filter dropdowns (Firma / Standort): Figma 382:15596 spec — Light Sand bg,
   1.39 px Dark Blue border, 24 px corner radius (rounded rectangle, NOT full pill),
   padding 22 px / 12 px, Inter Regular Dark Blue text. */
body:not(.home) section.section-1570 .sf-input-select,
body:not(.home) section.section-1570 select.sf-input-select {
    background-color: #eeeee7 !important;
    border: 1.39px solid #0b1b45 !important;
    color: #0b1b45 !important;
    border-radius: 24px !important;
    padding: 12px 22px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%230b1b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 22px center !important;
    padding-right: 48px !important;
}

/* Accordion row chrome: Light Sand row bg + Tech Blue divider between rows */
body:not(.home) section.section-1570 .accordion-row {
    background: #eeeee7 !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #2722f8 !important;
    overflow: hidden;
}
body:not(.home) section.section-1570 .accordion-row:first-of-type {
    border-top: 1px solid #2722f8 !important;
}
/* "Offene Positionen" eyebrow → Tech Blue */
body:not(.home) section.section-1570 .col-lg.mt-0.mb-0 > p,
body:not(.home) section.section-1570 .col-lg > p:first-child {
    color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
/* Second column (company tag: JTL-Software / Greyhound / countX) → Tech Blue.
   Each accordion-header is a Bootstrap row with cols; the 2nd col holds the
   company name (itemprop="hiringOrganization" or the .col after the title col). */
body:not(.home) section.section-1570 .accordion-row button.accordion-header > div:nth-of-type(2),
body:not(.home) section.section-1570 .accordion-row button.accordion-header [itemprop="hiringOrganization"] {
    color: #2722f8 !important;
}
body:not(.home) section.section-1570 .accordion-row > button.accordion-header,
body:not(.home) section.section-1570 .accordion-header.btn-link {
    background: transparent !important;
    background-color: transparent !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 20px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    width: 100% !important;
}
body:not(.home) section.section-1570 .accordion-row > button.accordion-header * {
    color: #0b1b45 !important;
}

/* "+" expand icon on the right of each row — Tech Blue (was orange #FF9A26).
   The "+" is actually a `::after` pseudo on the button.accordion-header,
   using Font Awesome 6 Pro `content: "+"`. */
body:not(.home) section.section-1570 .accordion-row button.accordion-header::after,
body:not(.home) section.section-1570 .accordion-row .accordion-header.btn-link::after {
    color: #2722f8 !important;
}

/* Company tag (small inline label next to job title) */
body:not(.home) section.section-1570 .accordion-row [class*="hiringOrganization"],
body:not(.home) section.section-1570 .accordion-row [class*="company"],
body:not(.home) section.section-1570 .accordion-row .text-secondary {
    color: #0b1b45 !important;
}

/* Text-boxen cards inside .wawi-panels-widget — Figma 382:15846 Box-grid-
   ohneBild. Each box's first text is Inter Regular 16 px Dark Blue (not a
   styled heading — Figma treats it as a description-like top line). Card
   chrome already matches (white, 24 px radius, 32 px gap). Tightening
   padding from theme's default to Figma's 24 px. Plus: strip the orange
   1 px border that's reading as "yellow border" — Figma cards have no border. */
body:not(.home) section.product-support-section .wawi-panels-widget .wawi-panels-widget__item {
    padding: 24px !important;
    border: 0 !important;
}

/* Centre the top text-area (eyebrow + heading + intro body) per Figma 382:15846
   which has the heading area centered above the 3 boxes. Live default is left.
   The heading sits in a col-lg-6 (half-width left); expand it to span full
   row width so the centered text actually centers on the page horizontally. */
body:not(.home) section.product-support-section.section-1570 > .container > .row > .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
body:not(.home) section.product-support-section.section-1570 .product-support-section__subtitle,
body:not(.home) section.product-support-section.section-1570 h2,
body:not(.home) section.product-support-section.section-1570 .product-support-section__title,
body:not(.home) section.product-support-section.section-1570 > .container > .row > .col-lg-12 > p,
body:not(.home) section.product-support-section.section-1570 > .container > .row > .col-lg-12 > .text-area,
body:not(.home) section.product-support-section.section-1570 .product-management-section__title,
body:not(.home) section.product-support-section.section-1570 > .container > .row > .col-lg-6 > * {
    text-align: center !important;
}
body:not(.home) section.product-support-section .wawi-panels-widget .wawi-panels-widget__item--title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
    margin-bottom: 16px !important;
}
body:not(.home) section.product-support-section .wawi-panels-widget .wawi-panels-widget__item p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
}


/* ── JP-448 .wawi-tutorial-section "Success Story" video-box — restyle to
       Figma 248:4560 "Update" variant (child 382:16654) ────────────────────
   Live BEFORE: dark teal card `#142830` (forced by an inline
   `<style>.utils-XXX { background-color: #142830 !important }</style>`
   emitted per-instance), white h2 in Inter 400 32px, no border-radius on
   the video frame.

   Figma UPDATE: Light Sand outer band `#EEEEE7`, white inner card with
   16.67px radius, Dark Blue Kurdis Wide Bold headline, Tech Blue uppercase
   eyebrow (already correct via JP-439's `.wawi-tutorial-section h3` rule),
   Dark Blue Inter body, rounded-corner video thumbnail. No CTA added at
   this layer — the live widget HTML doesn't render one; if the editor
   wants the orange pill, that's a separate Layer-A template change.

   Global scope: every page using `.wawi-tutorial-section.one-big-card`
   gets the same treatment. The inline `.utils-* { background-color: ... }`
   is beaten by raising specificity (`section.wawi-tutorial-section
   .container-card-wawi-tutorial.card`) + `!important`. */
section.wawi-tutorial-section.one-big-card {
    background-color: #eeeee7 !important;
}
section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card,
section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial[class*="utils-"].card {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    color: #0b1b45 !important;
}
section.wawi-tutorial-section.one-big-card .wawi-tutorial-section__title {
    color: #0b1b45 !important;
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
}
section.wawi-tutorial-section.one-big-card .wawi-tutorial-section__title .font-weight-bold {
    /* The "Megazoo, Solution 360 und JTL" span inherits the new Dark Blue,
       but its own font-weight: bold on the white card was originally
       chosen for white-on-dark contrast — keep it bold, just re-assert
       Dark Blue so it doesn't fall back to a theme grey. */
    color: #0b1b45 !important;
}
/* Card body layout: balance text + video columns symmetrically, vertically
   centre both so the (shorter) text doesn't drag the video into a 2.9:1
   squished band. Figma Update is ~50/50 with both columns centred. */
section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card > .card-body {
    align-items: center !important;
    gap: 48px !important;
}
section.wawi-tutorial-section.one-big-card .wawi-tutorial-section__content {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 24px) !important;
    width: auto !important;
}
/* Right-side video block: equal 50% flex weight (gap 48px split half each
   side), strict 16:9 aspect ratio, then the inner widget + embed-cover
   layers absolutely fill it. Explicit basis is required — `flex: 1 1 0`
   with `aspect-ratio: 16/9` creates a feedback loop with `align-items:
   center` where the video's intrinsic height (driven by aspect-ratio)
   bleeds back into flex's basis calc and gives the video > 50% of the
   row. Pinning both children to `flex: 1 1 calc(50% - 24px)` +
   `max-width: calc(50% - 24px)` breaks that loop and forces symmetric
   columns. */
section.wawi-tutorial-section.one-big-card .one-big-card__video-wrapper {
    flex: 1 1 calc(50% - 24px) !important;
    min-width: 0 !important;
    max-width: calc(50% - 24px) !important;
    width: auto !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
section.wawi-tutorial-section.one-big-card .one-big-card__video-wrapper .wawi-tutorial-widget,
section.wawi-tutorial-section.one-big-card .one-big-card__video-wrapper .wawi-tutorial-widget__video-item {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
section.wawi-tutorial-section.one-big-card .wawi-tutorial-widget__video-item .embed-cover {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
/* Play button: replace the white FontAwesome glyph with the Figma Update's
   vibrant orange play-circle (#FB581F, the same Primary CTA orange used on
   `fill_R8JGBQ` / `fill_IBZC8K` in node 248:4560). Centre absolutely so it
   stays in the exact middle of the 16:9 video frame regardless of viewport.
   Icon stays the FontAwesome `fa-play-circle` glyph (already a circle with
   a play triangle inside) — recoloured rather than rebuilt. */
section.wawi-tutorial-section.one-big-card .wawi-tutorial-widget__video-item .embed-play.fa-play-circle,
section.wawi-tutorial-section.one-big-card .wawi-tutorial-widget__video-item .embed-play {
    color: #FB581F !important;
    background: transparent !important;
    font-size: 88px !important;
    line-height: 1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    cursor: pointer !important;
    /* Subtle white halo so the orange reads on light video thumbnails */
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}
/* Decorative purple-gradient blob painted via .one-big-card__row::before
   (374×254px, top:0, left:-10px) blended with the old dark-teal card but
   sticks out against the new Light Sand + white card combo. Hide it — the
   Figma Update version has no such ornament. */
section.wawi-tutorial-section.one-big-card .one-big-card__row::before {
    display: none !important;
    content: none !important;
}
/* Mobile (≤ 991px): card-body stacks to column. Both children fill 100%
   of the card width (override the desktop 50%-cap). Video keeps 16:9.
   Text wraps naturally with the full mobile width. */
@media (max-width: 991.98px) {
    section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card > .card-body {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: stretch !important;
    }
    section.wawi-tutorial-section.one-big-card .wawi-tutorial-section__content,
    section.wawi-tutorial-section.one-big-card .one-big-card__video-wrapper {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ── JP-448 .chanel-wrapper "Weitere verwandte Features + Produkte" widget
       — fix 3-card grid distribution + title typography + outer container
       chrome ──────────────────────────────────────────────────────────────
   Live BUG: each `.chanel-content` card has `flex: 0 0 calc(25% - 22.5px)`
   (sized for 4-up), but the `.has-3-items` block only contains 3 cards,
   so they occupy 75% of the row and leave a giant blue band on the right.
   Title also still renders Inter 400 (should be Kurdis Wide Bold) and the
   outer 15px radius is smaller than the rest of the deck's tokens.

   Fixes (scoped narrowly so other .has-N-items variants are untouched):
   1. Switch `.chanel-content-wrapper.has-3-items` from flex+wrap to CSS
      grid with `grid-template-columns: repeat(3, 1fr)` so the 3 cards
      stretch evenly across the full width with symmetric gutters.
   2. Reset the per-card 25% flex-basis when inside `.has-3-items` so the
      grid track sizing wins.
   3. Title `.chanel-heading__title` → Kurdis Wide Bold 700 (deck token).
   4. Outer wrapper: 24px radius + symmetric 56px padding (was 64/56 split).
   5. Mobile <768px: 1-column stack; tablet 768-991: 2 columns; ≥992 = 3. */
/* ── JP-448 .product-payments-section "Top Zahlungsanbieter nativ
       integriert" — curved-wave divider + symmetric 3-col logo grid ──────
   Live BUG (target=screenshot, /de/shop-software/ at yTop=2054):
   - Light blue (#89D2FF) left panel + Dark Blue (#0B1B45) right panel
     created via `.container-product-payments-card::before` 759x553
     absolute rectangle. No clip-path → hard, straight vertical divider.
   - Right panel logos are rendered inside a Swiper carousel
     (`.swiper.is-desktop > .swiper-wrapper > .swiper-slide > .gallery-item`)
     which lays them out in 2/2/1 staggered slides, asymmetric.
   - Outer card already has 46px radius but no `overflow: hidden`, so any
     clip-path on the pseudo could bleed past the rounded corners.

   Fix (CSS-only, scoped to this widget):
   1. `overflow: hidden` on `.container-product-payments-card.card` so the
      curved pseudo + grid stay inside the 46px radius.
   2. `clip-path: ellipse(85% 150% at 100% 50%)` on the ::before pseudo —
      ellipse centred at the right-middle of the dark panel with large
      radii (85% wide, 150% tall). The visible left edge becomes a smooth
      concave curve (widest at top/bottom, narrowest in the middle).
   3. Override the Swiper layout with CSS grid: switch `.swiper-wrapper`
      to `display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px`,
      drop the swiper's inline translate3d via `transform: none`, and use
      `display: contents` on `.swiper-slide` so its children flow as
      direct grid items. The 5 logo tiles end up in a 3-2 grid, each tile
      uniform 1:1 aspect, evenly distributed across the dark panel.
   4. Keep the existing white tile chrome (bg #fff, radius 20px) — already
      shipped by JP-353 / JP-420, don't double-style. */
.product-payments-section .container-product-payments-card.card {
    overflow: hidden !important;
}
.product-payments-section .container-product-payments-card.card::before {
    clip-path: ellipse(85% 150% at 100% 50%) !important;
}
.product-payments-section .container-product-payments-card .swiper.is-desktop {
    overflow: visible !important;
}
.product-payments-section .container-product-payments-card .product-payments-section__gallery-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    transform: none !important;
    justify-items: center !important;
    align-items: center !important;
}
.product-payments-section .container-product-payments-card .swiper-slide {
    display: contents !important;
}
.product-payments-section .container-product-payments-card .product-payments-section__gallery-item {
    width: 100% !important;
    max-width: 160px !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    margin: 0 !important;
}
@media (max-width: 767.98px) {
    /* Mobile: drop to 2-col so 132px tiles fit comfortably; the dark-panel
       ::before is already hidden on mobile by the original widget CSS
       (`content: none`) — let the title + logos sit on the light blue card. */
    .product-payments-section .container-product-payments-card .product-payments-section__gallery-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


.chanel-wrapper.purple {
    border-radius: 24px !important;
    padding: 56px !important;
}
.chanel-wrapper .chanel-heading {
    padding-bottom: 40px !important;
}
.chanel-wrapper .chanel-heading__title {
    color: #ffffff !important;
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
}
.chanel-wrapper .chanel-content-wrapper.has-3-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}
.chanel-wrapper .chanel-content-wrapper.has-3-items > .chanel-content {
    /* Reset the 4-up flex sizing so the 3-col grid track defines width. */
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 20px !important;
}
@media (max-width: 991.98px) {
    .chanel-wrapper .chanel-content-wrapper.has-3-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 767.98px) {
    .chanel-wrapper.purple {
        padding: 32px !important;
    }
    .chanel-wrapper .chanel-content-wrapper.has-3-items {
        grid-template-columns: 1fr !important;
    }
}

/* ── JP-169 /de/warenwirtschaftssystem (page-id-277919) ────────────────
   Per-page audit: the page-template-product-landing template renders
   h1 with `.text-gray-333` + `.font-weight-normal` and h2 with
   `.font-weight-normal` — both kill the design-system Kurdis Wide Bold
   Dark Blue cascade. Figma 188:897 (Produkt-Warenwirtschaft) intent for
   the H1: Kurdis Wide Bold 40px / 56lh Dark Blue (node 188:3210
   tracking-[0px]). H2: Kurdis Wide Bold 32px / 40lh Dark Blue.

   Scope: body.page-template-product-landing so the fix lights up every
   product landing page (JP-164/165/169/178/188/202 etc.). Excluded:
   section.section-1690 (Contact widget) — its h2 is an 18px Tech-Blue
   uppercase eyebrow and the redesign-styles wrapper handles it
   correctly; do NOT inherit the page-level h2 typography there.
   ───────────────────────────────────────────────────────────────────── */
body.page-template-product-landing h1,
body.page-template-product-landing h1.text-gray-333,
body.page-template-product-landing h1.font-weight-normal {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
    font-size: 40px !important;
    line-height: 56px !important;
}

body.page-template-product-landing main section:not(.section-1690) h2,
body.page-template-product-landing main section:not(.section-1690) h2.font-weight-normal {
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
    font-size: 32px !important;
    line-height: 40px !important;
}

@media (max-width: 767.98px) {
    body.page-template-product-landing h1 {
        font-size: 28px !important;
        line-height: 36px !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    body.page-template-product-landing main section:not(.section-1690) h2 {
        font-size: 24px !important;
        line-height: 32px !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* JP-169: eyebrow / overline. WPBakery generates per-instance .utils-XXX
   classes that paint these spans orange #FF9A26 (legacy theme color). The
   smoking-gun pattern is `span.text-uppercase.font-weight-bold[class*=utils-]`
   above each H1/H2. Design-system intent: Tech Blue #2722f8, Inter SemiBold
   uppercase 18px/24, 0.9px letter-spacing — matches the existing
   .redesign-styles__overtitle on the Contact widget (which user confirmed OK). */
body.page-template-product-landing main span.text-uppercase.font-weight-bold[class*="utils-"] {
    color: #2722f8 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-472 Presse (/de/presse/, post 3546) — page-polish cascade fixes
   Scoped to body.page-id-3546 so the 158 other product-landing pages
   stay on the JP-425 baseline. Each block addresses a divergence found
   during the JP-472 verify-vs-Figma sweep.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Widget #1 — Hero band ────────────────────────────────────────────────
   Right column: HIDDEN for now — the editor has a `[page_author]` placeholder
   with no real image; Figma 374:7654 calls for an organic-clipped photo
   instead, and an empty author card overlapping the nav looked broken.
   To re-enable when the editor adds a proper image, change `display: none`
   to `display: block` (or simply delete this rule).
   The `position: static` line below is the JP-471 PR #91 un-absolute fix —
   redundant once #91 merges, so it can come out during rebase.
   Eyebrow tokens, h1 Kurdis, intro Dark Blue — close JP-425 typography
   gaps Figma 374:7654 calls for. ──────────────────────────────────────── */
body.page-id-3546 section.hero-product-section .hero-product-section__image {
    display: none !important;
    position: static !important;
    top: auto !important;
}
body.page-id-3546 section.hero-product-section .product-support-section__subtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    text-transform: uppercase !important;
}
body.page-id-3546 section.hero-product-section .hero-product-section__content--title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', 'Kurdis', Inter, sans-serif !important;
    font-weight: 700 !important;
}
body.page-id-3546 section.hero-product-section .hero-product-section__content p,
body.page-id-3546 section.hero-product-section .hero-product-section__content p strong,
body.page-id-3546 section.hero-product-section .hero-product-section__content p b {
    color: #0b1b45 !important;
}

/* ── Widget #2 — YouTube channel "Infobox-Split" card ─────────────────────
   Matches Figma 347:4453 (Info-Box-Split-Desktop 1440):
   - Card bg: solid Light Blue #89d2ff (drop the editor's Group-15047.svg
     bg-image — it paints a yellow swirl on the left and a dark blue overlay
     on the right that diverge from Figma).
   - Card height: flex with content (theme defaults to a fixed 156px via
     CardsStandard inline height). Set `height: auto` + meaningful padding.
   - Body: Inter Regular 18 / 28 Dark Blue (live was 16 / 24, theme #333)
   - CTA: ORANGE FILLED pill #fb581f with Dark Blue text (live was JP-425
     Dark Blue outline pill — wrong family for this widget). */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card {
    background-color: #89d2ff !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
    /* Vertical padding tightened (32px) so the module is thinner; horizontal
       padding kept 46px to match Figma 347:4453. */
    padding: 32px 46px !important;
}
/* Kill the WPBakery `offset-xl-2` that pushes the left column ~210 px in
   from the left edge. Slot the title + play icon flush with the card's
   left padding instead. */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card .col-lg-6.col-xl-5.offset-xl-2 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}
/* Widen the right column to a proper 50 % (the WPBakery markup left it at
   `col-xl-3` ≈ 25 %, far narrower than the white panel area) and push the
   content right past the wave's blue "tongue" so the body text + CTA sit
   fully on the white panel. */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card .col-lg-6.col-xl-3 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 120px !important;
}
/* Tighten the play-icon gap so the left column reads as a tight title +
   icon stack rather than a tall split layout. */
body.page-id-3546 section.product-payments-section .product-payments-section__title::after {
    margin-top: 16px !important;
}
body.page-id-3546 section.product-payments-section .container-product-payments-card.card > .card-body,
body.page-id-3546 section.product-payments-section .container-product-payments-card.card .card-body {
    background-color: transparent !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* The theme's CardsStandard widget paints a decorative dark-blue ::before
   pseudo over the right half (absolute-positioned, 758×294 px). Kill it —
   Figma 347:4453 has no such overlay. We re-use ::after for the Figma
   wavy white panel decoration below. */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Figma 347:4453 decorations:
   ::after = wavy WHITE panel on the right half (Figma asset 335:3892,
              downloaded to theme/jtl/images/jp472/infobox-split-wave.svg).
   .product-payments-section__title::after = 80×80 Dark Blue play-circle
              icon under the headline (Figma asset 335:3899). */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card {
    position: relative !important;
    overflow: hidden !important;
}
body.page-id-3546 section.product-payments-section .container-product-payments-card.card::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Wider than 50% so the curve apex bulges into the blue half. Figma uses
       this same shape with `scaleX(-1)` (its `-scale-y-100 rotate-180` combo
       resolves to a horizontal flip) so the concave edge sits at the divide. */
    width: 55% !important;
    height: 100% !important;
    background-color: transparent !important;
    background-image: url('images/jp472/infobox-split-wave.svg') !important;
    background-size: 100% 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    transform: scaleX(-1) !important;
    pointer-events: none;
    z-index: 0;
}
/* Card content needs to sit ABOVE the wave overlay so the right-column
   body text + CTA stay readable on the white panel. */
body.page-id-3546 section.product-payments-section .container-product-payments-card.card > .card-body {
    position: relative !important;
    z-index: 1 !important;
}
/* 80×80 play-circle icon under the h2 in the left column. */
body.page-id-3546 section.product-payments-section .product-payments-section__title::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 80px !important;
    margin-top: 32px !important;
    background-image: url('images/jp472/play-circle.svg') !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}
body.page-id-3546 section.product-payments-section p,
body.page-id-3546 section.product-payments-section .wpb_wrapper p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}
body.page-id-3546 section.product-payments-section a.product-button-group__button--with-icon {
    background-color: #fb581f !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: #0b1b45 !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* ── Widget #3 — Ressourcen 3-card carousel → Figma 351:6573 (Post-Slider)
   - Hide the orange→yellow .decorated-container-square-overlay decoration.
   - Outer .decorated-container-wrapper: Light Sand #eeeee7, 46 px radius,
     46 px padding (theme default was dark navy #142830 / 15 px / less pad).
   - Overtitle: Tech Blue Inter SemiBold 18 / 0.9 px tracking / uppercase.
   - Title: Dark Blue Kurdis Wide Bold 32/46/0.64.
   - Each card (.card-mobile-item.with_image): white bg, 24 px radius,
     overflow-hidden so the image clips into the top corners.
   - Inner DOM is split across .swiper-slide__top-heading (which holds the
     image AND the title overlaid on it) and .swiper-slide__description.
     Use `display: contents` on `.swiper-slide__top-heading` so its kids
     become direct flex children of the card, then reorder so image sits
     on top and the title moves down into the white panel.
   - Title (.swiper-slide__title): Inter SemiBold 20/28 Dark Blue.
   - Description (.text-description): Inter Regular 16/24 Dark Blue.
   - Button (.bordered-transparent-link): strip pill chrome, render as a
     "Mehr erfahren →" style link with the orange arrow SVG on the right
     (Figma asset 150:6345 → theme/jtl/images/jp472/arrow-orange.svg). */
body.page-id-3546 section.orange.black .decorated-container-square-overlay {
    display: none !important;
}
body.page-id-3546 section.orange.black .decorated-container-wrapper {
    background-color: #eeeee7 !important;
    border-radius: 46px !important;
    padding: 46px !important;
}
/* Inner `.decorated-container` paints its own dark navy on top of the
   wrapper — flatten it to transparent so the Light Sand shows through. */
body.page-id-3546 section.orange.black .decorated-container {
    background-color: transparent !important;
}
body.page-id-3546 section.orange.black .decorated-container-heading__over-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    background: none !important;
    text-transform: uppercase !important;
}
body.page-id-3546 section.orange.black .decorated-container-heading__title {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', 'Kurdis', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
}
/* Tighten the gap between the heading row and the 3-card grid.
   Theme defaults to 24 px margin-bottom on the heading + 40 px padding-top
   on the items-wrap = 64 px total. Figma 351:6573 calls for ~46 px gap
   between text-area and slider-area. Zero the heading margin and reduce
   items-wrap padding-top so the total visual gap is ~32 px. */
body.page-id-3546 section.orange.black .decorated-container-heading {
    margin-bottom: 0 !important;
}
body.page-id-3546 section.orange.black .decorated-container-items-wrapper {
    padding-top: 32px !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image {
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden;
}
/* Flatten .swiper-slide__top-heading so its image+title become direct
   children of the card → we can reorder them. */
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__top-heading {
    display: contents !important;
}
/* The theme paints `.swiper-slide__top-heading::before` as an absolute
   linear-gradient overlay (transparent → rgba(0,0,0,0.9)) sized to the
   element. With `display: contents` flattening the wrapper, the pseudo
   resolves to the card-mobile-item's containing block and darkens the
   entire card. Suppress it — the original purpose was a readability
   gradient for a title overlaid on the image; since we moved the title
   out of the image area, the overlay is no longer needed. */
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__top-heading::before,
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__top-heading::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__image {
    order: 1 !important;
    width: 100%;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__title-heading {
    order: 2 !important;
    /* Theme renders this as a full-card absolute overlay (top/right/bottom/left=0),
       overlaying the image AND covering the description below. Demote to static
       so it joins the flex flow as a normal block. */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    padding: 24px 24px 6px !important;
    background-color: #ffffff !important;
    max-width: none !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
    background: none !important;
    -webkit-text-fill-color: #0b1b45 !important;
    text-shadow: none !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__description {
    order: 3 !important;
    padding: 0 24px 24px !important;
    background-color: #ffffff !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image .text-description {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
    display: block;
    margin-bottom: 16px;
}
/* "Mehr erfahren →" arrow link — strip the pill border + bg the theme
   gives `.bordered-transparent-link`; render as a flex row with the
   editor-authored CTA text on the left and an orange arrow on the right. */
body.page-id-3546 section.orange.black .card-mobile-item.with_image .swiper-slide__button-wrapper {
    margin-top: 0 !important;
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    width: 100% !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image a.bordered-transparent-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image a.bordered-transparent-link .text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #0b1b45 !important;
    text-transform: none !important;
}
body.page-id-3546 section.orange.black .card-mobile-item.with_image a.bordered-transparent-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 46px !important;
    height: 28px !important;
    background-image: url('images/jp472/arrow-orange.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 20px 14px !important;
}

/* ── Widget #4 — Newsletter signup card → Hubspot/Kontakt-Box pattern ────
   Follows JP-347 (Figma 248:4150 Hubspot-Desktop 1440) — the same Dark Blue
   card + Light Blue form panel + orange pill submit used on the global
   Kontakt page. Tokens / structure mirror theme/jtl/assets/css/kontakt-box.css
   but here scoped to body.page-id-3546 + the live WPBakery DOM
   (`.container-product-support-card` + `.col-lg-6.nl-anmeldung` + standard
   HubSpot `.hs-form` markup).

   Layout: flex row, text col flex 1 1 0, form col flex 0 0 ~480px so the
   content drives sizing instead of the WPBakery 50/50 grid. */
/* Widen the section so the text col, gap, and form col fit naturally
   on one row (matches the Kontakt-Box proportions: text 380 + gap 48 +
   form 480 + 80 padding ≈ 988 inner → ~1100 container width). */
body.page-id-3546 section.product-support-section > .container {
    max-width: 1200px !important;
}
body.page-id-3546 section.product-support-section.orange .container-product-support-card.card {
    background-color: #0b1b45 !important;  /* JTL Dark Blue */
    border-radius: 46px !important;
    max-width: 100% !important;
}
body.page-id-3546 section.product-support-section.orange .container-product-support-card.card > .card-body,
body.page-id-3546 section.product-support-section.orange .container-product-support-card.card .card-body {
    background-color: transparent !important;
    /* Tighter vertical padding so the module isn't 663 px tall. */
    padding: 32px 40px !important;
}
/* Flex the inner row so the text + form panels size to their content.
   Left col capped at 360 px so the body copy wraps inside the Dark Blue
   panel and never crosses into the Light Blue side; right col at 460 px
   so the form panel has room for the 2-up Vorname/Nachname row. */
body.page-id-3546 section.product-support-section .container-product-support-card .card-body > .row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    /* `justify-content: space-between` pins the text col to the left edge
       and the form col to the right edge of the card-body — Figma 248:7162
       has the form col flush against the card's right inner padding. */
    justify-content: space-between !important;
    gap: 40px;
    margin: 0 !important;
}
body.page-id-3546 section.product-support-section .container-product-support-card .card-body > .row > .col-lg-6:not(.nl-anmeldung) {
    flex: 0 1 380px !important;
    max-width: 380px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}
body.page-id-3546 section.product-support-section .container-product-support-card .card-body > .row > .col-lg-6.nl-anmeldung {
    flex: 0 1 460px !important;
    max-width: 460px !important;
    margin: 0 !important;
}

/* Text column tokens — Kontakt-Box LEFT panel:
   eyebrow Light Blue / heading + body WHITE. */
body.page-id-3546 section.product-support-section .redesign-styles__overtitle {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    color: #89d2ff !important;          /* JTL Light Blue */
    -webkit-text-fill-color: #89d2ff !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    text-transform: uppercase !important;
}
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) .redesign-styles__title,
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) .redesign-styles__title * {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', 'Kurdis', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #ffffff !important;
    display: block !important;
}
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) .redesign-styles__text,
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) .redesign-styles__text *,
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) p,
body.page-id-3546 section.product-support-section .col-lg-6:not(.nl-anmeldung) p * {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: #ffffff !important;
}

/* Form panel — Kontakt-Box RIGHT panel: Light Blue bg, 20 px radius. */
/* Specificity boost: the theme ships `#app .basic-br { background-color:
   white !important }` with ID-level specificity (1,1,0). A class-only
   chain loses no matter how long. Include `#app` so the Light Blue paint
   wins. Also overrides the purple-variant `.nl-anmeldung.bg-tertiary`
   rule earlier in this file. */
body.page-id-3546 #app section.product-support-section .col-lg-6.nl-anmeldung.bg-tertiary,
body.page-id-3546 #app section.product-support-section .border-big.nl-anmeldung.bg-tertiary {
    border: 0 !important;
    background-color: #89d2ff !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin: 0 !important;
    flex: 0 1 460px !important;
    max-width: 460px !important;
}

/* "Newsletter-Anmeldung" h3 — the form's title (rendered by the HubSpot
   embed as <h3><span style="color:#ff9a26">...</span></h3>). Strip the
   inline orange + render Dark Blue Kurdis like the Kontakt-Box. */
body.page-id-3546 section.product-support-section .hs-richtext h3,
body.page-id-3546 section.product-support-section .hs-richtext h3 span {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', 'Kurdis', Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: #0b1b45 !important;
    margin: 0 0 16px !important;
}

/* HubSpot form layout — stack rows, gap matches Kontakt-Box (18 px). */
body.page-id-3546 section.product-support-section form.hs-form {
    display: flex !important;
    flex-direction: column !important;
    /* Figma 248:7171 calls for 16.667 deck → 24 production gap between
       form rows (title / fields / Datenschutz / SENDEN button). */
    gap: 16px !important;
    width: 100% !important;
}
body.page-id-3546 section.product-support-section form.hs-form fieldset {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}
/* HubSpot wraps each hidden tracking field (utm_source, utm_medium,
   utm_campaign, hs_language, recent_conversion_type, form_url) in its
   own `<fieldset class="form-columns-1">`. Hiding only the inner
   .hs-form-field leaves the fieldset with `height: 0` but it still
   contributes a row to the parent's `gap: 24px` flex layout — that was
   the ~70 px dead space between E-Mail and the Datenschutz checkbox.
   Hide the fieldset itself when none of its inputs are visible. */
body.page-id-3546 section.product-support-section form.hs-form fieldset:has(input[type="hidden"]):not(:has(input:not([type="hidden"]))) {
    display: none !important;
}
body.page-id-3546 section.product-support-section form.hs-form .form-columns-2 {
    display: flex !important;
    gap: 12px !important;
}
body.page-id-3546 section.product-support-section form.hs-form .form-columns-2 > .hs-form-field {
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto !important;
}
body.page-id-3546 section.product-support-section form.hs-form .form-columns-1 .hs-form-field {
    width: 100% !important;
}
body.page-id-3546 section.product-support-section form.hs-form .hs-form-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
}
/* Hide the HubSpot hidden-tracking wrappers (utm_source, utm_medium,
   utm_campaign, hs_language, recent_conversion_type, form_url). HubSpot
   marks the <input> as type="hidden" but leaves the wrapper visible, and
   my `display: flex` on .hs-form-field re-exposes the label. */
body.page-id-3546 section.product-support-section form.hs-form .hs-form-field:has(> .input > input[type="hidden"]),
body.page-id-3546 section.product-support-section form.hs-form .hs-fieldtype-text:has(input[type="hidden"]),
body.page-id-3546 section.product-support-section form.hs-form .hs_utm_source,
body.page-id-3546 section.product-support-section form.hs-form .hs_utm_medium,
body.page-id-3546 section.product-support-section form.hs-form .hs_utm_campaign,
body.page-id-3546 section.product-support-section form.hs-form .hs_hs_language,
body.page-id-3546 section.product-support-section form.hs-form .hs_recent_conversion_type,
body.page-id-3546 section.product-support-section form.hs-form .hs_form_url {
    display: none !important;
}
body.page-id-3546 section.product-support-section form.hs-form .hs-form-field > label {
    display: block !important;
    margin: 0 !important;
    font-family: 'Arial', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #0b1b45 !important;
}
body.page-id-3546 section.product-support-section form.hs-form .hs-form-field .hs-form-required {
    color: #fb581f !important;
    margin-left: 0 !important;
}
body.page-id-3546 section.product-support-section form.hs-form input.hs-input[type="text"],
body.page-id-3546 section.product-support-section form.hs-form input.hs-input[type="email"],
body.page-id-3546 section.product-support-section form.hs-form input.hs-input[type="tel"],
body.page-id-3546 section.product-support-section form.hs-form select.hs-input,
body.page-id-3546 section.product-support-section form.hs-form textarea.hs-input {
    width: 100% !important;
    height: 40px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    border: 1px solid #89d2ff !important;
    border-radius: 3px !important;
    font-family: 'Liberation Sans', 'Arial', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 17px !important;
    color: #0b1b45 !important;
    outline: none !important;
}
body.page-id-3546 section.product-support-section form.hs-form input.hs-input:focus,
body.page-id-3546 section.product-support-section form.hs-form select.hs-input:focus,
body.page-id-3546 section.product-support-section form.hs-form textarea.hs-input:focus {
    border-color: #2722f8 !important;
}
body.page-id-3546 section.product-support-section form.hs-form .hs-input::placeholder {
    color: #bfbfbf !important;
    font-weight: 700 !important;
}
/* Legal consent (checkbox + Datenschutzrichtlinie link). */
body.page-id-3546 section.product-support-section form.hs-form .legal-consent-container .hs-form-booleancheckbox-display {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    font-family: 'Arial', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    color: #0b1b45 !important;
}
body.page-id-3546 section.product-support-section form.hs-form .legal-consent-container input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    flex: 0 0 13px !important;
    width: 13px !important;
    height: 13px !important;
    margin: 3px 0 0 0 !important;
}
body.page-id-3546 section.product-support-section form.hs-form .legal-consent-container a {
    color: #2722f8 !important;
    text-decoration: underline !important;
}
/* Submit pill — orange filled, Dark Blue text. */
body.page-id-3546 section.product-support-section form.hs-form input.hs-button[type="submit"],
body.page-id-3546 section.product-support-section form.hs-form .hs-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 12px 0 0 0 !important;
    padding: 12px 24px !important;
    border: 0 !important;
    background-color: #fb581f !important;
    color: #0b1b45 !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer !important;
}
/* ============================================================
   JP-446 — /de/ki/ cascade audit follow-ups (rule 17 typography)

   Two h2s on this page bypass JP-374's .__title-wrapper selector
   because their DOM context puts the h2 directly under .container
   or .card-body (no wrapper). They render theme grey #333 Inter
   instead of Dark Blue Kurdis. Fix below targets the .__title
   classes directly so it lands regardless of wrapper presence.

   Reaches the same end state JP-374 specified; doesn't conflict
   with the wrapper-scoped rule above (both paint identical tokens).
   ============================================================ */
.product-company-section .product-companies-section__title,
.product-support-section .product-support-section__title {
    color: #0b1b45 !important;
    /* Kurdis not loaded in this env — Inter fallback per
       JP-374 / JP-337 / JP-347 / JP-357 / JP-365 precedent. */
    font-family: "Kurdis", "Kurdis Wide Bold", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    text-transform: none !important;
    margin: 0 0 16px !important;
}

/* ============================================================
   JP-446 — Logo-Slider restyle to Figma node 351:6770
   "Logo-Slider-Desktop 1440".

   Live structure: the section is rendered by a WPBakery row in
   the page DB content (`[HeadlineStandard]` + `[templatera id=264560]`),
   so the only DOM elements present are:
     - section.product-company-section
     - h2.product-companies-section__title (the heading text)
     - .product-companies-section__slider (the swiper of logos)
   Figma adds three more elements (eyebrow, description paragraph,
   CTA pill) that aren't in the live markup. Per the project rule
   "no new files in this turn", we inject those three as CSS
   pseudo-content on the h2 + the section. The CTA pseudo is
   visually-only (not clickable) — a real button requires a DB
   script (Layer B per CLAUDE.md rule 4) and is flagged.

   Kurdis font isn't shipped with the theme (only Inter / Proxima /
   Museo) — Inter fallback per JP-374 / JP-337 / JP-347 / JP-357 /
   JP-365 precedent. Loading the real Kurdis font requires the
   .woff2 files which would need to be added to theme/jtl/dist/fonts/.

   NOTE: JP-205 dark-card override + JP-213 dark-card override + JP-449
   sweep blocks follow this comment, all from main. They coexist with
   the JP-446 rules above (different selectors). The .product-company-
   section block below opens with three contributors: JP-446 adds
   `background-color: transparent`, JP-449 adds the rest; merged into
   one combined rule.
   ============================================================ */

/* ── JP-205 /de/gutscheinsystem (page-id-125841) ──────────────────────
   The Pricing section wraps a .basic-card-widget that paints a dark
   teal #142830 background via WPBakery .utils-XXX. The body text inside
   is white, but the .product-support-section__title h2 ("Verfügbarkeit
   & Kosten des Gutscheinsystems") inherits the design-system Dark Blue
   and reads as Dark Blue on Dark Blue — invisible. WPBakery tried to
   fix this with a per-instance utils-XXX color:white override but the
   design-system .product-support-section__title rule (higher specificity)
   wins.

   The H2 wraps "Gutscheinsystems" in <span class="font-weight-bold">,
   and that span gets its colour from a SEPARATE design-system rule
   (.product-support-section .product-support-section__title
   .font-weight-bold). The override must target BOTH the H2 and the
   inner span, otherwise the trailing bold word stays Dark Blue while
   the rest turns white. (Original PR #102 caught only the H2; this
   follow-up adds the inner-span selector. Discovered via the JP-213
   sister page.)

   Boost specificity so white wins on this single dark-card instance.
   Scoped to page-id-125841 so other product-support-section instances
   on light backgrounds (most pages) keep their Dark Blue.
   ─────────────────────────────────────────────────────────────────── */
body.page-id-125841 .product-support-section .basic-card-widget .product-support-section__title,
body.page-id-125841 .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold {
    color: #ffffff !important;
}

/* ── JP-213 /de/erp-schnittstelle/shopware (page-id-1558) ─────────────
   Same dark-card contrast bug as JP-205: the .product-support-section
   wraps its Pricing content in a .basic-card-widget that paints a dark
   teal #142830 background via WPBakery .utils-XXX. The
   .product-support-section__title h2 ("Shopware ERP-Anbindung:
   Editionen & Auftragspakete") inherits the design-system Dark Blue
   and reads as Dark Blue on Dark Blue — invisible.

   The H2 wraps "Shopware ERP-Anbindung:" in <span class="font-weight-bold">,
   and that span gets its colour from a SEPARATE design-system rule
   (.product-support-section .product-support-section__title
   .font-weight-bold). The override must target BOTH the H2 and the
   inner span, otherwise the bold prefix stays Dark Blue while the
   trailing text turns white.

   Boost specificity (4 selectors) to win the cascade. Scoped to
   body.page-id-1558 so other .product-support-section instances on
   light backgrounds keep their default Dark Blue heading.
   ─────────────────────────────────────────────────────────────────── */
body.page-id-1558 .product-support-section .basic-card-widget .product-support-section__title,
body.page-id-1558 .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold {
    color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   JP-449 Finanzbuchhaltung sweep — DEDUPED additions over current main.
   ---------------------------------------------------------------------------
   The original PR #99 commit (dc981f2) was authored before five PRs landed
   on main (PR #88 home cascade, PR #93 JP-448 Logo-Box, PR #94 JP-481 blog,
   PR #95 JP-438 Einkauf, PR #98 JP-169 warenwirtschaftssystem). Several
   blocks from that commit turned out to be duplicates of work that landed
   in main since. This rewrite KEEPS ONLY the unique deltas:

     - Typography sweep: only the 2 rules NOT already in main
       (product-companies-section h2, product-support-section h2 without
       -wrapper variant). Hero h1 + tabbed-widget__title dropped — they're
       already in main from JP-438 / earlier cascade work.
     - Logo-Box: only the 3 unique deltas (panel-bg #89D2FF restore,
       per-instance bg-image kill, floating section padding). The clip-path
       ellipse + 3-col grid + tile sizing rules landed in main via PR #93
       (JP-448) — dropped from this branch since they would duplicate.
     - Full Logo-Slider block — entirely unique vs current main.
     - Full Zitat / Quote block — entirely unique vs current main; PR #89
       (fix/jp-470) hasn't merged yet, so the cherry-picked rules are still
       this branch's responsibility.

   Conflict map (re-verified 2026-05-27 after the rebase on origin/main):
   - PR #93 JP-448 (merged main, lines 9756+): clip-path + grid + tile —
     dropped here, no duplicate.
   - PR #95 JP-438 (merged main, line 4173+): tabbed-widget__title +
     cross-chanel h2 typography — dropped here.
   - PR #98 JP-169 (merged main): warenwirtschaftssystem cascade —
     different page scope, no overlap.
   - PR #87 / PR #90 (in flight): Logo-Slider outer chrome — values
     byte-identical here, dedupes on merge.
   - PR #89 (in flight): Zitat — cherry-picked byte-identical for the
     ::before/::after + wrapper-strip; typography sizes diverge to
     canonical Figma 351:6725 (reviewer to reconcile on merge).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Typography sweep: 2 unique rules vs main ---- */

/* (a) product-companies-section h2 — Onlinehändler logo-strip widget on
   .product-company-section. Theme default paints Inter 32/500 #333;
   Figma logo-slider deck (351:6770) headline token is Kurdis Wide Bold
   32 Dark Blue. */
.product-company-section .product-companies-section__title,
.product-company-section .product-companies-section__title .font-weight-bold {
    font-family: "Kurdis", "Kurdis Wide", "Inter", sans-serif !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
}

/* (b) product-support-section h2 — the dark "Buchhaltungssoftware für den
   E-Commerce" card on Finanzbuchhaltung. The existing JP-374 cascade in
   main gates on a .product-support-section__title-wrapper ancestor; this
   dark-card variant lacks the wrapper, so set Kurdis 700 without
   requiring it. */
.product-support-section .product-support-section__title,
.product-support-section .product-support-section__title .font-weight-bold {
    font-family: "Kurdis", "Kurdis Wide", "Inter", sans-serif !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Logo-Box (CompaniesGallery / .container-product-payments-card)
   3 unique deltas over PR #93 (which is already in main): panel-colour
   restore, per-page bg-image kill, floating-card outer band padding.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Restore plugin's Figma Light Blue #89D2FF (JP-413 in main set #B1D8F6)
   AND kill the per-instance Frame-427321556.png polygonal overlay an
   injected <style> applies via an auto-generated .utils-XXX class. */
.product-payments-section .container-product-payments-card.card {
    background-color: #89d2ff !important;
    background-image: none !important;
}

/* Floating-card vertical breathing room — :has() scopes this to sections
   that actually render the Logo-Box card (not on the cross-chanel /
   testimonial siblings that share the .product-payments-section class). */
section.product-payments-section:has(.container-product-payments-card) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
@media (max-width: 767.98px) {
    section.product-payments-section:has(.container-product-payments-card) {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-449 — Logo-Slider (product-company-section): align with Figma 351:6770
   "Logo-Slider-Desktop 1440". Live markup has only h2 + .product-companies
   -section__slider swiper; eyebrow + CTA + nav arrows are added via
   pseudo-content / unhiding existing swiper buttons. Outer chrome rules
   are byte-identical to in-flight PRs #87 / #90.
   ═══════════════════════════════════════════════════════════════════════════ */

.product-company-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-color: transparent !important;
    position: relative !important;
}

/* Centre the h2 horizontally; theme drops it in a Bootstrap .col
   which pulls it off-axis. */
.product-company-section .container > .row {
    justify-content: center !important;
}

/* JP-446 title — Figma 351:6770 wants 32/46 Kurdis Dark Blue Wide Bold,
   with a 24px gap to the description (which the description's
   margin-top: 24px supplies). Centre the block.
   Selector raises specificity to (0,2,4) so it beats the page-template
   landing-page h2 rule `body.page-template-product-landing main
   section:not(.section-1690) h2` at (0,2,3) which otherwise sets
   line-height 40px and would suppress the 46px Figma leading.
   JP-506: some pages (e.g. /de/agentic-commerce/) render this title as a
   <span class="product-companies-section__title h2"> instead of a real
   <h2>. The element-locked `h2.` selector missed the span, so the title
   kept its shrink-to-fit box pinned left while only its text centred —
   match the span form too so the block centres on every product page. */
body main section.product-company-section h2.product-companies-section__title,
body main section.product-company-section span.product-companies-section__title {
    position: relative !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 864px !important;
    display: block !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    text-transform: none !important;
}
/* ============================================================
   JP-446 — Real-element classes injected by the mu-plugin script
   (see dump-clone/mu-plugins/00-dump-clone-overrides.php — JP-446 hook).
   Pseudo-content variants were dropped because they can't be clicked
   nor read by screen readers as real text.

   These rules COEXIST with JP-449's ::before/::after pseudo-content
   declared further below. JP-449's swiper-arrow rule uses the more
   specific selector `.product-company-section .product-companies
   -section__slider .swiper-button-prev` so it wins via specificity
   over PR #87's `.product-company-section .swiper-button-prev` —
   neither rule is removed, JP-449 just cascade-wins for the arrow
   position. PR #87's slider padding (0 64px) still applies and
   creates the clearance JP-449's `-56px` offset uses.
   ============================================================ */
.product-company-section .jp446-eyebrow {
    display: block !important;
    color: #2722f8 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 auto 6px !important;
    max-width: 864px !important;
}
.product-company-section .jp446-desc {
    display: block !important;
    width: 100% !important;
    max-width: 864px !important;
    box-sizing: border-box !important;
    /* Figma 351:6770 specifies pure black for the description copy
       (var(--jtl-black, black) in design context). */
    color: #000 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-align: center !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* --- Logo strip: centre the swiper viewport in the section, give
   the row enough side-padding for the nav arrows to flank it
   without crushing the first/last logos. --- */
.product-company-section .product-companies-section__slider,
.product-company-section .swiper {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1312px !important;
    padding: 0 64px !important;  /* breathing room for nav arrows */
    position: relative !important;
}
/* Logos: vertical-centre, balanced gaps, capped height. */
.product-company-section .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
}
.product-company-section .swiper-slide img {
    /* JP-452 — Figma 351:6770 Logo-Leiste shows logos at their
       natural rendered height inside a 109 px-tall row; the tallest
       master logo (image 2678 / Seeberger) is 77.9 px. Cap at 80 px
       so every brand reaches the spec scale while shorter marks
       (e.g. Group at 42.77 px) keep their natural proportions via
       object-fit: contain. */
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* --- Nav arrows: flank the strip from OUTSIDE the logo track.
   Reveal the theme's hidden .d-none arrows + pin them to the
   section's left/right edge using position:absolute on a section
   parent (which we just made position:relative above). The
   padding:0 64px above prevents arrow/logo overlap. --- */
.product-company-section .swiper-button-prev.d-none,
.product-company-section .swiper-button-next.d-none,
.product-company-section .swiper-button-prev,
.product-company-section .swiper-button-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 32px !important;
    border-radius: 20px !important;
    background-color: #ffffff !important;
    color: #0b1b45 !important;
    box-shadow: 0 2px 8px rgba(11, 27, 69, 0.08) !important;
    margin-top: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}
.product-company-section .swiper-button-prev { left: 8px !important; right: auto !important; }
.product-company-section .swiper-button-next { right: 8px !important; left: auto !important; }
.product-company-section .swiper-button-prev::after,
.product-company-section .swiper-button-next::after {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0b1b45 !important;
}
/* Suppress the default pagination dots (Figma uses arrows, not dots). */
.product-company-section .swiper-pagination {
    display: none !important;
}

/* --- Real CTA button injected by mu-plugin (Figma I351:6770;335:4108).
   Wired to data-toggle="modal" data-target="#request-form-call" so
   it opens the same Gravity-Forms modal as the header's "Beratung
   vereinbaren" button (canonical pattern from
   theme/jtl/page-templates/partials/header/navbar/nav-right.php). */
.product-company-section .jp446-cta-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 32px !important;
}
.product-company-section .jp446-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fb581f !important;
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.product-company-section .jp446-cta:hover,
.product-company-section .jp446-cta:focus {
    background-color: #e84a14 !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}
/* Cursor + hover affordance on the swiper arrows so they read as
   interactive. */
.product-company-section .swiper-button-prev,
.product-company-section .swiper-button-next {
    cursor: pointer !important;
}
.product-company-section .swiper-button-prev:hover,
.product-company-section .swiper-button-next:hover {
    background-color: #f7f7f0 !important;
}

/* ============================================================
   JP-446 — Section A: Agentic Commerce dark band
   Selector: .product-management-section.purple
   (one of several variants of the product-management widget; the
   .purple modifier paints the section bg dark teal-navy and the
   surrounding text white. Three contrast leaks need fixing.)

   Source content lives in wp_posts.post_content (page ID 302458),
   rendered by WPBakery shortcodes — no PHP template to edit. All
   styling lives here. Restyle is CSS-only.

   Live DOM at /de/ki/ (probed 2026-05-26):
     section.product-management-section.purple
       .product-management-section__subtitle.text-uppercase.h3   ← "AGENTIC COMMERCE · EARLY ACCESS" (Tech Blue, low contrast on dark)
       h2.product-management-section__title.text-tertiary        ← "Der nächste Schritt: ..." (Dark Blue on dark = INVISIBLE)
       .product-management-section__text                         ← body (white, ok)
       .product-button-group__button--with-icon.is-white         ← "Mehr erfahren" (Dark Blue text + no border = invisible)
   ============================================================ */

/* Eyebrow on dark band — switch from Tech Blue to Light Blue for
   AAA contrast against the dark band. Matches the canonical token
   used on JP-356 Video-Slider's dark panel + JP-365 Roadmap. */
.product-management-section.purple .product-management-section__subtitle,
.product-management-section.purple .product-management-section__subtitle * {
    color: #89d2ff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Heading on dark band — white instead of Dark Blue (Dark Blue on
   dark teal-navy is unreadable). Same selector specificity used for
   the .orange variant elsewhere, just inverted token. */
.product-management-section.purple h2,
.product-management-section.purple .product-management-section__title,
.product-management-section.purple .product-management-section__title .font-weight-bold {
    color: #ffffff !important;
}

/* Body / lists on dark band — already white from theme but reaffirm
   so future cascade changes don't regress. */
.product-management-section.purple .product-management-section__text,
.product-management-section.purple .product-management-section__text p,
.product-management-section.purple .list-icons,
.product-management-section.purple .list-icons li,
.product-management-section.purple .list-icon {
    color: #ffffff !important;
}

/* CTAs on dark band — white outline pill, white text. The .orange
   variant rule above (line ~7139, JP-436) paints Dark Blue on
   Dark Blue with `section.product-management-section …` specificity
   (0,0,4,1); match it with `section` prefix so source-order makes
   the .purple rule win for the dark-band variant. */
section.product-management-section.purple .product-button-group__button--with-icon,
section.product-management-section.purple .product-button-group__button--with-icon.is-white,
section.product-management-section.purple .product-button-group__button--with-icon.no-icon,
section.product-management-section.purple a.btn,
section.product-management-section.purple a.no-icon {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    border-radius: 145px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
section.product-management-section.purple .product-button-group__button--with-icon:hover,
section.product-management-section.purple a.btn:hover,
section.product-management-section.purple a.no-icon:hover {
    background-color: #ffffff !important;
    color: #0b1b45 !important;
    text-decoration: none !important;
}
/* Inner span on the CTA inherits colour, no decoration. */
.product-management-section.purple .product-button-group__button--with-icon__text {
    color: inherit !important;
    text-decoration: none !important;
}

/* ============================================================
   JP-446 — Section B: Kontakt-Box (Update redesign)
   Figma node 248:4151 (slide 248:4209 right panel).

   Live target: section.product-support-section.orange on /de/ki/
   (also any other page that opts into the .orange variant).

   What changes vs the previous Light Sand card pass: the whole
   `.basic-card-widget` flips to a Dark Blue (#0b1b45) rounded card
   with a decorative Light Blue (#89d2ff) Vector shape anchored on
   the right edge. Eyebrow goes Light Blue, h2 + body copy go White.
   The optional HubSpot form (right column when present) sits in a
   Light Blue rounded panel with white inputs + orange Senden CTA.

   Scope everything to `.product-support-section.orange` so the
   `.linkboxen-mit-bild` and `.nl-anmeldung` variants stay untouched.

   The decorative shape: a single SVG path traced from the Figma
   asset 81bc7f31 (a stretched hexagon-cutout), inlined as a CSS
   background-image so no extra HTTP request is needed.
   ============================================================ */

/* Page band stays Light Sand — only the inner card flips. */
section.product-support-section.orange {
    background-color: #eeeee7 !important;
}

/* Dark Blue card chrome. The plugin renders `.basic-card-widget`
   with peach #FFF5E9 — overwrite bg, radius, and inner padding.
   Add the Light Blue Vector shape as a non-clickable ::before so
   it doesn't disturb interactive children. */
section.product-support-section.orange .basic-card-widget {
    background-color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 46px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
section.product-support-section.orange .basic-card-widget::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 64% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 588.889 547.222' preserveAspectRatio='none'><path d='M552.992 136.338L476.204 0H0V547.222H476.208L552.992 410.921C600.855 325.982 600.855 221.314 552.992 136.338Z' fill='%2389D2FF'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 100% 100% !important;
    transform: scaleX(-1) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
section.product-support-section.orange .basic-card-widget > * {
    position: relative !important;
    z-index: 1 !important;
}
section.product-support-section.orange .basic-card-widget .card-body {
    padding: 64px !important;
    background: transparent !important;
}

/* Eyebrow — the live DOM uses .product-management-section__subtitle
   on this section (not __support-section__subtitle). Light Blue per
   Figma, Inter Semi Bold, uppercase, 12.5px / leading 16.667 /
   tracking 0.625 px (Figma literal). The `.h3` utility paints theme
   colour by default — strip it via the inherit/override pair. */
section.product-support-section.orange .product-management-section__subtitle,
section.product-support-section.orange .product-management-section__subtitle.h3,
section.product-support-section.orange .product-management-section__subtitle * {
    color: #89d2ff !important;
    background: none !important;
    -webkit-text-fill-color: #89d2ff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin: 0 0 12px !important;
    display: inline-block !important;
}

/* H2 — White Kurdis Wide Bold. Figma 22.222 px / 31.944 line / 0.444
   tracking — scaled up to the live 1440 viewport this reads ≈ 32 /
   46 / 0.64. The `*` selector intentionally excludes `a.headline-link`
   via `:not(.headline-link)` so the theme's auto-injected Font Awesome
   chain-link icon next to anchored headings keeps its FA font-family
   (and its `\f0c1` glyph rendering — overriding it with Kurdis Wide
   Bold caused a tofu / broken-box artifact). */
section.product-support-section.orange .product-support-section__title,
section.product-support-section.orange .product-support-section__title .font-weight-bold,
section.product-support-section.orange .product-support-section__title *:not(.headline-link) {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Kurdis Wide Bold", "Kurdis", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: 0.64px !important;
    margin: 0 0 24px !important;
}
/* Kill the theme's accent underline pseudos on the h2 (orange
   border-bottom). The Figma title has no decoration. */
section.product-support-section.orange .product-support-section__title::before,
section.product-support-section.orange .product-support-section__title::after {
    content: none !important;
    display: none !important;
}
/* Theme auto-injects `<a class="far fa-link headline-link">` after
   the title text of every <h2 id="..."> to expose a click-to-copy
   anchor affordance. The chain-link glyph comes from FA 6 Pro via
   the `\f0c1` codepoint on `.fa-link::before`. Without this rule
   our h2 cascade would inherit `font-family: Kurdis` onto the
   anchor + pseudo, the glyph would fall back to a missing-character
   tofu, and the anchor would also inherit `font-size: 32px` /
   `line-height: 40px` — rendering as a tall white misshape box.
   Lock it down to a small, vertically-centred chain icon. */
section.product-support-section.orange .product-support-section__title a.headline-link {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0 !important;
    margin-left: 12px !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    /* Theme's `.headline-link { width: 0; opacity: 0 }` collapses the
       anchor; force it visible at the natural size of the glyph. */
    width: auto !important;
    transform: none !important;
    opacity: 0.55 !important;
    display: inline-block !important;
}
section.product-support-section.orange .product-support-section__title a.headline-link:hover {
    opacity: 1 !important;
}
section.product-support-section.orange .product-support-section__title a.headline-link::before {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* `\f0c1` is the chain-link codepoint in FA Pro — same as `.fa-link`.
       Trailing space inside the string terminates the hex escape so
       the parser can't accidentally consume the closing quote. */
    content: "\f0c1 " !important;
    display: inline-block !important;
    width: auto !important;
    opacity: 1 !important;
}

/* Body paragraphs — White Inter Regular 16/24 (Figma 12.5/19.444
   scaled). */
section.product-support-section.orange .basic-card-widget .card-body p,
section.product-support-section.orange .basic-card-widget .card-body p strong,
section.product-support-section.orange .basic-card-widget .card-body p a,
section.product-support-section.orange .basic-card-widget .card-body li,
section.product-support-section.orange .basic-card-widget .card-body div:not([class*="hs-"]):not([id*="hsForm"]) {
    color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}
section.product-support-section.orange .basic-card-widget .card-body p {
    margin: 0 0 16px !important;
}
section.product-support-section.orange .basic-card-widget .card-body p:last-child {
    margin-bottom: 0 !important;
}
/* Bold phone-number variant — Inter Bold per Figma. */
section.product-support-section.orange .basic-card-widget .card-body p strong,
section.product-support-section.orange .basic-card-widget .card-body p b {
    font-weight: 700 !important;
    color: #ffffff !important;
}
/* Inline links — keep visible on dark bg, no underline by default. */
section.product-support-section.orange .basic-card-widget .card-body a {
    color: #89d2ff !important;
    text-decoration: none !important;
}
section.product-support-section.orange .basic-card-widget .card-body a:hover {
    text-decoration: underline !important;
}

/* Constrain the LEFT text column so copy doesn't spill into the
   Light Blue Vector cutout. The decorative ::before is 64% wide
   anchored on the right; the mirrored hexagon-curve intrudes
   leftward of x ≈ 36% of the card width at its deepest bulge.
   Reserve generous right-side gutter on the left col so headings
   + paragraphs wrap cleanly inside the Dark Blue band. */
@media (min-width: 992px) {
    section.product-support-section.orange .basic-card-widget .card-body > .row > .col-lg-6:first-child {
        padding-right: 56px !important;
    }
    section.product-support-section.orange .basic-card-widget .card-body > .row > .col-lg-6:first-child > * {
        max-width: 340px !important;
    }
}

/* HubSpot form chrome (when present in the right column). Light
   Blue rounded panel with white inputs + Orange Senden CTA. The
   `.hbspt-form` wrapper is the standard HS embed container; we
   restyle whatever child structure renders. Cross-origin iframe
   embeds (rare) keep HS defaults — covered separately below. */
section.product-support-section.orange .basic-card-widget .hbspt-form,
section.product-support-section.orange .basic-card-widget .hs-form-frame,
section.product-support-section.orange .basic-card-widget [id*="hsForm"] {
    background: #89d2ff !important;
    border-radius: 20px !important;
    padding: 28px !important;
    color: #0b1b45 !important;
}
section.product-support-section.orange .basic-card-widget .hbspt-form label,
section.product-support-section.orange .basic-card-widget .hbspt-form .hs-form-field > label,
section.product-support-section.orange .basic-card-widget [id*="hsForm"] label {
    color: #0b1b45 !important;
    font-family: "Arial", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    margin-bottom: 4px !important;
}
section.product-support-section.orange .basic-card-widget .hbspt-form .hs-input,
section.product-support-section.orange .basic-card-widget .hbspt-form input[type="text"],
section.product-support-section.orange .basic-card-widget .hbspt-form input[type="email"],
section.product-support-section.orange .basic-card-widget .hbspt-form input[type="tel"],
section.product-support-section.orange .basic-card-widget .hbspt-form textarea,
section.product-support-section.orange .basic-card-widget .hbspt-form select {
    background: #ffffff !important;
    border: 1px solid #89d2ff !important;
    border-radius: 3px !important;
    color: #0b1b45 !important;
    padding: 6px 10px !important;
    width: 100% !important;
    box-shadow: none !important;
}
section.product-support-section.orange .basic-card-widget .hbspt-form .hs-button,
section.product-support-section.orange .basic-card-widget .hbspt-form input[type="submit"] {
    background: #fb581f !important;
    color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 200px !important;
    padding: 12px 24px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}
section.product-support-section.orange .basic-card-widget .hbspt-form .hs-button:hover,
section.product-support-section.orange .basic-card-widget .hbspt-form input[type="submit"]:hover {
    background: #e44a17 !important;
}
/* Required-field asterisk — Orange per Figma. */
section.product-support-section.orange .basic-card-widget .hbspt-form .hs-form-required,
section.product-support-section.orange .basic-card-widget [id*="hsForm"] .hs-form-required {
    color: #fb581f !important;
}
/* Privacy / consent link inside checkbox copy — keep Light Blue
   on white inputs would be hard to read, so use the brand Datenschutz
   link colour #2722f8 per Figma. */
section.product-support-section.orange .basic-card-widget .hbspt-form .legal-consent-container a {
    color: #2722f8 !important;
    text-decoration: underline !important;
}

/* Cross-origin HubSpot iframe wrapper — keep transparent and tall
   enough that the form doesn't collapse during hydration. */
section.product-support-section.orange .basic-card-widget iframe[id^="hs-form"],
section.product-support-section.orange .basic-card-widget [class*="hs-form"] iframe {
    background: transparent !important;
    min-height: 500px !important;
    width: 100% !important;
    border: 0 !important;
}

/* Mobile — collapse the decorative shape, tighten padding, stack
   the two columns. */
@media (max-width: 991.98px) {
    section.product-support-section.orange .basic-card-widget {
        border-radius: 28px !important;
    }
    section.product-support-section.orange .basic-card-widget::before {
        width: 100% !important;
        opacity: 0.18 !important;  /* watermark behind the text */
    }
    section.product-support-section.orange .basic-card-widget .card-body {
        padding: 32px 24px !important;
    }
    section.product-support-section.orange .product-support-section__title,
    section.product-support-section.orange .product-support-section__title * {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    section.product-support-section.orange .basic-card-widget .card-body p {
        font-size: 15px !important;
        line-height: 22px !important;
    }
}

/* ============================================================
   JP-446 — Logo-Slider final pass: clean monochromatic cutouts +
   continuous marquee.

   Asset-library limitation: FLYERALARM ships an SVG with a white
   rectangle baked into the artwork, Seeberger has a green leaf
   element. CSS can't reach inside an <img>-loaded SVG to remove
   specific paths, but two filters together coerce every mark into
   a clean monochromatic shape against the Light Sand page bg:
     - filter: grayscale(1) brightness(0.6) → drops colour, darkens
       to a uniform dark grey
     - mix-blend-mode: multiply → blends pure white pixels into
       the parent bg, so the FLYERALARM white-box disappears

   The previous ZEISS plaque rules are removed: ZEISS + TEDi are
   filtered out of the carousel entirely by the mu-plugin JS (only
   5 brands ship per Figma 351:6770).
   ============================================================ */
.product-company-section .swiper-slide img {
    /* JP-437/439 — Figma 351:6770 renders every brand mark as crisp
       black. Live logos arrive from /uploads/ with varied palettes:
       Seeberger has a pale watercolour leaf, FLYERALARM has a near-
       white inset, ZEISS is white-on-black. A single filter recipe:
        - grayscale(1) strips colour
        - contrast(2) pushes mid-tones to the extremes (pale Seeberger
          leaf → near-black, ZEISS white text stays white)
        - mix-blend-mode: multiply knocks pure white pixels into the
          Light Sand parent bg so any embedded white card collapses
          cleanly. */
    filter: grayscale(1) contrast(2) !important;
    mix-blend-mode: multiply !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* JP-452 — the theme wraps each <img> in a <picture> that the Swiper
   build hands a `transform: matrix(...)` for snap positioning. That
   transform creates a new stacking context, so the IMG's mix-blend-
   mode multiplies against its picture-local backdrop (transparent),
   not the section's Light Sand body bg — net effect: white pixels
   stay white and every logo looks like it sits inside a white card
   on pages like /de/dms-software/. Paint Light Sand on the picture
   itself so the multiply backdrop matches the page bg; result is
   monochromatic logos flush on the Light Sand body. */
.product-company-section .swiper-slide picture {
    background-color: #eeeee7 !important;
}
/* JP-452 — Swiper's lazy plugin injects a spinner <div> per slide.
   Our jp452-logo-slider-arrows hook pre-loads every <img> outside
   the lazy pipeline, so the spinner's "done loading" trigger never
   fires and it stays visible permanently as a grey doughnut over
   the logo. Hide all of these belt-and-suspenders with the JS
   cleanup in the mu-plugin (the JS removes them from DOM; this
   CSS suppresses any Swiper re-injects after loopCreate). */
.product-company-section .swiper-lazy-preloader,
.product-company-section .swiper-lazy-preloader-black,
.product-company-section .swiper-lazy-preloader-white {
    display: none !important;
}
/* No per-slide chrome — every slide flush-transparent on the
   Light Sand page bg. */
.product-company-section .swiper-slide {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 8px !important;
}

/* Stepped autoplay timing — let Swiper's default ease-out drive
   the per-slide transition (was linear during the brief continuous-
   marquee experiment; reverted per JP-446 spec update). */
.product-company-section .swiper-wrapper {
    transition-timing-function: ease-out !important;
}

/* FLYERALARM asset bakes in an off-white #fefefe rectangle that
   survives `mix-blend-mode: multiply` (multiply only fully knocks
   pure #ffffff). Switch this one slide to `mix-blend-mode: darken`
   — darken = min(src, dst) per channel, so any pixel lighter than
   the Light Sand bg #eeeee7 (including off-white #fefefe) drops to
   Light Sand cleanly while the dark logo paths stay dark. */
.product-company-section .swiper-slide:has(img[alt="Flyeralarm Logo"]) {
    background: transparent !important;
}
.product-company-section img[alt="Flyeralarm Logo"] {
    filter: grayscale(1) contrast(1.2) !important;
    mix-blend-mode: darken !important;
    background: transparent !important;
}

/* ─── JP-449 (main): swiper arrows + Zitat overrides ─── */

/* JP-437: the JP-449 eyebrow/CTA pseudo-elements (::before "JTL COMMUNITY"
   on .product-companies-section__title and ::after "BERATUNG VEREINBAREN"
   on .container) were superseded by the real DOM markup that JP-446 ships
   (.jp446-eyebrow + .jp446-cta-wrap > button.jp446-cta around line 11847).
   Suppress the pseudos so the section doesn't render duplicates — the DOM
   versions are the canonical, semantic, click-targetable source. */
.product-company-section .product-companies-section__title::before,
.product-company-section .container::after {
    content: none !important;
}

/* Swiper nav arrows — Figma 351:6770 white-pill prev/next flanking the
   logo strip. The widget emits .swiper-button-prev/next inside the
   slider but hides them via Bootstrap's .d-none. Override + restyle, and
   push them OUTSIDE the slider via left/right: -56px so they don't
   overlap the first/last visible logo. These are real Swiper.js nav
   buttons — clicks navigate. */
.product-company-section .product-companies-section__slider .swiper-button-prev,
.product-company-section .product-companies-section__slider .swiper-button-next {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    background-color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(11, 27, 69, 0.08) !important;
}
/* Arrow lateral offset — Figma 351:6770 places arrows at the edges
   of a 1312-wide row with a 1117-wide logo strip in the middle,
   ~98 px breathing room from the strip but still INSIDE the 1440
   viewport. The live slider is 1280 wide centred in the container,
   so -48 px lands the arrows at viewport ≈32–78 px (left) / 1362–
   1408 px (right) — fully visible and ≈66 px clear of the first /
   last logo. Earlier -96 spilled the arrows off-screen at the
   default 1440 breakpoint; -48 keeps the generous-breathing-room
   look without clipping. */
.product-company-section .product-companies-section__slider .swiper-button-prev {
    left: -48px !important;
}
.product-company-section .product-companies-section__slider .swiper-button-next {
    right: -48px !important;
}
.product-company-section .product-companies-section__slider .swiper-button-prev::after,
.product-company-section .product-companies-section__slider .swiper-button-next::after {
    content: "" !important;
    width: 16px !important;
    height: 14px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    font-family: inherit !important;
    font-size: 0 !important;
}
.product-company-section .product-companies-section__slider .swiper-button-prev::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'><path d='M15 7H1M1 7L7 1M1 7L7 13' stroke='%230b1b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
.product-company-section .product-companies-section__slider .swiper-button-next::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'><path d='M1 7H15M15 7L9 1M15 7L9 13' stroke='%230b1b45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

@media (max-width: 767.98px) {
    .product-company-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* Mobile mirror of the title rule — same specificity bump to beat
       the page-template-product-landing h2 cascade. JP-506: match the
       <span> title variant (e.g. /de/agentic-commerce/) too, so it gets
       the 24px mobile sizing + centred block like the <h2> form. */
    body main section.product-company-section h2.product-companies-section__title,
    body main section.product-company-section span.product-companies-section__title {
        font-size: 24px !important;
        line-height: 32px !important;
        letter-spacing: 0.48px !important;
        margin: 0 auto !important;
    }
    /* JP-437: pseudo-element overrides removed — the dead pseudos are
       suppressed above. Mobile sizing for the real .jp446-eyebrow and
       .jp446-cta lives in the JP-446 block. */
    .product-company-section .product-companies-section__slider .swiper-button-prev,
    .product-company-section .product-companies-section__slider .swiper-button-next {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-449 — Zitat overrides over PR #89 (JP-470, now merged at lines 4208+).
   ---------------------------------------------------------------------------
   PR #89 ships the bulk of the Quote-no-box restyle (wrapper-strip, photo
   gap, ::before SUCCESS STORY eyebrow, ::after CTA pill, real-<a> Orange
   pill, SVG hue-rotate filter, user-data margin reset, dark-blue colours
   on quote + name + position). Those rules KEEP intact — this block only
   adds the typography overrides where PR #89's values are smaller than
   the canonical Figma 351:6725 master and one scope broadening.

   Five targeted overrides, all later-defined cascade — PR #89's rules
   still fire first; my higher-specificity / later-loaded values win for
   the specific properties I override:
     1. Wrapper-strip scope broadened — PR #89 qualifies with `.orange`;
        Finanzbuchhaltung's section has no `.orange`, so a broader rule
        ensures the peach panel is stripped here too. SAME PROPERTIES,
        WIDER SCOPE.
     2. Eyebrow size: 18/24/0.9/margin-bot 24 (Figma 351:6725 canonical)
        vs PR #89's 14/20/0.7/margin-bot 16.
     3. Quote body: Inter Medium 24/38 tracking 0.48
        (Figma 351:6725 canonical) vs PR #89's Regular 20/28.
     4. Author name: SemiBold 16/28 (Figma canonical) vs PR #89's Bold 16/22.
     5. Author position: 14/28 with Orange #fb581f underline 2px
        (Figma canonical) vs PR #89's 14/20 without underline.

   PR #89's wrapper-strip (.orange-scoped), 48px gap, ::before content,
   ::after CTA pill, real-<a> rules, hue-rotate filter, and user-data
   margin-left rule are ALL retained in main untouched — nothing of theirs
   is removed by this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Broadened wrapper-strip — Figma 351:6725 has no nested panel on any
   variant; PR #89's `.orange`-scoped rule misses Finanzbuchhaltung's
   non-orange section. Same property values, just wider selector. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block .testimonial-single-content-block__wrapper {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    left: 0 !important;
}

/* (2) Tighter photo↔content gap — Figma 351:6725 has 32px; PR #89's 48px. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block {
    padding-left: 32px !important;
}

/* (3) Eyebrow typography override — Figma 351:6725 canonical 18/24 tracking
   0.9 with 24px margin-bot. PR #89's ::before content "SUCCESS STORY" is
   kept; only the size/lh/tracking/margin are overridden. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-content-block::before {
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    margin-bottom: 24px !important;
}

/* (4) Quote body typography override — Figma 351:6725 canonical Inter
   Medium 24/38 tracking 0.48. PR #89's text-decoration/colour stays. */
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text,
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text p {
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 38px !important;
    letter-spacing: 0.48px !important;
}

/* (5) Author name typography override — Figma 351:6725 canonical SemiBold
   16/28 (PR #89 sets Bold 16/22). */
body:not(.home) section.testimonial-single-product-landing .user-data__info-name {
    font-weight: 600 !important;
    line-height: 28px !important;
}

/* (6) Author position typography override + add Orange underline — Figma
   351:6725 canonical 14/28 with `decoration-[#fb581f] decoration-[6.5%]`.
   PR #89 sets 14/20 with `text-decoration: none`. */
body:not(.home) section.testimonial-single-product-landing .user-data__info-position,
body:not(.home) section.testimonial-single-product-landing .user-data__info-position span,
body:not(.home) section.testimonial-single-product-landing .testimonial-single-text__link {
    line-height: 28px !important;
    text-decoration: underline !important;
    text-decoration-color: #fb581f !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-478 Kontakt (/de/kontakt, post 265829) — recolour every yellow-orange
   wawi-gradient CTA to the design-system Primary pill per Figma 398:5119:
   orange #fb581f filled / Dark Blue text / Inter SemiBold 16/24 / 0.32 px
   tracking / uppercase / 145 px radius / 12 px × 24 px padding.

   The wawi gradient is painted on `.has-wawi-gradient::before` (orange→yellow
   primary) and `.has-wawi-gradient::after` (yellow→orange hover). Both
   pseudos are absolutely positioned over the button; killing their bg-image
   and forcing the button bg to solid orange flips every CTA to the new
   design without touching the WPBakery markup.

   Buttons covered on Kontakt (all `a.product-button-group__button.has-wawi-gradient`
   inside the accordion tabs): "Im JTL-Forum registrieren", "Support-Ticket
   Erstellen", "Support-Paket buchen", "Meine Leistungen ansehen",
   "Partnerschaftsanfrage", "Jetzt Bewerben", "Zum Pressebereich",
   "jetzt anmelden", "Jetzt inserieren!", + Bootstrap `.btn-wawi`
   header-request-form buttons if any render.

   Scope: body.page-id-265829 only. Other pages keep their existing wawi
   gradient (JP-425 already converted the product-landing hero CTAs
   globally; widening this rule further would need a separate ticket). */
body.page-id-265829 .has-wawi-gradient,
body.page-id-265829 a.product-button-group__button.has-wawi-gradient,
body.page-id-265829 button.btn.btn-wawi {
    background-color: #fb581f !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 145px !important;
    padding: 12px 24px !important;
    height: auto !important;
    width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
/* Inner text span on the wawi button (.product-button-group__wawi-button--text)
   needs Dark Blue too — the global rule paints it #333. */
body.page-id-265829 .has-wawi-gradient .product-button-group__wawi-button--text,
body.page-id-265829 a.product-button-group__button.has-wawi-gradient .product-button-group__wawi-button--text,
body.page-id-265829 .has-wawi-gradient .product-button-group__button--text {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
}
/* Kill the orange→yellow gradient pseudos that paint the wawi look — both
   `::before` (primary) and `::after` (reverse, for hover state). Without
   these, the solid orange #fb581f bg above shows through. */
body.page-id-265829 .has-wawi-gradient::before,
body.page-id-265829 .has-wawi-gradient::after,
body.page-id-265829 a.product-button-group__button.has-wawi-gradient::before,
body.page-id-265829 a.product-button-group__button.has-wawi-gradient::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Tab nav next-arrow on the Kontaktformulare slider — the button sits
   ~8 px from the right edge of the rounded pill wrapper. Push it left
   so it has breathing room from the rounded corner. */
body.page-id-265829 .tabbed-widget__tabs-nav--next {
    margin-right: 24px !important;
}

/* ============================================================
   JP-447 — Box-Facts (.product-management-section.purple.black)
   Figma node 371:6038 (Box-Facts-Desktop 1441, slide 248:6857).

   Live target — section.product-management-section.purple.black:
     /de/ki/agentic-commerce
     /en/ki/agentic-commerce  (translation)
     /en/jtl-ai/erp-software-from-jtl-smart-solutions-for-ecommerce
     /de/empfehlungsaktion-greyhound-ai-pack
   (4 pages confirmed via DB grep on 2026-05-27.)

   Live DOM (decorated_simple_container WPBakery shortcode):
     section.product-management-section.purple.black
       .container > .row > .col-lg-12
         .decorated-container-inner
           .decorated-container-square-overlay  (orange decorative blob)
           .decorated-container-wrapper         (THE card — bg #142830 from
                                                 the plugin SCSS)
             .decorated-container
               .decorated-container-heading
                 .__over-title       (eyebrow, currently theme grey #333)
                 .__title            (h2)
                 .__description      (body text)
               .decorated-container-items-wrapper > .row > .col-lg-4
                 .keyfacts-color__purple > .card-body
                   span.h2.text-reset       (stat header, e.g. "+4700 %")
                   div.font-weight-bold > p (card description)
                   div.font-size-sm > p > a (source link)

   Figma 371:6038 expects:
     - Outer card: bg Dark Blue #0b1b45, radius 46 px, padding 46 px
     - Eyebrow:    Light Blue #89d2ff, Inter Semi Bold 18 / 24 / 0.9 px tracking, uppercase
     - H2:         WHITE, Kurdis Wide Bold 32 / 46 / 0.64 px tracking
     - Description: WHITE, Inter Regular 18 / 28
     - Stat card: bg WHITE, radius 24 px, padding 24 px, 32 px gap
     - Stat number: Tech Blue #2722f8, Inter Semi Bold 36 / 40
     - Card body p: Dark Blue, Inter Regular 16 / 24 (not bold)
     - Source link: Dark Blue 14 / 20, anchor underlined

   Scope intentionally narrow: `.product-management-section.purple.black`
   prefix on every selector, so the 30+ other pages using the bare
   `decorated_simple_container` widget OR the `.product-management-section`
   widget OR the `.product-management-section.purple` variant stay
   untouched. Same scoping discipline as JP-356 used with `:has(.slider-
   success-stories)`.
   ============================================================ */

/* Outer page band stays Light Sand — only the card flips. */
section.product-management-section.purple.black {
    background-color: #eeeee7 !important;
}

/* The card chrome — `.decorated-container-wrapper` (and its inner
   `.decorated-container`) currently get bg #142830 from the plugin
   SCSS (specificity 0,3,0). Override with Dark Blue + a generous
   rounded radius matching Figma. */
section.product-management-section.purple.black .decorated-container-inner .decorated-container-wrapper,
section.product-management-section.purple.black .decorated-container-inner .decorated-container-wrapper .decorated-container {
    background-color: #0b1b45 !important;
    border-radius: 46px !important;
}
section.product-management-section.purple.black .decorated-container-inner .decorated-container-wrapper {
    padding: 46px !important;
    overflow: hidden !important;
}
section.product-management-section.purple.black .decorated-container-inner .decorated-container-wrapper .decorated-container {
    /* Inner shell is just a wrapper — no extra padding or radius needed
       once the outer carries them. */
    padding: 0 !important;
    border-radius: 0 !important;
}
/* Strip the orange decorative blob (.decorated-container-square-overlay)
   that the plugin paints over the card corner — not in the Figma. */
section.product-management-section.purple.black .decorated-container-inner .decorated-container-square-overlay {
    display: none !important;
}

/* Heading area — eyebrow / title / description tokens. The plugin
   default + JP-356's `.orange.black` cascade do NOT match this variant,
   so we set tokens fresh. */
section.product-management-section.purple.black .decorated-container-heading__over-title,
section.product-management-section.purple.black .decorated-container-heading__over-title * {
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    background: none !important;
    margin: 0 0 6px !important;
}
section.product-management-section.purple.black .decorated-container-heading__title,
section.product-management-section.purple.black .decorated-container-heading__title * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Kurdis Wide Bold", "Kurdis", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    background: none !important;
    margin: 0 0 24px !important;
}
/* Suppress any theme accent underline pseudo on the title. */
section.product-management-section.purple.black .decorated-container-heading__title::before,
section.product-management-section.purple.black .decorated-container-heading__title::after {
    content: none !important;
    display: none !important;
}
section.product-management-section.purple.black .decorated-container-heading__description,
section.product-management-section.purple.black .decorated-container-heading__description * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
}
section.product-management-section.purple.black .decorated-container-heading {
    max-width: 812px !important;
    margin-bottom: 32px !important;
}

/* Stat cards — `.keyfacts-color__purple` ships purple gradient bg from
   the plugin SCSS. Flip each card to white per Figma. */
section.product-management-section.purple.black .decorated-container-items-wrapper > .row {
    margin-left: -16px !important;
    margin-right: -16px !important;
    row-gap: 32px !important;
}
section.product-management-section.purple.black .decorated-container-items-wrapper .col-lg-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
section.product-management-section.purple.black .decorated-container-items-wrapper .keyfacts-color__purple,
section.product-management-section.purple.black .decorated-container-items-wrapper .keyfacts-color__purple.card,
section.product-management-section.purple.black .decorated-container-items-wrapper [class*="keyfacts-color"] {
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 24px !important;
    color: #0b1b45 !important;
    box-shadow: none !important;
    height: 100% !important;
}
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body {
    padding: 24px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
/* Stat header (e.g. "+4700 %", "3 große Player", "Bist du KI-ready?") */
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .text-reset.h2,
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body span.h2,
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .h2 {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 36px !important;
    line-height: 40px !important;
    margin: 0 0 16px !important;
    display: block !important;
    min-height: auto !important;
    background: none !important;
}
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .text-reset.h2 *,
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body span.h2 * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font: inherit !important;
}
/* Card description paragraph — strip the bold + give it regular 16/24. */
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .font-weight-bold,
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .font-weight-bold p {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 0 0 16px !important;
}
/* Source / Quelle line — smaller, regular, link Tech Blue. */
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .font-size-sm,
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .font-size-sm p {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    margin: 0 !important;
}
section.product-management-section.purple.black .decorated-container-items-wrapper .card-body a {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    text-decoration: underline !important;
}

/* Mobile — Figma 371:6038 mobile not separately exported; collapse the
   gap + tighten padding so cards stack readably. */
@media (max-width: 991.98px) {
    section.product-management-section.purple.black .decorated-container-inner .decorated-container-wrapper {
        padding: 28px !important;
        border-radius: 28px !important;
    }
    section.product-management-section.purple.black .decorated-container-heading__title,
    section.product-management-section.purple.black .decorated-container-heading__title * {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    section.product-management-section.purple.black .decorated-container-items-wrapper .card-body .text-reset.h2,
    section.product-management-section.purple.black .decorated-container-items-wrapper .card-body span.h2 {
        font-size: 28px !important;
        line-height: 34px !important;
    }
}

/* ============================================================
   JP-447 — Hero Page-Header layout fix (.hero-product-section.purple)
   Figma node 374:7654 (Page Header-Desktop 1440).

   Bug fixed here:
     The theme's `.hero-product-section__image { position: absolute;
     right: -15px; top: 0 }` (theme app.css line 280) pulls the right
     column out of normal flex flow and anchors it to the nearest
     positioned ancestor — which is the viewport on every page using
     this widget, because nothing in the hero chain has
     `position: relative`. Net effect:
       - image right edge sits at viewport-right + 15 px (bleeds out
         past the container's 60 px right padding by 75 px total)
       - image top is anchored at viewport y=0 (above the breadcrumb
         + navbar), so visually the image hugs the breadcrumb bottom
         with zero gap and is NOT vertically centred with the text
         column on the left.
     Figma 374:7654 places the two halves in a flex row with
     `items-center` (vertical centre) inside the page container.

   Scope:
     `section.hero-product-section.purple` (and its derivatives like
     `.hero-product-section.purple.orange`). 20+ pages use this
     variant — all of them have the same broken image positioning,
     so all of them benefit from the fix (verified via DB grep on
     2026-05-27: shopware, woocommerce, pos-system, agentic-commerce,
     etc.). The `body.home` JP-337 full-bleed hero is unaffected
     (different cascade scope). The `.hero-product-section.orange-
     archive` variant keeps its existing absolute-positioned image
     because that variant is intentional.

   Live target after the fix:
     - Right col returns to normal flex flow (position: static).
     - .row gets `align-items: center` so both cols share the vertical
       centre line — image visually anchored to the text midpoint.
     - Right padding pl-xl-80px stays (Bootstrap utility) — natural
       breathing room between text and image inside the container.
     - Image right edge lands inside the container's 60 px right
       padding (≈ x=1380 on a 1440 viewport), not bleeding past it.
     - Top of hero gets a generous padding so the image doesn't kiss
       the breadcrumb bottom on tall headers.
   ============================================================ */

/* Pull the right image column back into normal flex flow so the
   row layout can apply. */
section.hero-product-section.purple .col-lg-6.hero-product-section__image,
section.hero-product-section.purple .hero-product-section__image {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    /* Keep the column inside the row gutter (Bootstrap default 15 px
       on each side) — drop the negative right offset that previously
       bled the image past the container edge. */
    padding-right: 15px !important;
    /* The theme's `pl-xl-8` utility (padding-left: 80 px on ≥1200 px)
       stays in effect — it provides the gap between the text and the
       image, matching Figma 374:7654's 22.222 px gap (scaled). */
}

/* Vertical-centre the two columns. The hero `.row` ships with
   `align-items: normal` (defaults to stretch) — flip to centre so the
   image vertical-centre lines up with the text vertical-centre. */
section.hero-product-section.purple > .container > .row,
section.hero-product-section.purple .container > .row {
    align-items: center !important;
}

/* Force the image inside the right column to behave as a normal
   inline-block image filling its column. Some image variants ship
   width / height attrs that, paired with the absolute positioning,
   left it overflowing — now that we're in flow, cap width to the
   column and preserve aspect ratio. */
section.hero-product-section.purple .hero-product-section__image > img,
section.hero-product-section.purple .hero-product-section__image picture > img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;  /* right-align inside the column so the
                                      image hugs the container's right edge
                                      symmetrically with the navbar above */
}

/* Give the hero a generous vertical breathing room. The container
   already carries `padding: 64px 60px` from Bootstrap — keep that,
   but on `.purple` also reset the top margin so the breadcrumb's
   own bottom padding is the only thing between header and hero. */
section.hero-product-section.purple {
    margin-bottom: 0 !important;
    overflow: hidden !important;  /* prevent any decorative bg accent
                                      (e.g. purple block) from spilling
                                      past the viewport on wide screens */
}

/* Mobile — at <992 px the two columns naturally stack via Bootstrap.
   Re-enable normal flow for the image, drop the row centring (image
   sits BELOW text on small screens). */
@media (max-width: 991.98px) {
    section.hero-product-section.purple .col-lg-6.hero-product-section__image,
    section.hero-product-section.purple .hero-product-section__image {
        position: static !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 24px !important;
    }
    section.hero-product-section.purple > .container > .row,
    section.hero-product-section.purple .container > .row {
        align-items: stretch !important;
    }
}


/* ============================================================
   JP-447 — "Text mit Infobox" widget (Figma 248:6746)
   Update spec for the .product-management-section.purple widget
   pattern: text column on the left, info-box card on the right.

   Live target — `section.product-management-section.purple` WITHOUT
   the `.black` modifier. Used by 10+ product pages (verified DB
   grep 2026-05-27): agentic-commerce, ki, shopware, shopify,
   woocommerce, pos-system, gutscheinsystem, etc. All of them ship
   the same structural pattern; the editor-authored text + colour
   choices vary per page. This block restyles the WIDGET-LEVEL
   chrome + typography so every instance lands on the Figma look
   without per-page edits.

   `.purple.black` (Box-Facts variant, JP-447 earlier block above)
   is explicitly excluded via `:not(.black)` so its dark-blue card
   styling is preserved.

   Figma 248:6746 expects (component 347:4403 "Text+box-Desktop 1440"):
     LEFT col text:
       - Eyebrow: Inter Semi Bold 12.5 / 16.667 / 0.625 px (scaled
         to live 1440 ≈ 18 / 24 / 0.9), Tech Blue #2722f8, uppercase
       - H2:      Kurdis Wide Bold 22.222 / 31.944 / 0.4444 px
                  (≈ 32 / 46 / 0.64 live), Dark Blue
       - Body:    Inter Regular 12.5 / 19.444 px (≈ 18 / 28 live),
                  Dark Blue
       - CTA:     Orange #fb581f pill, Inter Semi Bold 11.11px,
                  Dark Blue text, 145.323 px radius
                  ← LIVE HAS NO CTA on this section. Pure CSS can't
                  inject a `<button>`. The orange-pill styling below
                  applies whenever an editor adds a [product_buttons_group]
                  / [product_button_with_icon] CTA in the left col;
                  for the agentic-commerce instance specifically, the
                  CTA needs a Layer-B DB content edit on page 302206
                  to add the shortcode (out of scope for this block).
     RIGHT col card:
       - bg WHITE, 46 px radius, 27.778 px padding (≈ 40 live)
       - Content: 4 vuesax-icon + bold title + body items
                  ← LIVE has 5-numbered list (different editor content).
                  CSS only restyles chrome; switching the list content
                  to the Figma vuesax-icon version needs a Layer-B
                  DB content edit (out of scope for this block).
   ============================================================ */

/* Right-column info card chrome: white bg, 46 px radius, tighter
   padding than the current 64 px. The plugin paints `.basic-card-
   widget` with light lavender #F2EDFE (specificity 0,1,0) — override
   with the section variant scope (0,3,1) so we don't bleed into the
   Box-Facts `.purple.black` variant. */
section.product-management-section.purple:not(.black) .basic-card-widget,
section.product-management-section.purple:not(.black) .basic-card-widget.card {
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 46px !important;
    box-shadow: none !important;
}
section.product-management-section.purple:not(.black) .basic-card-widget .card-body {
    padding: 40px !important;
    background: transparent !important;
}

/* Mobile — tighten card padding so it fits inside the narrower
   viewport without crowding. */
@media (max-width: 991.98px) {
    section.product-management-section.purple:not(.black) .basic-card-widget,
    section.product-management-section.purple:not(.black) .basic-card-widget.card {
        border-radius: 28px !important;
    }
    section.product-management-section.purple:not(.black) .basic-card-widget .card-body {
        padding: 24px !important;
    }
}

/* Left-column eyebrow — Figma says Tech Blue Inter Semi Bold 18 / 24
   / 0.9 px uppercase. The live eyebrow paints PURPLE #814FF0 via the
   editor's `color_custom` attr, which WPBakery materialises as a
   generated `.utils-XXXXXX` class (specificity 0,1,0). Override with
   the section variant scope (0,2,1) + !important so the Figma token
   wins. */
section.product-management-section.purple:not(.black) .product-support-section__subtitle,
section.product-management-section.purple:not(.black) .product-support-section__subtitle *,
section.product-management-section.purple:not(.black) .product-management-section__subtitle,
section.product-management-section.purple:not(.black) .product-management-section__subtitle * {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    background: none !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}

/* Headline — Dark Blue Kurdis Wide Bold 32 / 46 / 0.64 px. Already
   correct on live via JP-447 cascade fix; restated here for safety
   so the widget block is self-contained. */
section.product-management-section.purple:not(.black) .product-management-section__title,
section.product-management-section.purple:not(.black) .product-management-section__title .font-weight-bold,
section.product-management-section.purple:not(.black) .product-management-section__title * {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Kurdis Wide Bold", "Kurdis", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
}

/* Body paragraphs — Dark Blue Inter Regular 18 / 28. */
section.product-management-section.purple:not(.black) .product-management-section__text,
section.product-management-section.purple:not(.black) .product-management-section__text p {
    color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
}

/* CTA orange pill — if/when the left col contains a
   [product_buttons_group] CTA, paint it per Figma. The selector
   matches the existing hero-CTA shortcode output. */
section.product-management-section.purple:not(.black) .col-lg-6 .product-buttons-group {
    margin-top: 24px !important;
}
section.product-management-section.purple:not(.black) .col-lg-6 .product-button-group__button--with-icon {
    background: #fb581f !important;
    color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 145px !important;
    padding: 12px 24px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
}
section.product-management-section.purple:not(.black) .col-lg-6 .product-button-group__button--with-icon__text {
    color: #0b1b45 !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* ============================================================
   JP-447 — EARLY ACCESS card (.product-support-section.purple)
   Figma 248:4151 (Kontakt-Box Update).

   Bug: live `.container-product-support-card.card` had border-
   radius 0 — square corners on the outer card, so the Dark Blue
   left pane and Light Blue right Vector cutout bled to viewport-
   square corners. The widget plugin ships `overflow: hidden` on
   this wrapper already, but no radius to mask against.

   Fix: add 46 px radius (Figma) — `overflow: hidden` already
   present will mask both inner panes inside the rounded boundary.
   Also restate horizontal margin so the card floats inside the
   Light Sand section band with breathing space, not flush to
   the viewport edges.

   Scope: `.product-support-section.purple .container-product-
   support-card.card` — narrow enough that other variants
   (.orange, .linkboxen-mit-bild, .nl-anmeldung) are not affected.
   ============================================================ */
section.product-support-section.purple .container-product-support-card.card,
section.product-support-section.purple .container-product-support-card {
    /* Wrapper paints Dark Blue itself so its rounded corners + box-shadow
       define the visible card boundary edge-to-edge. Previously the
       wrapper was transparent (with the .card-body inside painting Dark
       Blue at a narrower 1280 px width vs the wrapper's 1320 px) — that
       20 px gap on each side leaked the section's Light Sand bg through
       the rounded corners. Match Figma 248:4151: bg `var(--jtl-dark-blue,#0b1b45)`.
       Also kill any injected `background-image` from per-instance
       `.utils-XXX { background-color: #F2EDFE }` style block. */
    background-color: #0b1b45 !important;
    background-image: none !important;
    border-radius: 46px !important;
    overflow: hidden !important;
    border: 0 !important;
    /* `position: relative` makes this a true containing block so any
       absolutely-positioned child paints inside the rounded clip
       (without this, position:absolute children can escape the
       overflow:hidden boundary). */
    position: relative !important;
    isolation: isolate !important;  /* new stacking context — prevents
                                       z-indexed children from escaping
                                       the clip on Safari */
    /* Subtle drop-shadow so the rounded card visually "floats" over
       the Light Sand band — makes the boundary unmistakable on the
       Light Blue right side where the bg/page-bg contrast is low.
       Dark Blue / 8% opacity, soft 30 px blur, 10 px y-offset. */
    box-shadow: 0 10px 30px rgba(11, 27, 69, 0.08) !important;
}

/* Make .card-body fill the wrapper edge-to-edge so the Light Blue
   `::before` layer (JP-348 block above @ line 2312+ — `right: 0`)
   reaches the wrapper's true right edge (1380 px), not the card-
   body's narrower default right edge (was 1340 px). Three forces
   conspire to inset card-body from the wrapper:
     - `margin: 20px` on each side  (Bootstrap-derived)
     - `padding` left from .card chrome
     - `width: 1280px` explicit
   Override all three with margin:0 + padding:0 + width:100% so the
   ::before's `right:0` lands flush at the wrapper's right edge and
   the rounded 46 px corners clip the Light Blue Vector cleanly. */
section.product-support-section.purple .container-product-support-card .card-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background-color: transparent !important;
}

/* The right column ships with `border-top border-right border-bottom
   border-left border-big nl-anme` — Bootstrap utility borders + a
   thick `border-big` brand-blue border that paints to the column's
   RECTANGULAR bounds and visually breaks the rounded-card illusion
   on the right side even when the parent overflow:hidden is in place.
   Suppress the visible border on this variant. */
section.product-support-section.purple .container-product-support-card .col-lg-6.border-big,
section.product-support-section.purple .container-product-support-card .col-lg-6.nl-anme,
section.product-support-section.purple .container-product-support-card [class*="border-big"],
section.product-support-section.purple .container-product-support-card [class*="nl-anme"] {
    border: 0 !important;
    box-shadow: none !important;
}

/* If the right pane paints its Light Blue bg on a nested wrapper
   that doesn't inherit the parent's clip cleanly (Safari edge case
   or wrapper has its own transform/filter creating a stacking
   context), force the top-right + bottom-right radius directly so
   the corners visually round even if clip doesn't reach them. */
section.product-support-section.purple .container-product-support-card .row > .col-lg-6:last-child,
section.product-support-section.purple .container-product-support-card .row > [class*="col-"]:last-child {
    border-top-right-radius: 46px !important;
    border-bottom-right-radius: 46px !important;
    overflow: hidden !important;
}
section.product-support-section.purple .container-product-support-card .row > .col-lg-6:first-child,
section.product-support-section.purple .container-product-support-card .row > [class*="col-"]:first-child {
    border-top-left-radius: 46px !important;
    border-bottom-left-radius: 46px !important;
    overflow: hidden !important;
}

/* Any background-image / pseudo-element that paints the Light Blue
   right pane gets rounded right corners too. Common pattern in JTL
   widgets: a ::before that paints the Light Blue half. */
section.product-support-section.purple .container-product-support-card .row > .col-lg-6:last-child::before,
section.product-support-section.purple .container-product-support-card .row > .col-lg-6:last-child::after {
    border-top-right-radius: inherit !important;
    border-bottom-right-radius: inherit !important;
}

/* Mobile — tighten the radius so the card scales down readably.
   At mobile widths the cols stack vertically; both edges become
   bottom edges of their stacked half, so round both edges instead
   of left/right halves. */
@media (max-width: 991.98px) {
    section.product-support-section.purple .container-product-support-card.card,
    section.product-support-section.purple .container-product-support-card {
        border-radius: 28px !important;
    }
    section.product-support-section.purple .container-product-support-card .row > .col-lg-6:first-child,
    section.product-support-section.purple .container-product-support-card .row > .col-lg-6:last-child {
        border-radius: 0 !important;
    }
}

/* Inputs / form chrome — Figma 248:4151 specifies subtle 2 px
   border-radius on the white text inputs + a 145 px pill radius
   on the orange ABSCHICKEN submit button. The HubSpot form ships
   its own defaults; we set the targets here so the chrome matches
   regardless of whether the form is rendered inline (rare) or via
   the same-origin iframe (most common — iframe injection lives
   in the JP-446 mu-plugin / future theme JS migration). */
section.product-support-section.purple .container-product-support-card input[type="text"],
section.product-support-section.purple .container-product-support-card input[type="email"],
section.product-support-section.purple .container-product-support-card input[type="tel"],
section.product-support-section.purple .container-product-support-card textarea,
section.product-support-section.purple .container-product-support-card select {
    border-radius: 3px !important;
}
section.product-support-section.purple .container-product-support-card input[type="submit"],
section.product-support-section.purple .container-product-support-card button[type="submit"],
section.product-support-section.purple .container-product-support-card .hs-button {
    border-radius: 200px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JP-447 — Roadmap restyle on /de/ki/agentic-commerce/ (page-id-302206)
   Figma 248:6930 → inner master 347:4496 "Roadmap-Desktop 1440"
   ---------------------------------------------------------------------------
   Live structure (probed 2026-05-27, page-id-302206) — already a 2-column
   comparison table, just needs Figma chrome applied:

     section.product-management-section.purple
       .container > .row > .col-lg-8 [header: Roadmap eyebrow + h2 + body]
       .container > .row > .col-lg-12 [the rows wrapper]
         .row.mt-6 (× N comparison rows)
           .col-lg-6 > .list-widget         (left: problem / step number + title + body)
           .col-lg-6 > .basic-br.card       (right: JTL-Wawi answer, white card)
         <hr> dividers between rows

   Figma master 347:4496 wraps each row as a Tech-Blue 2 px-bordered card
   with rounded-24 corners; the left half is transparent (sits on the
   Light Sand outer band) and the right half is white with rounded-right.

   Page-scoped to body.page-id-302206 so PR #87/#90's
   .product-management-section.purple dark-teal variant on the OTHER KI
   page (/de/ki/, page-id-302458) stays untouched. Both PRs ship rules
   for the same selector at a global level; this block overrides only
   on the agentic-commerce page-id.

   CSS-only — no Template.php / mu-plugin changes. Comparison header
   labels ("Was JTL dir abnimmt | Was du ohne JTL stemmen müsstest")
   added via ::before on the col-lg-12 wrapper as a 2-column grid label.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Outer band — Light Sand per Figma master 347:4496 (overrides the
   dark teal that PR #87 paints for .product-management-section.purple
   on the /de/ki/ page). Adds Figma's py-80 px-64 outer padding. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple {
    background-color: #eeeee7 !important;
    padding: 80px 0 !important;
}

/* (2) Header column — eyebrow + h2 + body. The .col-lg-8 already paints
   correctly via earlier cascades (Tech Blue eyebrow Inter SemiBold 18,
   Kurdis Wide 32 h2, Dark Blue body). Just normalise spacing so the
   stack sits above the rows wrapper with consistent gap. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-8 {
    margin-bottom: 28px !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-8 .product-management-section__text {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin-top: 8px !important;
}

/* (3) Rows wrapper — add the comparison column-header labels via
   ::before. Figma 347:4496 row I347:4496;201:1192:
     LEFT  "Was JTL dir abnimmt"             — Dark Blue Inter SemiBold
     RIGHT "Was du ohne JTL stemmen müsstest" — Tech Blue Inter SemiBold
   Inter SemiBold 13.89 × 1.44 = 20 px, lh 19.444 × 1.44 = 28 px.
   Single ::before with grid 1fr 1fr to lay them side-by-side. Colours
   set via gradient mask split — first 50% Dark Blue, second 50% Tech
   Blue. Simpler: two separate ::before/::after pseudos on the col-lg-12
   inside a grid layout. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 {
    position: relative !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12::before {
    content: "Was JTL dir abnimmt";
    position: absolute;
    top: 0;
    left: 60px;
    width: calc(50% - 60px - 8px);
    padding: 16px 46px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12::after {
    content: "Was du ohne JTL stemmen müsstest";
    position: absolute;
    top: 0;
    right: 60px;
    width: calc(50% - 60px - 8px);
    padding: 16px 46px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #2722f8;
}

/* (4) Push the rows down to clear the absolutely-positioned ::before/::after
   header labels. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row.mt-6:first-of-type,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row.mt-5:first-of-type {
    margin-top: 76px !important;
}

/* (5) Each comparison row: Tech-Blue 2 px border + 24 px radius wrapper.
   The .row is the bordered card. Override Bootstrap's negative gutter
   so the row visually contains both columns flush. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] {
    border: 2px solid #2722f8 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
}
/* Spacing between rows — Figma `gap-16.667` × 1.44 ≈ 24 px. Override
   the heavier mt-5 / mt-6 the live markup uses. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] + .row[class*="mt-"] {
    margin-top: 24px !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"]:not(:first-of-type) {
    margin-top: 24px !important;
}

/* (6) Hide the <hr> dividers between rows — Figma uses 24 px gap with
   bordered cards instead of divider lines. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > hr {
    display: none !important;
}

/* (7) Left column inside each row: transparent bg, 46 px padding, no
   right border (the wrapper row already has the outer border). The
   col-lg-6 from Bootstrap brings a 15 px gutter — kill it so content
   sits flush against the row's border. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:first-child {
    padding: 0 !important;
    background-color: transparent !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:first-child .list-widget {
    padding: 46px !important;
    background-color: transparent !important;
    height: 100% !important;
    margin: 0 !important;
    color: #0b1b45 !important;
}

/* (8) Number prefix inside the list-widget — Figma I347:4496;201:1331:
   Inter SemiBold 13.89 × 1.44 = 20 px Tech Blue. The live widget
   renders numbers via a counter or first-child text node. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget .list-widget__num,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget [class*="num"] {
    color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
}
/* Title + body inside the list-widget — Dark Blue Inter, title SemiBold
   20/28, body Regular 18/28. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget h3,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget h4,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget [class*="title"] {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 0 0 12px !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget p,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .list-widget [class*="text"]:not([class*="title"]) {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 0 !important;
}

/* (9) Right column inside each row: white bg, rounded right corners
   (matching the row's outer 24 px radius), 46 px padding. Override the
   peach-purple #F2EDFE that the live page injects via .utils-XXX. */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child {
    padding: 0 !important;
    background-color: transparent !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .basic-br.card,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child [class*="utils-"].card,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 22px 22px 0 !important;
    padding: 46px !important;
    box-shadow: none !important;
    height: 100% !important;
    margin: 0 !important;
    color: #0b1b45 !important;
}
/* Right-card subtitle ("JTL-Wawi" Tech Blue Inter SemiBold) + body
   (Dark Blue Inter Regular). */
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card h3,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card h4,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card [class*="title"],
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card strong:first-child {
    color: #2722f8 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin: 0 0 12px !important;
}
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card p,
body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card .card-body {
    color: #0b1b45 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 0 !important;
}

/* Mobile (< 768): stack columns vertically — the comparison header
   labels need different positioning (one above each column block). */
@media (max-width: 767.98px) {
    body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12::before,
    body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12::after {
        position: static;
        width: auto;
        padding: 8px 24px;
        font-size: 16px;
        line-height: 22px;
    }
    body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"]:first-of-type {
        margin-top: 0 !important;
    }
    body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6 .list-widget,
    body.page-id-302206 section#was-jtl-liefert.product-management-section.purple .col-lg-12 > .row[class*="mt-"] > .col-lg-6:last-child .card {
        padding: 24px !important;
        border-radius: 0 !important;
    }
}


/* ── JP-453 /de/marktplatzanbindung (page-id-8688) ───────────────────
   Preise dark card — same invisible-H2 bug pattern as JP-205
   (/de/gutscheinsystem, page-id-125841), JP-213 (/de/erp-schnittstelle/
   shopware), and JP-451 (/de/umsatzsteuer-software, page-id-199375).

   The Pricing section ".product-support-section.purple" wraps a
   ".basic-card-widget" that paints a dark teal #142830 background via
   the WPBakery per-instance `.utils-6a171d8d2c279` class. The H2
   ".product-support-section__title" ("Preise für die Marktplatzanbindungen
   von JTL") inherits the design-system Dark Blue (#0b1b45) → effectively
   invisible on the dark teal card.

   The global rule at line ~4530 only fires when the .basic-card-widget
   itself has `.text-tertiary`; this instance's card lacks that modifier
   (the `.text-tertiary`-equivalent class lives on the H2 here). Match
   JP-205 / JP-213 / JP-451 precedent with a page-id-scoped override
   rather than widening the global rule. The H2 wraps "Preise" in a
   <span class="font-weight-bold">, so the span is targeted explicitly. */
body.page-id-8688 .product-support-section .basic-card-widget .product-support-section__title,
body.page-id-8688 .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold {
    color: #eeeee7 !important;
}

/* ── JP-453 /de/marktplatzanbindung (page-id-8688) — duplicate-element fix
   This page renders BOTH:
     1. JP-449's global pseudo-content eyebrow + CTA on .product-company-section
        (.product-companies-section__title::before "JTL COMMUNITY"
         + .container::after "BERATUNG VEREINBAREN")
     2. A per-page DOM-injected eyebrow + CTA pair
        (<div class="jp446-eyebrow">JTL COMMUNITY</div>
         + <button class="jp446-cta">BERATUNG VEREINBAREN</button>)
   → user sees both, stacked: "JTL COMMUNITY" twice + the orange CTA twice.

   JP-449's :has() fallback collapses the CTA pseudo when an editor adds a
   real <a> button in the row, but this page's DOM injection is a <button>
   element, which the :has() doesn't catch. The eyebrow ::before has no
   fallback at all.

   Page-id-scoped suppression here only — does NOT touch JP-449's global
   pseudos which remain the eyebrow/CTA source on every other product-
   landing page where the .jp446-eyebrow/.jp446-cta DOM elements aren't
   present. */
body.page-id-8688 .product-company-section .product-companies-section__title::before,
body.page-id-8688 .product-company-section .container::after {
    content: none !important;
    display: none !important;
}
/* ── JP-454 /de/erp-schnittstelle (page-id-1546) — Preise dark card readable
   Same bug pattern as JP-205 (/de/gutscheinsystem), JP-213 (/de/erp-schnittstelle/
   shopware, PR #103), JP-451 (/de/umsatzsteuer-software, PR #107), JP-453
   (/de/marktplatzanbindung, PR #109).

   The .product-support-section.purple holds a .basic-card-widget painted dark
   teal #142830 via WPBakery's per-instance `.utils-6a1725b6b0ac2` class. The
   H2 .product-support-section__title.text-tertiary ("Was kostet die
   ERP-Schnittstelle?") inherits design-system Dark Blue #0b1b45 → invisible
   on the dark teal card.

   The global rule at custom-clone.css:~4530 fires only when the
   .basic-card-widget has the .text-tertiary modifier; this instance's card
   lacks the modifier (the H2 itself has it). Note: this product-support-section
   contains TWO h2 elements ("Einsatzszenarien für den JTL-Connector" on the
   Light Sand bg, and "Was kostet die ERP-Schnittstelle?" in the dark card).
   Selector adds `.text-tertiary` qualifier on the H2 so it ONLY flips the
   dark-card h2, leaves the Light Sand h2 alone. */
body.page-id-1546 .product-support-section .basic-card-widget .product-support-section__title.text-tertiary,
body.page-id-1546 .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold {
    color: #eeeee7 !important;
}

/* ── JP-454 /de/erp-schnittstelle (page-id-1546) — Logo-Slider dedupe
   Same pattern as JP-453 PR #109. This page renders BOTH JP-449's global
   pseudo-content eyebrow + CTA (.product-companies-section__title::before
   "JTL COMMUNITY" + .container::after "BERATUNG VEREINBAREN") AND a per-page
   DOM-injected pair (<div class="jp446-eyebrow"> + <button class="jp446-cta">).
   JP-449's :has() fallback only collapses the pseudo when an <a> button is
   present; this page's DOM injection is a <button> element, which the :has()
   doesn't match. Result: each renders twice, stacked.

   Page-id-scoped suppression here only — does NOT touch JP-449's global rules,
   which remain the eyebrow/CTA source on every other product-landing page
   that lacks the .jp446-eyebrow/.jp446-cta DOM injections. */
body.page-id-1546 .product-company-section .product-companies-section__title::before,
body.page-id-1546 .product-company-section .container::after {
    content: none !important;
    display: none !important;
}

/* ── JP-454 /de/erp-schnittstelle (page-id-1546) — Einsatzszenarien card

   Live bug (probed 2026-05-27):
     The 3-column "Einsatzszenarien für den JTL-Connector" card on this page
     uses `.container-product-support-card` (a generic WPBakery `CardsStandard`
     wrapper) with per-instance class `.utils-6a17266b85620` injecting
     `background-color: #E6F9FA !important` (Light Cyan — the editor's intent).

     JP-447's rule at custom-clone.css:13231 paints EVERY
     `.product-support-section.purple .container-product-support-card` to
     Dark Blue + `overflow:hidden` + 46 px radius + zero padding. That rule
     is correct for the Kontakt-Box / Early Access card it was written for
     (Dark-Blue-left + Light-Blue-right Vector split), but on this page the
     same class wraps a totally different module: three columns of dark text
     on the editor's Light Cyan tile.

     Result: the card is forced Dark Blue → all column titles + body copy
     (Dark Blue, inherited) are Dark-on-Dark and INVISIBLE; the zero padding
     plus 46 px corner clips the OPTIONEN eyebrow to "PTIONEN".

   Fix (page-id-1546 scope only — don't change JP-447's global rule, the
   Kontakt-Box on its page still depends on it):
     1. Restore the editor's Light Cyan bg. JP-447's selector is
        `section.product-support-section.purple .container-product-support-card.card`
        (specificity 0,4,1). Adding `body.page-id-1546` to ours lifts us
        to 0,5,2 — wins cleanly. We do NOT anchor to the per-instance
        `.utils-XXXX` hash because WPBakery regenerates that hash on
        every save (probed 2026-05-27: same card was `utils-6a17266b85620`
        in one render, `utils-6a172bbf4d76a` in the next). Probed: this
        page has exactly ONE `.container-product-support-card`, so the
        less-specific selector matches only the intended Einsatzszenarien
        card.
     2. Add inner card-body padding so OPTIONEN / Einsatzszenarien / the
        three columns sit clear of the 46 px corner clip.
     3. Neutralise the inner row's Bootstrap `margin: 0 -16px` so the
        column track stays inside the now-padded card. */
body.page-id-1546 section.product-support-section.purple .container-product-support-card,
body.page-id-1546 section.product-support-section.purple .container-product-support-card.card {
    background-color: #E6F9FA !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.page-id-1546 section.product-support-section.purple .container-product-support-card > .card-body {
    padding: 56px 60px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 991.98px) {
    body.page-id-1546 section.product-support-section.purple .container-product-support-card > .card-body {
        padding: 32px 24px !important;
    }
}

body.page-id-1546 section.product-support-section.purple .container-product-support-card .product-support-section__inner-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Even 3-column track. The editor's per-column class has `pr-xl-5` on the
   first column only, plus `col-xl-3 col-md-12` width hints that JP-447's
   chain doesn't address. Normalise the right-padding so all three columns
   align uniformly with the column-title arrows at a consistent gap. */
body.page-id-1546 section.product-support-section.purple .container-product-support-card .product-support-section__column {
    padding-right: 32px !important;
}
body.page-id-1546 section.product-support-section.purple .container-product-support-card .product-support-section__column:last-child {
    padding-right: 0 !important;
}
/* ============================================================
   JP-452 — DMS Pricing widget restyle (Figma Update "Tabelle Desktop 1440")
   Figma fileKey VSSY3wxlC31HrYDwwmHmrv, node 201:4306.

   Live target: section.product-support-section.orange on
   /de/dms-software/ (body.page-id-233028) only. The same class
   also renders /de/ki/'s Kontakt-Box (JP-446 Dark Blue card +
   HubSpot form) — scope to page-id keeps that intact.

   What changes vs the JP-446 cascade upstream:
     - Strip the Dark Blue card + Light Blue Vector pseudo. The
       Update is flat on the Light Sand body bg.
     - Eyebrow flips Light Blue → Tech Blue #2722f8 (18/24/0.9).
     - H2 + body flip White → Dark Blue #0b1b45 (Kurdis 32/46;
       Inter 18/28).
     - "Editionen & Funktionen vergleichen" CTA → Dark Blue
       outlined Secondary pill (was Orange filled), pulled to
       the right of the heading row via absolute positioning.
     - Comparison table: rounded-24 white container with a Dark
       Blue header bar (Light Blue Inter 16/24 text) and a white
       body row (Dark Blue Inter Semi Bold 20/28 first cell;
       Inter Regular 16/24 others). Checkmarks flip Orange →
       Tech Blue.
     - Reveal the .product-subcard-widget that holds "Du kannst
       die DMS Software über GREYHOUND ab 84 € / Monat hinzubuchen."
       (Figma 201:4365) + the Primary "JETZT 14 TAGE KOSTENFREI
       TESTEN" CTA (Figma 201:4367) — the editor's `.utils-XXX`
       <style> hides it at <1200, force-show across all viewports.
   ============================================================ */

/* (1) Strip the JP-446 Dark Blue card chrome. */
body.page-id-233028 section.product-support-section.orange .basic-card-widget {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget::before {
    display: none !important;
    content: none !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body {
    padding: 0 !important;
    background: transparent !important;
}

/* (2) Eyebrow "Preise & Verfügbarkeit" — Tech Blue Inter Semi Bold
   18/24 px / 0.9 px tracking / uppercase (Figma node 201:4311). */
body.page-id-233028 section.product-support-section.orange .product-support-section__subtitle {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    background: none !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}

/* (3) H2 "DMS GREYHOUND" — Dark Blue Kurdis Wide Bold 32/46/0.64
   (Figma node 201:4312). */
body.page-id-233028 section.product-support-section.orange .product-support-section__title,
body.page-id-233028 section.product-support-section.orange .product-support-section__title *:not(.headline-link) {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    background: none !important;
    font-family: "Kurdis Wide Bold", "Kurdis", "Inter", sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    margin: 0 0 24px !important;
}

/* (4) Body paragraph "GREYHOUNDs DSGVO-konformes ..." — Dark Blue
   Inter Regular 18/28, with <strong> "JTL Editionen Pro und
   Enterprise inklusive." rendering bold (Figma node 201:4371 +
   in-line bold sub-token). */
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p,
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p strong,
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p b {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-size: 18px !important;
    line-height: 28px !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p {
    font-weight: 400 !important;
    margin: 0 0 24px !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p strong,
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body p b {
    font-weight: 700 !important;
}

/* (5) "Editionen & Funktionen vergleichen" CTA — Dark Blue outlined
   Secondary pill (Figma 201:4373). Pull it out of the left col with
   absolute positioning so it sits flush right of the heading row,
   vertically centred with the heading block — Figma puts it at
   right:0, vertical-centre of the 156-tall heading band. */
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body > .row {
    position: relative !important;
}
/* Bootstrap defaults .col-lg-6 to position:relative; clear that so
   the absolute CTA below anchors to .row instead of the column,
   landing flush with the right edge of the card content area. */
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body > .row > .col-lg-6 {
    position: static !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body .col-lg-6 > .product-buttons-group {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .product-buttons-group .product-button-group__button--with-icon,
body.page-id-233028 section.product-support-section.orange .basic-card-widget .product-buttons-group a {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid #0b1b45 !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    /* Keep the CTA text on a single line (Figma 201:4373 — Secondary
       pill renders "Editionen & Funktionen vergleichen" without break);
       absolute positioning shrinks the wrapper to content so the pill
       sizes naturally. */
    white-space: nowrap !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .product-button-group__button--with-icon__text {
    white-space: nowrap !important;
}
body.page-id-233028 section.product-support-section.orange .basic-card-widget .product-buttons-group a:hover {
    background-color: #0b1b45 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* Inner span inherits the link's colour and font. */
body.page-id-233028 section.product-support-section.orange .basic-card-widget .product-button-group__button--with-icon__text {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
    font: inherit !important;
}

/* (6) Comparison table — rounded-24 white container, Dark Blue
   header bar with Light Blue text, white body row with Dark Blue
   text + Tech Blue checkmarks (Figma node 201:4313 + 201:4314
   header rect + per-cell text tokens 4318/4320/4322/4355/...). */
body.page-id-233028 section.product-support-section.orange .table-responsive,
body.page-id-233028 section.product-support-section.orange .table-wrap-producs {
    background-color: #ffffff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-top: 40px !important;
    box-shadow: 0 1px 2px rgba(11, 27, 69, 0.05) !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table.table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #0b1b45 !important;
    width: 100% !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table thead,
body.page-id-233028 section.product-support-section.orange .table-responsive table thead tr {
    background-color: #0b1b45 !important;
    /* Plugin's `.product-support-section.orange` paints a wawi-gradient
       linear-gradient on the thead tr — kill it so the solid Dark Blue
       below shows through. */
    background-image: none !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table thead tr {
    height: 60px !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table thead th {
    background-color: transparent !important;
    border: 0 !important;
    padding: 18px 13px !important;
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table thead th:first-child {
    width: 281px !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody tr {
    background-color: #ffffff !important;
    background-image: none !important;
}
/* Kill any Orange-variant decorative outline / box-shadow on the
   .table-responsive container (the plugin paints an orange ring +
   inner shadow on the .table-wrap-producs in the .orange variant). */
body.page-id-233028 section.product-support-section.orange .table-responsive {
    outline: 0 !important;
    border: 0 !important;
}
body.page-id-233028 section.product-support-section.orange .table-wrap-producs::before,
body.page-id-233028 section.product-support-section.orange .table-wrap-producs::after {
    display: none !important;
    content: none !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td {
    background-color: transparent !important;
    border: 0 !important;
    padding: 24px 13px !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td:first-child {
    text-align: left !important;
    padding-left: 24px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 28px !important;
}
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td:first-child strong {
    font-weight: 600 !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
/* Nested <span dir="auto"> wrappers in cells inherit text styles —
   exclude FA icon spans so the check-icon font-family stays intact. */
body.page-id-233028 section.product-support-section.orange .table-responsive table th span:not([class*="fa-"]),
body.page-id-233028 section.product-support-section.orange .table-responsive table td span:not([class*="fa-"]) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font: inherit !important;
    background: transparent !important;
}
/* Tech Blue check icon — keep FA font-family intact (do NOT touch
   font on the FA span itself, only colour + size). */
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td [class*="fa-check"],
body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td .fa-regular.fa-check {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    font-size: 22px !important;
    line-height: 24px !important;
}

/* (7) Reveal + restyle the .product-subcard-widget (hidden on
   live by the editor's `.utils-XXX` style). Force-show, centre
   it, drop the inline -32 px margin-top. */
body.page-id-233028 section.product-support-section.orange .product-subcard-widget {
    display: block !important;
    max-width: 700px !important;
    margin: 32px auto 0 !important;
    background: transparent !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget__text {
    text-align: center !important;
    margin-bottom: 32px !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget__text p {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 0 !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget__text p strong,
body.page-id-233028 section.product-support-section.orange .product-subcard-widget__text p b {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-weight: 700 !important;
}

/* (7b) Primary CTA "JETZT 14 TAGE KOSTENFREI TESTEN" — Orange
   filled pill, Dark Blue text (Figma 201:4367). More specific
   selector chain to win over (6)'s Secondary outlined rule. */
body.page-id-233028 section.product-support-section.orange .product-subcard-widget .product-buttons-group {
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget .product-buttons-group .product-button-group__button--with-icon,
body.page-id-233028 section.product-support-section.orange .product-subcard-widget .product-buttons-group a {
    background-color: #fb581f !important;
    background-image: none !important;
    border: 0 !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0.32px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-radius: 145px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget .product-buttons-group a:hover {
    background-color: #e44a17 !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
body.page-id-233028 section.product-support-section.orange .product-subcard-widget .product-buttons-group .product-button-group__button--with-icon__text {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font: inherit !important;
    background: transparent !important;
}

/* (8) Mobile (<992 px) — collapse the right-floated CTA to natural
   flow, shrink the heading + table cell type sizes. */
@media (max-width: 991.98px) {
    body.page-id-233028 section.product-support-section.orange .basic-card-widget .card-body .col-lg-6 > .product-buttons-group {
        position: static !important;
        transform: none !important;
        margin: 24px 0 0 !important;
        justify-content: flex-start !important;
    }
    body.page-id-233028 section.product-support-section.orange .product-support-section__title,
    body.page-id-233028 section.product-support-section.orange .product-support-section__title *:not(.headline-link) {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td:first-child {
        font-size: 18px !important;
        line-height: 26px !important;
        padding-left: 16px !important;
    }
    body.page-id-233028 section.product-support-section.orange .table-responsive table thead th,
    body.page-id-233028 section.product-support-section.orange .table-responsive table tbody td {
        padding: 16px 8px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
}

/* ── JP-451 /de/umsatzsteuer-software (page-id-199375) ────────────────
   The Pricing section ".product-support-section.orange" wraps a
   ".basic-card-widget" that paints a dark teal #142830 background via
   the WPBakery per-instance `.utils-6a16d5da30f77` class. The H2
   ".product-support-section__title" ("OSS powered by countX") inherits
   the design-system Dark Blue (#0b1b45) — Dark Blue on Dark Teal reads
   as effectively invisible.

   Same root cause as JP-205 (/de/gutscheinsystem, page-id-125841) and
   JP-213 (/de/erp-schnittstelle/shopware). The existing global rule at
   line ~4530 only fires when the CARD has `.text-tertiary` modifier,
   which this instance's `.basic-card-widget` lacks (the modifier is on
   the H2 here, not the card). Page-id-scoped fix matches the JP-205 /
   JP-213 precedent without widening the global rule and risking
   regressions on other variants.

   The H2 also wraps "OSS" in a `<span class="font-weight-bold">` that
   gets its color from a separate design-system rule, so the span is
   targeted explicitly. */
body.page-id-199375 .product-support-section .basic-card-widget .product-support-section__title,
body.page-id-199375 .product-support-section .basic-card-widget .product-support-section__title .font-weight-bold {
    color: #eeeee7 !important;
}

/* ── JP-455 /de/pos-system (page-id-96380) — Preise dark card readable
   Same bug pattern as JP-205 (/de/gutscheinsystem), JP-213 (/de/erp-
   schnittstelle/shopware, PR #103), JP-451 (/de/umsatzsteuer-software,
   PR #107), JP-453 (/de/marktplatzanbindung, PR #109), JP-454
   (/de/erp-schnittstelle, PR #111).

   The .product-support-section.purple holds a .basic-card-widget painted
   dark teal #142830 via WPBakery's per-instance `.utils-6a1734592a081`
   class. The H2 .product-support-section__title.text-tertiary ("Was
   kostet JTL-POS?") inherits design-system Dark Blue #0b1b45 → invisible
   on the dark teal card. The bold span ("JTL-POS?") shares the problem.

   The global rule at custom-clone.css:~4530 fires only when the
   .basic-card-widget has the .text-tertiary modifier; this instance's
   card lacks the modifier (the H2 itself has it). Page-id-scoped fix
   matches the JP-205 / JP-213 / JP-451 / JP-453 / JP-454 precedent.

   Note: probed this page has ONLY ONE product-support-section__title
   (the dark-card one), unlike JP-454 which had two. The `.text-tertiary`
   qualifier on the selector is kept for consistency and future-proofing
   in case a second title is added. */
body.page-id-96380 .product-support-section .basic-card-widget .product-support-section__title.text-tertiary,
body.page-id-96380 .product-support-section .basic-card-widget .product-support-section__title.text-tertiary .font-weight-bold {
    color: #eeeee7 !important;
}

/* ── JP-455 /de/pos-system (page-id-96380) — Logo-Slider dedupe
   Same pattern as JP-453 PR #109 and JP-454 PR #111. This page renders
   BOTH JP-449's global pseudo-content eyebrow + CTA
   (.product-companies-section__title::before "JTL COMMUNITY" +
   .container::after "BERATUNG VEREINBAREN") AND a per-page DOM-injected
   pair (<div class="jp446-eyebrow"> + <button class="jp446-cta">).
   JP-449's :has() fallback only collapses the pseudo when an <a> button
   is present; this page's DOM injection is a <button> element, which the
   :has() doesn't match. Result: each renders twice, stacked.

   Page-id-scoped suppression here only — does NOT touch JP-449's global
   rules, which remain the eyebrow/CTA source on every other product-
   landing page that lacks the .jp446-eyebrow/.jp446-cta DOM injections. */
body.page-id-96380 .product-company-section .product-companies-section__title::before,
body.page-id-96380 .product-company-section .container::after {
    content: none !important;
    display: none !important;
}

/* ── JP-455 /de/pos-system (page-id-96380) — onboarding-steps subcard collision

   The "So startest du mit JTL-POS" section (.product-cta-section.pos-system-
   cta-section) stacks two .col-lg-12 rows inside one .image-with-list-widget:
     row 1: image (left, 510px tall) + 3-step list (right, "01 Download",
            "02 Verbinden", "03 Kassieren & skalieren")
     row 2: the lilac .product-subcard-widget banner ("Weitere Informationen
            … ZUR DOKUMENTATION / ZUR PASSENDEN HARDWARE")

   Row 2's column carries the Bootstrap utility `mt-xl-n10` (margin-top:
   -112px at ≥1200px). That negative margin is the intended "tuck the banner
   up beside the tall left image" device, and works on the ~40 other pages
   that use this widget because their right-column content is short. On POS
   the right column has THREE steps, so it's tall enough that the -112px pull
   lands the banner's top (z-index:2) on top of Step 03's description
   ("Direkt loslegen – bei Bedarf …"): probed overlap = 32px, banner painting
   over the last line of the description.

   Fix (page-id-96380 + xl only — where the negative margin applies; mobile
   stacks with no negative margin so it's untouched): reduce the negative
   margin from -112px to -48px so the banner clears Step 03 with ~32px of
   breathing room while keeping a gentle upward tuck. Scoped to this page so
   the other ~40 subcard pages keep their original -112px tuck. */
@media (min-width: 1200px) {
    body.page-id-96380 .product-cta-section.pos-system-cta-section .col-lg-12.mt-xl-n10 {
        margin-top: -48px !important;
    }
}

/* ── JP-455 /de/pos-system (page-id-96380) — payments-card description
   breathing room ("Ohne Aufwand starten" payment-provider card).

   The .container-product-payments-card is a Light-Blue rounded card
   (46px radius, overflow:hidden) whose ::before paints the Dark-Blue
   region via clip-path: ellipse(85% 150% at 100% 50%) (the curved
   divider). The left text column holds the h2 + a `.mt-5` description
   ("Du sparst nicht nur bares Geld …"). On this page that paragraph is
   long enough that its last line lands flush on the card's bottom edge:
   probed description-bottom == card-bottom (gap 0px), and the card +
   description both have padding-bottom: 0. With overflow:hidden the last
   line's descenders sit on the rounded clip boundary — cramped.

   Fix (page-id-96380 + xl only — the flush only happens at ≥1200px where
   the text and gallery columns sit side-by-side so the card height is
   driven by the text column; below xl the columns stack and the gallery
   already provides space below the text): add 32px bottom padding to the
   text column so the paragraph clears the card edge, matching the 32px
   padding the title and gallery columns already use. Scoped to this page
   so the other 24 payment-card pages (shorter copy, not flush) are
   untouched. The Dark-Blue ellipse + centered logo grid re-flow with the
   taller card automatically. */
@media (min-width: 1200px) {
    body.page-id-96380 .product-payments-section.purple .container-product-payments-card .card-body > .row > .col-xl-5:not(.product-companies-gallery-col) {
        padding-bottom: 32px !important;
    }
}

/* ── JP-455 /de/pos-system (page-id-96380) — payments-card description
   left-alignment / left-border breathing room.

   Probed (2026-05-28): in the left text column the h2
   `.product-payments-section__title` carries `padding: 32px`, so its TEXT
   sits 32px in from the card's left edge. The sibling `.mt-5` description
   ("Du sparst nicht nur …") has padding:0, so its text starts at the card's
   left content edge (gap 0px) — flush against the rounded Light-Blue border
   AND misaligned 32px to the left of the heading above it.

   Fix: give the description the same horizontal inset as the title so the
   two left-align and the paragraph clears the border. 32px to match the
   title at ≥768px; 24px below that to match the title's mobile padding
   (custom-clone.css:6562 sets the title to 24px at ≤767px). Applies at all
   widths because the description is left-flush at every breakpoint (the
   columns stack on mobile but the title still carries its padding while the
   description does not). Page-id-scoped so other payment-card pages are
   untouched. */
body.page-id-96380 .product-payments-section.purple .container-product-payments-card .col-xl-5:not(.product-companies-gallery-col) > .mt-5 {
    padding-left: 32px !important;
    padding-right: 32px !important;
    /* Pull the description nearer the heading: `.mt-5` ships margin-top 32px
       which, on top of the title's 32px bottom padding, left a 65px gap.
       Halve it to 16px (≈49px total) so the paragraph sits closer to the
       title without crowding it. */
    margin-top: 16px !important;
}
@media (max-width: 767.98px) {
    body.page-id-96380 .product-payments-section.purple .container-product-payments-card .col-xl-5:not(.product-companies-gallery-col) > .mt-5 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* 2606 — "Optionen für dein Onboarding" (and other product-support sections):
   underline the in-text list links (the arrow-icon link list inside the columns).
   Overrides the theme's ".product-support-section__column .list-icons li a { none }"
   at equal specificity (appended later, so this wins). The section's CTA buttons
   (.product-buttons-group) and the ".content-link" arrow link are NOT inside
   .list-icons, so they stay un-underlined as designed. */
.product-support-section .product-support-section__column .list-icons li a {
    text-decoration: underline !important;
}
.product-support-section .product-support-section__column .list-icons li a:hover,
.product-support-section .product-support-section__column .list-icons li a:focus {
    text-decoration: underline !important;
}