/**
 * jp-644-one-jtl.css — JP-644 LIVE "One JTL" page, post 326092 (/de/one-jtl)
 *
 * Page-scoped to body:is(.page-id-326092,.page-id-326404). (Earlier iterations targeted a throwaway
 * duplicate /de/one-jtl-jp644 (325705); the work now lands on the real page.)
 * Content seeded by reusing the existing widget composition; this sheet restyles
 * it to the Figma 1184:12116 light / tech-blue design.
 *
 * The page already renders the full Figma 1184:12116 narrative (hero, "Der Markt
 * wartet nicht", the "Diese Vision … als One JTL" 6-icon grid, "Von Shop bis
 * Logistik" ecosystem grid, "Was bleibt. Was besser wird.", FAQ accordion,
 * Kontakt-Box). What differs from the Figma is the COLOUR TREATMENT: the live
 * widgets render in the old dark-navy / orange theme, while the Figma "Update"
 * design is light / tech-blue on light-sand. This sheet flips that treatment,
 * section by section — the same dark→light restyle pattern shipped on
 * /de/versandplattform (jp-versandplattform.css).
 *
 * Page:  https://dev-jtl-khoa.betterscale.dev/de/one-jtl/
 * Figma: https://www.figma.com/design/NGhRnXhpI8bbeDQhA9mUzD/JTL-Website-Modules-5?node-id=1184-12115
 *
 * Design tokens (from the Figma section renders):
 *   --jtl-light-sand  #eeeee7   page / card background
 *   --jtl-tech-blue   #2722f8   eyebrow + icons + numbers + checkmarks
 *   --jtl-dark-blue   #0b1b45   headings, titles, body, stat-card fill
 *   --jtl-light-blue  #89d2ff   contact-box eyebrow
 *   --jtl-orange      #ff5a1f   CTA pill (kept from the brand)
 *
 * Body-scoped to page-id-326092 + the section instance class so nothing leaks to
 * the same widgets on other pages. The `utils-<hash>` per-instance classes are
 * NOT used as hooks — they regenerate on every render (learned on versandplattform).
 * Where the theme paints an element with a high-specificity class-only rule or a
 * gradient text-fill, the `#content` ID ancestor (theme MAIN wrapper) is used to
 * win deterministically (an ID outranks any number of classes).
 */

/* ============================================================= *
 * 0) HERO HEADER (Figma 1184:12117) — flip the live orange split layout
 *    (left text + right Wawi-dashboard image) to the Figma's full-bleed dark
 *    navy, centred single column: white heading with orange "One Platform.",
 *    centred subtext, centred CTAs. (Figma shows a looping video behind the
 *    dark overlay — a <video> bg is a template change, not CSS; the dark navy
 *    field reproduces the look. Noted as a follow-up.)
 * ============================================================= */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section.orange {
    /* Figma header background: video poster photo under a #0B1B45 @ 75% overlay
       (the exact tint supplied: rect fill #0B1B45 fill-opacity 0.75). The image
       sits next to this sheet in theme/jtl/overrides/. A real looping bg <video>
       is a template change + needs a direct media asset — see PR notes. */
    background:
        linear-gradient(rgba(11, 27, 69, .75), rgba(11, 27, 69, .75)),
        url("jp644-hero-bg.jpg") center / cover no-repeat !important;
    overflow: hidden;
    /* pull the hero up the FULL nav height (132px) so its dark background reaches
       the very top — covers the ~20px sand strip that showed above it — while the
       floating white pill still overlays it. padding-top compensates so the hero
       content keeps its position. */
    margin-top: -132px !important;
    padding-top: 172px !important;
    /* sizing + framing per brief: ≥70vh tall, prominent rounded bottom edge that
       reveals the lighter section below */
    min-height: 70vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-bottom-left-radius: 48px !important;
    border-bottom-right-radius: 48px !important;
    /* establish the positioning context for the injected bg <video> + tint */
    position: relative !important;
}
/* Looping background <video> + tint overlay (injected by jp644-allinone.js).
   The section keeps its navy-gradient + poster image (above) as a fallback for
   when the video can't load; the video covers it, the navy-75% overlay sits on
   top of the video for text contrast, and the hero content rides above both.
   overflow:hidden + the 48px bottom radius (above) clip the video to the hero. */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section.orange .jp644-hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
body:is(.page-id-326092,.page-id-326404) section.hero-product-section.orange .jp644-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(11, 27, 69, 0.75) !important;  /* #0B1B45 @ 75% — matches the Figma tint */
    z-index: 1 !important;
    pointer-events: none !important;
}
body:is(.page-id-326092,.page-id-326404) section.hero-product-section.orange > .container {
    position: relative !important;
    z-index: 2 !important;
}
/* hide the "CONNECTED TO EVOLVE." eyebrow — not present in Figma 1184:12117 */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section [class*="__subtitle"],
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .decorated-container-heading__over-title {
    display: none !important;
}

/* ---- Nav: floating SOLID WHITE pill with dark typography (per brief — this
   reverts the earlier transparent-overlay treatment). The theme's default
   `.jtl-nav-pill` is already a white pill with dark links + blue CTA, so we keep
   it as-is and only (a) hide the breadcrumb strip (not in the Figma header) and
   (b) let the pill float over the dark hero via the hero's negative margin above.
   NOTE: the menu LABELS/ORDER (Lösungen, drop "Wissen", reorder) and the CTA
   text ("DEMO BUCHEN") are the GLOBAL site nav — one shared WP menu on every
   page — so they are NOT changed here. See PR notes / flag. */
body:is(.page-id-326092,.page-id-326404) .breadcrumb,
body:is(.page-id-326092,.page-id-326404) .swiper-wrapper.breadcrumb { display: none !important; }
/* hide the right-hand dashboard/photo column */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .hero-product-section__image { display: none !important; }
/* centre the content column full-width */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .hero-product-section__content {
    flex: 0 0 100% !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding-right: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* heading: white body, orange "One Platform." on its OWN line (block), so
   "Alles, was dein Business braucht." stacks cleanly below in white. */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section h1,
body:is(.page-id-326092,.page-id-326404) section.hero-product-section h1 * { color: #ffffff !important; }
body:is(.page-id-326092,.page-id-326404) section.hero-product-section h1 .font-weight-bold {
    color: #ff5a1f !important;
    display: block !important;
}
/* subtext white */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .hero-product-section__content--text,
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .hero-product-section__content p { color: #ffffff !important; }
/* CTAs centred; secondary "Alle Produkte entdecken" -> white outline on dark
   (primary "BERATUNG VEREINBAREN" keeps its orange wawi gradient) */
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .product-buttons-group,
body:is(.page-id-326092,.page-id-326404) section.hero-product-section .btn-wrapper { justify-content: center !important; }
body:is(.page-id-326092,.page-id-326404) section.hero-product-section a.product-button-group__button--with-icon:not(.has-wawi-gradient),
body:is(.page-id-326092,.page-id-326404) section.hero-product-section a.product-button-group__button--with-icon:not(.has-wawi-gradient) * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
}

/* ============================================================= *
 * 0b) VIDEO section "One minute. One story. One JTL" (Figma 1184:12151) —
 *     the live widget wraps a heading-left / video-right split in a white
 *     card. Figma shows a single centred navy video card on light-sand with a
 *     white organic wave shape behind it. So: drop the white wrapper, stack
 *     the content into a centred column (heading above, card below), centre +
 *     size the navy card, and lay the wave behind it. (Video already plays the
 *     requested clip — data-youtube-id=tkGhF60v5n4.)
 * ============================================================= */
/* white wrapper card -> transparent; add the organic wave as a backdrop.
   custom-clone.css pins this white via
   `section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card`
   (!important, 0,4,2), so this override mirrors that chain + the page-id class
   (0,5,2) to win the colour while keeping the wave as the only fill. */
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card {
    background-color: transparent !important;
    background-image: none !important;   /* card stays transparent; wave lives on the section */
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* White organic wave behind the video card (Figma 1184:12151). The wave is a
   section-level backdrop (white shape painted over the beige band), with the
   navy video card centred on top. preserveAspectRatio="none" on the SVG lets it
   stretch to the section box. Asset path is relative to this stylesheet, same as
   jp644-hero-bg.jpg. */
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card {
    background-image: url("jp644-video-hgform.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    position: relative !important;
}
/* stack the heading above the video, both centred */
body:is(.page-id-326092,.page-id-326404) .wawi-tutorial-section .container-card-wawi-tutorial .card-body {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
}
/* Remove the heading block (eyebrow + "One minute. One story. One JTL" + CTA)
   so only the centred navy video card + wave remain — strict match to Figma
   1184:12151, per the follow-up request. */
body:is(.page-id-326092,.page-id-326404) .wawi-tutorial-section .wawi-tutorial-section__content {
    display: none !important;
}
/* centre the eyebrow + heading + CTA within the content block */
body:is(.page-id-326092,.page-id-326404) .wawi-tutorial-section .wawi-tutorial-section__content .btn-wrapper,
body:is(.page-id-326092,.page-id-326404) .wawi-tutorial-section .wawi-tutorial-section__content .product-buttons-group {
    justify-content: center !important;
}
/* centre + size the navy video card (Figma 864-wide centred card) */
body:is(.page-id-326092,.page-id-326404) .wawi-tutorial-section .one-big-card__video-wrapper {
    width: 100% !important;
    max-width: 864px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
}
/* Task 2 (Figma 1184:12151): the live widget surrounds the 486px video card with
   ~456px of vertical slack — a 200px wrapper bottom-margin, 64px top/bottom on
   both the bootstrap .container and the (now transparent) card, plus a 120px
   section top-margin. Figma is a compact centred card, so collapse all four to a
   tight rhythm. */
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card {
    margin-top: 48px !important;
}
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card > .container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card .one-big-card__row.wawi-tutorial-section__wrapper {
    margin-bottom: 0 !important;
}
body:is(.page-id-326092,.page-id-326404) section.wawi-tutorial-section.one-big-card .container-card-wawi-tutorial.card {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================= *
 * 1) "Diese Vision funktioniert nur als One JTL" — 6-icon grid
 *    section.orange.black  (Figma 1184:12203). Dark navy box -> light.
 * ============================================================= */
/* dark navy rounded container -> open on the sand page background */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container,
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-wrapper {
    background: transparent !important;
    background-image: none !important;
}
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-square-overlay { display: none !important; }

/* heading block: eyebrow tech-blue, title + copy dark-blue (were orange/white) */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__title,
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__title * {
    color: #0b1b45 !important;
}
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__description {
    color: #0b1b45 !important;
}

/* Figma 1184:12203: WHITE section band, BEIGE (sand) cards. Inverted from the
   prior sand-band/white-card treatment per the JTL design review — the section
   now reads pure white with the 6 feature cards filled in the #eeeee7 sand brand
   token. Cards are flat (no shadow) to match the Figma render. */
body:is(.page-id-326092,.page-id-326404) section.orange.black { background: #ffffff !important; }
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big {
    background: #eeeee7 !important;
    border: 0 !important;
    border-radius: 24px !important;
    text-align: center !important;
    box-shadow: none !important;
}
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big * { text-align: center !important; }
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big h3 { color: #0b1b45 !important; }
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big p  { color: #0b1b45 !important; }
/* card icons: the FA glyph is coloured by an INLINE style (color:#FF9A26 orange),
   class is `fa-light fa-<name>` (no "icon" substring). !important on a class+id
   selector beats the inline declaration. svg fallback kept for any svg icons. */
/* Task 3 (Figma 1184:12210ff): the 6 cards use SOLID filled blue icons, sized
   large (~48px) and centred above the title. The live theme renders thin
   fa-light glyphs (weight 300) at 24px. Switch to the solid weight (900) so the
   glyph fills, enlarge, and centre it as a full-width block. */
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big [class*="fa-"] {
    color: #2722f8 !important;
    font-weight: 900 !important;   /* fa-light 300 -> fa-solid 900: filled variant */
    font-size: 48px !important;
    line-height: 1 !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big svg,
body:is(.page-id-326092,.page-id-326404) section.orange.black .card.border-big svg * { fill: #2722f8 !important; }

/* Text-Area 1184:12204 typography (Figma tokens):
   overline 18/24 + 0.9px tracking, H2 32/46 + 0.64px tracking, body 18/28. */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__over-title {
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 600 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}
/* the heading wrap is left-aligned + narrower (906px) than the card row in the
   live theme; force it full-width + centred so the Text-Area sits centred over
   the grid (Figma 1184:12204). */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
/* heading: 32/46 + 0.64px tracking; break after "nur" via a 480px width cap
   (measured: "…nur" 445px fits, "…nur als" 500px wraps -> "als One JTL" line 2) */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__title {
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    /* widened from 480px: the Kurdis display font (Task 2) is wider than the old
       Inter, so 480px wrapped to 3 lines. 680px restores the Figma 2-line break
       ("Diese Vision funktioniert nur" / "als One JTL"). */
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Task 2 (Figma 1184:12207): the heading must read as ONE uniform display line.
   The live theme renders it in Inter 400 with only "One JTL" bolded via <strong>.
   Match the page's other section headings (Der Markt / Was bleibt), which use the
   Kurdis Wide Bold display font at weight 700, and force the nested <strong> to
   the same family + weight so the whole string is cohesive. */
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__title,
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__title * {
    font-family: Kurdis, "Kurdis Wide", Inter, sans-serif !important;
    font-weight: 700 !important;
}
body:is(.page-id-326092,.page-id-326404) section.orange.black .decorated-container-heading__description {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    max-width: 790px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* orange CTA pill (Figma 1184:12253): solid orange, dark-blue text, rounded */
body:is(.page-id-326092,.page-id-326404) section.orange.black .product-buttons-group {
    display: flex !important;
    justify-content: center !important;
    padding-top: 32px !important;
}
/* Shared page primary-CTA token (.jp644-cta, Figma 1184:12253): orange fill,
   dark-blue text, pill. Applied to BOTH the icon-grid CTA (.jp644-icongrid-cta,
   from the DB shortcode) and the ecosystem CTA — they ride the global
   `.product-button-group__button--with-icon` design-system button, so the base
   `transition: all 100ms ease-in-out` + future button-system updates cascade.
   Hover mirrors the project's documented dark-section primary standard
   (custom-clone.css hero rule, line ~4257): `filter: brightness(.95)` — the
   base navy hover would blend into the navy ecosystem shell. */
body:is(.page-id-326092,.page-id-326404) #content a.jp644-icongrid-cta,
body:is(.page-id-326092,.page-id-326404) #content a.jp644-cta,
body:is(.page-id-326092,.page-id-326404) #content a.jp644-icongrid-cta *,
body:is(.page-id-326092,.page-id-326404) #content a.jp644-cta * {
    background: #fb581f !important;
    background-image: none !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    border-radius: 100px !important;
    border: 0 !important;
    box-shadow: none !important; /* kill the design-system 2px inset dark-blue ring (looked like a bold border) */
    text-transform: uppercase !important;
}
body:is(.page-id-326092,.page-id-326404) #content a.jp644-icongrid-cta,
body:is(.page-id-326092,.page-id-326404) #content a.jp644-cta {
    padding: 12px 24px !important;
}
body:is(.page-id-326092,.page-id-326404) #content a.jp644-icongrid-cta:hover,
body:is(.page-id-326092,.page-id-326404) #content a.jp644-cta:hover {
    filter: brightness(.95);
}

/* ============================================================= *
 * 2) Eyebrows across the page — `.decorated-container-heading__over-title`
 *    is painted with a gradient text-fill (renders orange/teal), so a plain
 *    `color` swap is invisible. Disable the gradient + set tech-blue fill.
 *    `#content` ID ancestor required to outrank the theme gradient rule.
 *    (Contact-box eyebrow is overridden to light-blue in section 5.)
 * ============================================================= */
#content body:is(.page-id-326092,.page-id-326404) section.orange .decorated-container-heading__over-title,
#content section.orange.black .decorated-container-heading__over-title,
body:is(.page-id-326092,.page-id-326404) .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;
}

/* ============================================================= *
 * 3) Intro heading "1 Person, 100 Mio € … Powered by JTL Agents"
 *    (Figma 1184:12129) — injected as a HeadlineStandard+TextStandard row by
 *    the Layer-B script with marker class `jp644-intro`. Centre it on sand.
 * ============================================================= */
/* Figma 1184:12129 tokens: light-sand section, both lines dark-blue #0b1b45,
   H2 32/46 + 0.64px tracking, sub 20/28, 864px centred column, 24px gap. */
body:is(.page-id-326092,.page-id-326404) .jp644-intro {
    text-align: center !important;
    padding-top: 80px !important;
}
body:is(.page-id-326092,.page-id-326404) .jp644-intro h2,
body:is(.page-id-326092,.page-id-326404) .jp644-intro h2 * {
    color: #0b1b45 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    font-weight: 700 !important;
}
body:is(.page-id-326092,.page-id-326404) .jp644-intro h2 {
    max-width: 864px !important;
    margin: 0 auto !important;
}
/* subtext is dark-blue too (was incorrectly tech-blue), Inter 20/28 */
body:is(.page-id-326092,.page-id-326404) .jp644-intro p {
    color: #0b1b45 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
    max-width: 864px !important;
    margin: 24px auto 0 !important;
}

/* ============================================================= *
 * 4) "Was bleibt. Was besser wird." — checklist + 4 stat cards
 *    (Figma 1184:12445). Checkmarks tech-blue; stat cards tech-blue fill,
 *    white numerals (injected with marker class `jp644-stats`).
 * ============================================================= */
body:is(.page-id-326092,.page-id-326404) section.product-support-section.product-management-section .list-icons .list-icon,
body:is(.page-id-326092,.page-id-326404) section.product-support-section.product-management-section ul.list-icons li [class*="icon"] {
    color: #2722f8 !important;
}
body:is(.page-id-326092,.page-id-326404) section.product-support-section.product-management-section ul.list-icons li svg,
body:is(.page-id-326092,.page-id-326404) section.product-support-section.product-management-section ul.list-icons li svg * { fill: #2722f8 !important; }
/* stat cards */
body:is(.page-id-326092,.page-id-326404) .jp644-stats .card,
body:is(.page-id-326092,.page-id-326404) .jp644-stats [class*="grid-css"] {
    background: #2722f8 !important;
    border-radius: 16px !important;
    border: 0 !important;
}
body:is(.page-id-326092,.page-id-326404) .jp644-stats .card *,
body:is(.page-id-326092,.page-id-326404) .jp644-stats [class*="grid-css"] * { color: #fff !important; }

/* ---- "Was bleibt" eyebrow + checklist icons (orange FA glyphs -> tech-blue) */
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section .product-management-section__subtitle {
    -webkit-text-fill-color: #2722f8 !important;
    color: #2722f8 !important;
}
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section ul li [class*="fa-"],
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section .list-icons [class*="fa-"] {
    color: #2722f8 !important;
}
/* Task 4 (Figma 1184:12445): the 5 "Was bleibt" rows ship mismatched FA glyphs
   (fa-rotate, fa-file-contract, fa-users, fa-database, …). Force every list glyph
   to the unified checkmark (fa-check, \f00c). The element keeps its own
   fa-regular class, so the "Font Awesome 6 Pro" family + 400 weight stay intact —
   only the codepoint is overridden, giving the thin blue check the Figma shows. */
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section ul li [class*="fa-"]::before,
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section .list-icons [class*="fa-"]::before {
    content: "\f00c" !important;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 400 !important;
}
/* ---- "Was bleibt" stat numbers stay as clean tech-blue numerals (Figma shows
   filled blue cards, but the keyfacts DOM splits numbers and labels into
   separate rows, so a card fill would break them apart — the plain tech-blue
   numbers already read as the stat block). Just ensure the numerals are blue
   and labels dark. */
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section .keyfacts-container .keyfacts-number,
body:is(.page-id-326092,.page-id-326404) section.product-management-section.product-support-section .keyfacts-container [class*="number"] {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
}

/* ============================================================= *
 * 3b) "Der Markt wartet nicht" text-media (Figma 1184:12157) — the 3 list
 *     icons (Druck von allen Seiten / KI verändert… / Kontext schlägt…) are
 *     orange FA glyphs; Figma shows them tech-blue. Scope via the content row.
 * ============================================================= */
body:is(.page-id-326092,.page-id-326404) .product-management-section__content [class*="fa-"] {
    color: #2722f8 !important;
}
/* callout box (the only .basic-br on the page) — Figma 1184:12174: light-blue.
   style.css pins it white via `#app .basic-br` (1,1,0, !important), so the
   `#content` ID ancestor is needed here to win (1,2,1). */
body:is(.page-id-326092,.page-id-326404) #content .basic-br {
    background: #89d2ff !important;
    border-radius: 24px !important;
}
/* image: the live "image" is a 2-photo slider; Figma 1184:12176 shows a single
   static hexagon ecosystem graphic. The slider column is the only .pl-lg-10, so
   show the supplied SVG as its background and hide the cycling photos. */
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper {
    background: url("jp644-der-markt-graphic.svg") center / contain no-repeat !important;
}
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper img,
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper picture { visibility: hidden !important; }
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper-pagination,
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper-button-next,
body:is(.page-id-326092,.page-id-326404) .col-lg-6.pl-lg-10 .swiper-button-prev { display: none !important; }

/* Task 1 (Figma 1184:12157): "Der Markt wartet nicht" sits on a WHITE band, not
   the page beige. The section is uniquely identified by its .pl-lg-10 diagram
   column (the only one on the page). White here joins the white ecosystem
   section below into one continuous block; the video wave above flows into it. */
body:is(.page-id-326092,.page-id-326404) #content section:has(.col-lg-6.pl-lg-10) {
    background: #ffffff !important;
}

/* ============================================================= *
 * 4b) Old "Von Shop bis Logistik" product-LIST widget (section#produkte).
 *     Superseded by the interactive ecosystem panel in section 6 (Figma
 *     1184:12405 replaces the list). Hidden so the module renders once.
 * ============================================================= */
body:is(.page-id-326092,.page-id-326404) section#produkte { display: none !important; }

/* ============================================================= *
 * 5) Kontakt-Box "Dein Business. Auf dem nächsten Level."
 *    (Figma 1184:12551) — dark-blue panel, light-blue eyebrow.
 * ============================================================= */
body:is(.page-id-326092,.page-id-326404) section.product-support-section:not(.product-management-section) .decorated-container-heading__over-title {
    -webkit-text-fill-color: #89d2ff !important;
    color: #89d2ff !important;
}

/* The Kontakt-Box (the one .basic-card-widget holding the HubSpot raw form)
   already renders as the Figma navy panel (#0b1b45, radius 46) with the
   light-blue "KONTAKT" eyebrow + the organic light-blue shape. These rules
   finish the Figma match: pure-white heading, hide the stray anchor glyph,
   and the light-blue form card + styled HubSpot fields/CTA.
   NOTE: the HubSpot form loads an external script that this offline clone
   blocks (rule 3), so the form is empty here; the `.hs-*` rules below are the
   styling it picks up once it renders on staging / production. */

/* heading → pure white (was the card's default light-sand) */
body:is(.page-id-326092,.page-id-326404) #content .basic-card-widget:has(.wpb_raw_html) .product-support-section__title,
body:is(.page-id-326092,.page-id-326404) #content .basic-card-widget:has(.wpb_raw_html) .product-support-section__title * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* hide the leftover headline anchor-link glyph (not in Figma) */
body:is(.page-id-326092,.page-id-326404) .basic-card-widget:has(.wpb_raw_html) .product-support-section__title a[href^="#"],
body:is(.page-id-326092,.page-id-326404) .basic-card-widget:has(.wpb_raw_html) .product-support-section__title [class*="anchor"],
body:is(.page-id-326092,.page-id-326404) .basic-card-widget:has(.wpb_raw_html) .product-support-section__title [class*="fa-link"],
body:is(.page-id-326092,.page-id-326404) .basic-card-widget:has(.wpb_raw_html) .product-support-section__title svg { display: none !important; }

/* form card: light-blue #89d2ff, radius 20 (Figma 1184:12561). Guarded with
   :has(form) so the empty clone keeps the organic shape instead of a blank box. */
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .wpb_raw_code:has(form),
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hbspt-form,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form-frame:has(form) {
    background: #89d2ff !important;
    border-radius: 20px !important;
    padding: 30px 24px 30px 30px !important;
}
/* labels dark-blue, required asterisk orange (Figma 1184:12566) */
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form label,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form .hs-field-desc { color: #0b1b45 !important; }
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form .hs-form-required,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form .hs-error-msg { color: #fb581f !important; }
/* inputs/selects/textarea: white, 1px light-blue border, radius 3 */
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form input.hs-input,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form select.hs-input,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form textarea.hs-input {
    background: #ffffff !important;
    border: 1px solid #89d2ff !important;
    border-radius: 3px !important;
    color: #0b1b45 !important;
}
/* SENDEN submit → orange pill, dark-blue uppercase (Figma 1184:12606) */
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form .hs-button,
body:is(.page-id-326092,.page-id-326404) .basic-card-widget .hs-form input[type="submit"] {
    background: #fb581f !important;
    color: #0b1b45 !important;
    border: 0 !important;
    border-radius: 100px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    letter-spacing: .32px !important;
    text-transform: uppercase !important;
}

/* ============================================================= *
 * 6) "Von Shop bis Logistik" ECOSYSTEM module (Figma 1184:12405 /
 *    page 1184:12115). Rendered as a single high-fidelity inline SVG
 *    (theme/jtl/overrides/jp644-ecosystem.svg), injected by
 *    jp644-allinone.js into the Layer-B marker `.jp644-allinone-graphic`
 *    and wrapped in a responsive container so it scales cleanly to mobile
 *    without clipping or distortion. (Replaces the earlier programmatic
 *    blob/column DOM widget — all that layout state is gone.)
 * ============================================================= */
/* Beige strip; outer padding removed (top + bottom) so the All-in-One
   "Von Shop bis Logistik" module sits flush, with no beige gap above or below. */
body:is(.page-id-326092,.page-id-326404) .jp644-allinone { background: #eeeee7 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
body:is(.page-id-326092,.page-id-326404) .jp644-allinone-graphic { display: block; width: 100%; max-width: 1312px; margin: 0 auto; aspect-ratio: auto !important; }

/* navy backdrop card so the SVG's light text + light hexagons read correctly */
body:is(.page-id-326092,.page-id-326404) .jp644-aio { background: #0b1b45; border-radius: 48px; padding: 24px 32px 40px; color: #fff; box-sizing: border-box; }

/* ---- section header (restored): overline + heading + lead ---- */
body:is(.page-id-326092,.page-id-326404) .jp644-aio__head { max-width: 790px; margin: 0 auto 8px; text-align: center; }
body:is(.page-id-326092,.page-id-326404) .jp644-aio__overline { color: #89d2ff; font-size: 18px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; margin: 0 0 8px; }
body:is(.page-id-326092,.page-id-326404) #content .jp644-aio__title,
body:is(.page-id-326092,.page-id-326404) #app .jp644-aio__title { color: #fff !important; font-size: 32px !important; line-height: 40px !important; letter-spacing: 0.64px; margin: 0 0 16px !important; }
body:is(.page-id-326092,.page-id-326404) .jp644-aio__lead { color: #fff; font-size: 18px; line-height: 28px; margin: 0; opacity: .9; }

/* responsive wrapper for the inline SVG
   (w-full h-auto max-w-[1440px] mx-auto flex justify-center items-center
   overflow-hidden px-4) */
body:is(.page-id-326092,.page-id-326404) .jp644-eco-wrap {
    width: 100%; height: auto; max-width: 1440px; margin: 0 auto;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden; padding: 0 16px; box-sizing: border-box;
}
body:is(.page-id-326092,.page-id-326404) .jp644-eco-wrap svg,
body:is(.page-id-326092,.page-id-326404) .jp644-eco-wrap img {
    width: 100%; height: auto; max-width: 1326px; display: block;
}

/* ---- CTA (kept; the SVG carries no CTA). Visual token + global DS button
   live in section 1 (.jp644-cta); this is layout only. ---- */
body:is(.page-id-326092,.page-id-326404) .jp644-aio__cta-wrap { display: flex; justify-content: center; margin-top: 40px; }

@media (max-width: 900px) {
    body:is(.page-id-326092,.page-id-326404) .jp644-aio { padding: 24px 16px 28px; border-radius: 32px; }
    body:is(.page-id-326092,.page-id-326404) .jp644-eco-wrap { padding: 0 8px; }
}

/* ============================================================================
 * SECTION 7 — "Was bleibt. Was besser wird." keyfacts (Figma 1184:12445)
 * ----------------------------------------------------------------------------
 * Live renders the 4 facts as bare numbers on sand. Figma puts them in four
 * EQUAL solid tech-blue (#2722f8) rounded cards laid out as a clean 2x2 grid
 * with white Kurdis numbers + white labels. Page-scoped so other pages that
 * reuse .keyfacts-new__wrapper / .keyfacts-container are untouched (rule 13).
 * ============================================================================ */

/* NOTE on specificity: custom-clone.css:4444-4498 flattens EVERY
 * `body:not(.home) section.product-management-section` keyfacts grid into a
 * transparent 4-col row (numbers only) at specificity (0,4,2) !important. To
 * restyle ONLY this page's "Was bleibt" instance back into Figma's tech-blue
 * 2x2 cards, each rule below carries the theme MAIN-wrapper `#content` ID
 * ancestor (an ID outranks any number of classes) — the same deterministic
 * win used by the section-6 title. This page has exactly ONE
 * `.keyfacts-new__wrapper` (the "Was bleibt" section); "Der Markt wartet nicht"
 * has none, so nothing else on the page is touched. */

/* 2x2 grid — override the site-wide repeat(4) flat row */
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper.grid,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    max-width: 640px;
    margin: 0 0 0 auto;
    align-items: stretch;
}
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper > .grid-item,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper > .grid-item {
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 !important;
}

/* solid tech-blue card (the site-wide rule flattens these to transparent) */
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container {
    background: #2722f8 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    min-height: 190px;
    padding: 24px 28px !important;
    gap: 8px;
    color: #fff !important;
}

/* number — white, 56/42, +1.68px tracking (Figma 1184:12476) */
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > *,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > * {
    color: #fff !important;
    font-size: 56px !important;
    line-height: 42px !important;
    letter-spacing: 1.68px !important;
    margin-bottom: 0 !important;
}

/* label — white 20/28 (Figma 1184:12477) */
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description,
body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description > *,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description,
body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description > * {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin-top: 4px;
}

@media (max-width: 900px) {
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container { min-height: 150px; padding: 20px !important; }
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > *,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > * { font-size: 44px !important; line-height: 38px !important; }
}
@media (max-width: 520px) {
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper.grid,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper.grid { gap: 8px !important; }
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container { min-height: 128px; padding: 16px 12px !important; }
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > *,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__title > * { font-size: 34px !important; line-height: 32px !important; letter-spacing: .8px !important; }
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description,
    body:is(.page-id-326092,.page-id-326404) #content .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description > *,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description,
    body:is(.page-id-326092,.page-id-326404) #app .keyfacts-new__wrapper .keyfacts-container .keyfacts-new__description > * { font-size: 14px !important; line-height: 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════ *
 * Floating white CAPSULE navigation over the dark hero
 * Scoped to the One JTL pages (326092 = /de/one-jtl, 326404 = /en/one-jtl).
 * (The earlier hero background-video treatment was removed per request — the
 * hero reverts to its JP-644 dark navy bg image + white copy, above.)
 * The header is already a white pill (.jtl-nav-pill, Figma Nav-new3); here it
 * becomes a full-radius capsule with a soft float shadow over the dark hero.
 * ═══════════════════════════════════════════════════════════════════════ */
body:is(.page-id-326092,.page-id-326404) .jtl-nav-pill {
    border-radius: 9999px;
    border-color: #ffffff;
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.18);
}

/* ── Contact left panel: "Or call us directly / Oder rufe uns direkt an" ──
 * Phone line appended by scripts/db/one-jtl-contact-fixes.php. The Kontakt
 * panel is dark, so the line is light; the number is the emphasised element. */
body:is(.page-id-326092,.page-id-326404) .jp644-contact-phone {
    display: block;
    margin-top: 28px;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.2px;
}
body:is(.page-id-326092,.page-id-326404) .jp644-contact-phone strong {
    display: inline-block;
    margin-top: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}