/*
 * JP-1388 — /de/smart-commerce/ ("E-Commerce Software, die Handel versteht.")
 *
 * Page-local skin for the new landing page. Every rule is scoped to a
 * page-specific `sc-*` class emitted by this page's widgets, so nothing here can
 * reach another page or a language twin (the hooks are English/neutral tokens,
 * present only on this DE page).
 *
 * Sections marked TEMPORARY approximate a design module that has no dedicated
 * widget yet (stat counters, the dark ecosystem tile grid, the AI-Agent-Juno
 * diagram, the numbered steps). They reuse an existing widget re-skinned here;
 * a pixel-perfect build is follow-up work.
 */

/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
  --sc-navy: #0b1b45;
  --sc-navy-2: #16264f;
  --sc-blue: #2722f8;
  --sc-lightblue: #7db9ff;
  --sc-orange: #fb581f;
  --sc-sand: #eeeee7;
}

/* ── 1. HERO — the widget's full-bleed-dark variant is the single owner of the
 *       dark band, backdrop video, text colours and layout (config: layout=
 *       full-bleed-dark). The page skin adds only the poster still, painted on the
 *       backdrop layer: it shows behind the video before it mounts, and on mobile
 *       / reduced-motion, where the widget hides the moving backdrop so the band
 *       is never bare navy. ─────────────────────────────────────────────────── */
.sc-hero .jtl-hero-product-header__backdrop {
  background-image: url("assets/jp1388-hero-poster.webp");
  background-size: cover;
  background-position: center;
}
/* Accent word in the hero H1 ("mitwächst.") — light-blue while the rest of the
 * headline stays white. The widget paints the whole H1 #fff !important, so the
 * accent span needs its own colour (it targets the span, not the h1). */
#content .sc-hero .jtl-text--h1 .jtl-text__heading .sc-hero-hl {
  color: #89d2ff !important;
}
/* Hero band height = the design's 885px (the widget default is 900px). The
 * compound class (both live on the section) out-ranks the widget's own rule. */
.sc-hero.jtl-hero-product-header--full-bleed-dark .jtl-hero-product-header__inner {
  min-height: 885px;
}
/* The hero pulls itself up under the site chrome (widget margin-top). Drop the
 * theme wrapper's top AND bottom padding so the navy band meets the Connect
 * banner with no light gap above it and no empty band below the 885px hero.
 * Keyed via the hero's own class so only this page's hero container is affected.
 * (The container top padding otherwise offsets the hero down by a header-height-
 * dependent amount, which is why the gap showed on some widths and not others.) */
.container:has(> .row > .col > .sc-hero) {
  padding-top: 0;
  padding-bottom: 0;
}
/* With the padding gone the hero reaches the very top and sits behind the
 * Connect banner. Lift the banner above the hero so it stays visible instead of
 * being painted over. Scoped to this page through the hero hook. */
body:has(.sc-hero) .connect-banner {
  position: relative;
  z-index: 20;
}

/* ── 2b. HERO ACCENT ROTATOR ───────────────────────────────────────────────
 *
 * The light-blue word at the end of the headline scrolls upward through the
 * five phrases in a loop, so the line reads "E-Commerce Software, die …
 * mitwächst. / Handel versteht. / mitdenkt. / mehr ist als ein ERP. / jede
 * Challenge löst." The phrases are page copy and live in the headline (the DB
 * script); this is only the motion.
 *
 * CSS rather than a script on purpose: `overrides/*.css` is glob-loaded on every
 * environment, while an `overrides/*.js` has to be named in the mu-plugin's
 * enqueue list and is silently dead on staging and prod until it is.
 * ─────────────────────────────────────────────────────────────────────────── */
.sc-hero-hl {
  display: inline-block;
  overflow: hidden;
  /* Exactly one line of the headline, so only the current phrase is visible.
   * `1lh` tracks whatever line-height the breakpoint sets; the em value is the
   * desktop ratio (93/65) kept as a fallback for engines without the unit. */
  height: 1.43em;
  height: 1lh;
  /* `top`, not the default `baseline`: an inline-block whose overflow is not
   * visible takes its BOTTOM MARGIN EDGE as its baseline, which would drop the
   * phrase a descender below the rest of the line. Aligning the tops instead
   * puts the two line boxes — both one headline line tall — back in register. */
  vertical-align: top;
}
/* `nowrap` is load-bearing, not cosmetic. The window shows one line and the reel
 * steps by exactly 1/6 of its own height, so both only hold while every item is
 * exactly one line tall. Let a phrase wrap and the reel becomes seven lines,
 * every step lands 1/6 of a line out, and the wrapped phrase is half-clipped. */
.sc-hero-hl__item { display: block; white-space: nowrap; }
.sc-hero-hl__reel {
  display: block;
  animation: sc-hero-hl-cycle 15s cubic-bezier(.66, 0, .34, 1) infinite;
}
/* Six items carry five phrases: the sixth repeats the first, so the jump from
 * the end of the reel back to its start lands on identical text and the loop has
 * no visible seam. Each step is therefore 1/6 of the reel's height, and each
 * phrase holds for 2.4s of its 3s slot and travels for the remaining 0.6s. */
@keyframes sc-hero-hl-cycle {
  0%,   16% { transform: translateY(0); }
  20%,  36% { transform: translateY(-16.6667%); }
  40%,  56% { transform: translateY(-33.3333%); }
  60%,  76% { transform: translateY(-50%); }
  80%,  96% { transform: translateY(-66.6667%); }
  100%      { transform: translateY(-83.3333%); }
}
/* Below the desktop step the phrases no longer fit on one line at all. Measured
 * at 375, where the headline column is 327px wide: "Handel versteht." needs 336,
 * "jede Challenge löst." 381 and "mehr ist als ein ERP." 398 — so the accent gets
 * its own line AND a two-line window, and each item is exactly two lines tall.
 *
 * Two lines rather than one, because the reel steps by 1/6 of its own height:
 * six items of two lines is a twelve-line reel whose sixth is exactly the
 * two-line window, so the arithmetic is unchanged. A one-line window here would
 * have to clip words instead, which loses copy, and sizing each item to its own
 * height would make every step a different distance. The trade is a blank second
 * line under the short phrases — reserved space the rotator needs, and it keeps
 * the headline's height constant instead of jumping as the phrases change. */
@media (max-width: 991px) {
  .sc-hero-hl {
    display: block;
    width: 100%;
    height: 2.625em;
    height: calc(2 * 1lh);
  }
  .sc-hero-hl__item {
    white-space: normal;
    height: 2.625em;
    height: calc(2 * 1lh);
  }
  /* The headline is a flex item whose `min-width: auto` lets it grow to the
   * widest UNBREAKABLE run, so while the reel was nowrap the h1 measured 398px
   * inside a 327px column and the hero's `overflow: hidden` cut the phrase off
   * at the band edge. The cap holds whatever the reel's content does. */
  #content .sc-hero .jtl-text--h1 .jtl-text__heading { min-width: 0; max-width: 100%; }
}

/* Reduced motion rests on the first phrase rather than cycling. */
@media (prefers-reduced-motion: reduce) {
  .sc-hero-hl__reel { animation: none; }
}

/* ── 3. STAT COUNTERS — the JTL Facts Band widget. Nothing to skin: the widget
 *       owns the white band, the header, the figure row and the type, and it is
 *       the same instance /de/ki/juno and the home page render. The `sc-stats`
 *       class survives only as this page's hook for the section background
 *       below; do NOT re-add figure/label type rules here — a value copied out
 *       of the widget is exactly what drifted last time. ──────────────────── */

/* ── 5. ECOSYSTEM / PRODUCT MATRIX — the same module the home page renders as
 *       its solution grid. The home page is an Elementor document, so its
 *       component (`.jtl-ew-solution-grid` / `.jtl-ew-solution-tile`) cannot be
 *       mounted on this WPBakery page; every value below is instead MEASURED off
 *       that component at 1440 so the two read as one module:
 *
 *         panel   46px radius, 46px/64px padding
 *         grid    4 tracks, 32px gap
 *         tile    180px min-height, 24px radius, 24px 24px 18px padding,
 *                 rgba(255,255,255,.1) fill, grid areas title/icon · poweredby ·
 *                 logo/arrow, 16px column gap
 *         title   18/24 semibold white       icon   28x28, top right
 *         labels  14/14 white                logo   <=120x24, white
 *         arrow   46x28 box, 16x13 orange glyph, bottom right
 *         CTA     orange, centred, 16/24 semibold uppercase navy + 16x13 arrow
 * ─────────────────────────────────────────────────────────────────────────── */
.jtl-card-grid.sc-ecosystem {
  background: var(--sc-navy);
  border-radius: 46px;
  color: #fff;
  padding: 46px 64px;
}
/* The panel sits on the page container, flush with the bands above and below it
 * (the steps row and the contact hero both measure 1320 wide here). The base
 * widget makes .jtl-card-grid full-bleed (margin:calc(50%-50vw); max-width:100vw),
 * which pushed this panel 36px wider than its neighbours on each side and read as
 * the matrix being out of alignment with the rest of the page. Compound class
 * out-ranks the base rule. */
.jtl-card-grid.sc-ecosystem.jtl-card-grid--services {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.sc-ecosystem .jtl-card-grid__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  /* The card-grid widget's inner carries its own 64px side padding. Inside a
   * panel that already pads 64px it inset the tracks a second time, so the tiles
   * came out 242px against the reference module's 267px. The panel owns the
   * gutter here; the track width then follows from it, and the reference
   * module's own 10px track inset is kept so the tiles measure the same. */
  padding-left: 10px;
  padding-right: 10px;
}
/* The header jtl_text sit inside __inner alongside the cards — make each span the
 * full row (above the tiles) and centre it. The widget paints jtl-text navy with
 * !important, so the light header overrides need !important too. */
.sc-ecosystem .jtl-card-grid__inner > .jtl-text { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; max-width: 792px; margin: 0; }
/* The header atoms carry jtl-text--center (align set on the inner element), so
 * left-align the inner nodes directly to beat it. */
.sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__eyebrow,
.sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__heading,
.sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__body { text-align: left; }
/* The header atoms stack with no gap between them in the reference (eyebrow ends
 * where the heading starts, heading where the body starts), and the widget's own
 * 32px margin-top on each jtl-text child is what opened one here. 64px below the
 * block to the first tile row, measured off the reference. */
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text { margin-top: 0; }
/* The header atoms are grid items, so the grid's own 32px row-gap opens between
 * them — and a gap cannot be set per row. Cancelling it on the second and third
 * atom is what closes the block back up; the tile rows keep the 32px they need.
 * The last atom then adds the other half of the 64px the reference measures
 * between its intro paragraph and the first tile row — the grid's 32px row-gap
 * supplies the first half, and a gap cannot be set per row. */
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text + .jtl-text { margin-top: -32px; }
.sc-ecosystem .jtl-card-grid__inner > .jtl-text:last-of-type { margin-bottom: 32px; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__eyebrow { color: #89d2ff !important; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__heading,
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__body { color: #fff !important; }
/* module header type scale, measured off the reference: eyebrow 18/24 uppercase
 * ls 0.9, heading 32/46 ls 0.64, body 16/24. */
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__eyebrow { font-size: 18px; line-height: 24px; }
/* `!important` because the product-landing template pins every h2 on the page to
 * `line-height: 40px !important` in the shared sheet, which no amount of
 * specificity beats. That blanket rule excludes `.elementor *`, which is why the
 * reference module — an Elementor document — renders the module's own 46px and
 * this one did not. Scoped to this band, so nothing else on the page moves. */
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__heading { font-size: 32px; line-height: 46px !important; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__body { font-size: 16px; line-height: 24px; }
/* Tile layout mirrors the home page's solution tile, area for area: title and
 * icon share the first row, "powered by" and the partner logo (or the lone
 * "mehr erfahren") sit on the last two, and the arrow occupies its own 46px
 * column so it lines up under the icon without being positioned. The middle
 * 1fr row is what pins the bottom rows to the foot of a tile taller than its
 * content — the same job the old `margin-top: auto` did, minus the absolute
 * positioning the icon and arrow needed. */
.sc-ecosystem .jtl-card-grid__card {
  position: relative;
  /* The base widget lays its cards out with `row-gap: 0` on the grid and a
   * 32.71px margin-top on each card, so the card carries the vertical rhythm.
   * This band sets a real 32px row-gap instead (the reference module's value),
   * which made the two stack: 64.71px between tile rows against the reference's
   * measured 32px. The gap owns the rhythm here, so the margin goes. */
  margin-top: 0;
  background: rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: 24px 24px 18px;
  text-align: left;
  min-height: 180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "title     icon"
    ".         ."
    "poweredby ."
    "logo      arrow";
  column-gap: 16px;
}
/* tile parts — the widget's navy !important must be overridden per part */
#content .sc-ecosystem .jtl-card-grid__card .jtl-text__eyebrow { color: #fff !important; }
#content .sc-ecosystem .jtl-card-grid__card .jtl-text__body { color: rgba(255,255,255,.72) !important; }
.sc-ecosystem .jtl-card-grid__card .jtl-text { text-align: left; }
/* icon top-right — the exact JTL icon SVG masked white over the element.
 * The card widget's own stylesheet sizes .jtl-card__icon at 65px/52px via
 * `.jtl-card-grid__card > .jtl-card__icon` (equal specificity, loaded later), so
 * the width/height/font-size here must out-rank it — hence the #content id +
 * matching child combinator. The module icon is 28×28. */
.sc-ecosystem .jtl-card__icon {
  grid-area: icon; justify-self: end; margin: 0;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  color: transparent !important;
}
#content .sc-ecosystem .jtl-card-grid__card > .jtl-card__icon {
  width: 28px; height: 28px; font-size: 0;
}
.sc-ecosystem .jtl-card__icon::before { content: "" !important; }
.sc-tile--erp .jtl-card__icon          { -webkit-mask-image: url(assets/jp1388-icon-erp.svg);          mask-image: url(assets/jp1388-icon-erp.svg); }
.sc-tile--wms .jtl-card__icon          { -webkit-mask-image: url(assets/jp1388-icon-wms.svg);          mask-image: url(assets/jp1388-icon-wms.svg); }
.sc-tile--marketplaces .jtl-card__icon { -webkit-mask-image: url(assets/jp1388-icon-marketplaces.svg); mask-image: url(assets/jp1388-icon-marketplaces.svg); }
.sc-tile--ai .jtl-card__icon           { -webkit-mask-image: url(assets/jp1388-icon-ai.svg);           mask-image: url(assets/jp1388-icon-ai.svg); }
.sc-tile--shop .jtl-card__icon         { -webkit-mask-image: url(assets/jp1388-icon-shop.svg);         mask-image: url(assets/jp1388-icon-shop.svg); }
.sc-tile--pos .jtl-card__icon          { -webkit-mask-image: url(assets/jp1388-icon-pos.svg);          mask-image: url(assets/jp1388-icon-pos.svg); }
.sc-tile--pay .jtl-card__icon          { -webkit-mask-image: url(assets/jp1388-icon-pay.svg);          mask-image: url(assets/jp1388-icon-pay.svg); }
.sc-tile--production .jtl-card__icon   { -webkit-mask-image: url(assets/jp1388-icon-production.svg);   mask-image: url(assets/jp1388-icon-production.svg); }
.sc-tile--cs .jtl-card__icon           { -webkit-mask-image: url(assets/jp1388-icon-cs.svg);           mask-image: url(assets/jp1388-icon-cs.svg); }
.sc-tile--finance .jtl-card__icon      { -webkit-mask-image: url(assets/jp1388-icon-finance.svg);      mask-image: url(assets/jp1388-icon-finance.svg); }
.sc-tile--tax .jtl-card__icon          { -webkit-mask-image: url(assets/jp1388-icon-tax.svg);          mask-image: url(assets/jp1388-icon-tax.svg); }
.sc-tile--returns .jtl-card__icon      { -webkit-mask-image: url(assets/jp1388-icon-returns.svg);      mask-image: url(assets/jp1388-icon-returns.svg); }
.sc-tile--pricing .jtl-card__icon      { -webkit-mask-image: url(assets/jp1388-icon-pricing.svg);      mask-image: url(assets/jp1388-icon-pricing.svg); }
.sc-tile--shipping .jtl-card__icon     { -webkit-mask-image: url(assets/jp1388-icon-shipping.svg);     mask-image: url(assets/jp1388-icon-shipping.svg); }
.sc-tile--trade .jtl-card__icon        { -webkit-mask-image: url(assets/jp1388-icon-trade.svg);        mask-image: url(assets/jp1388-icon-trade.svg); }
/* The title is centred against the icon rather than pinned to the top of the
 * row: the 28px icon sets that row's height, so a one-line 24px title sitting at
 * the top reads 2px high next to it. When the title wraps, the row grows to the
 * title and centring is identical to top-aligning it. */
.sc-ecosystem .sc-tile__title { grid-area: title; align-self: center; }
/* The #content id is what beats the card-grid widget's own
 * `.jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow` (equal class
 * specificity, loaded later), which sizes the subline 20.44/28.62. */
#content .sc-ecosystem .sc-tile__title .jtl-text__eyebrow {
  font-size: 18px; font-weight: 600; line-height: 24px;
  text-transform: none; letter-spacing: 0;
  /* German compounds ("Retourenmanagement") are longer than the title column, so
   * hyphenate rather than let one word run under the icon. */
  hyphens: auto; overflow-wrap: break-word;
}
/* The card grid widget puts a margin-top on both jtl-text children (32.71px on
 * the subline title, 16.355px on the paragraph) via `.jtl-card-grid__card >
 * .jtl-text--*` (0,2,0); the grid places them, so the margins only skew rows —
 * the #content id lets these out-rank it without !important. */
#content .sc-ecosystem .jtl-card-grid__card > .sc-tile__title,
#content .sc-ecosystem .jtl-card-grid__card > .sc-tile__more,
#content .sc-ecosystem .jtl-card-grid__card > .sc-tile__powered,
#content .sc-ecosystem .jtl-card-grid__card > .sc-tile__powered-text { margin-top: 0; }
/* "mehr erfahren" shares the arrow's row; the arrow's 28px box is taller than
 * the 14px label, so centre the label against it. */
.sc-ecosystem .sc-tile__more { grid-area: logo; align-self: center; }
/* "mehr erfahren" — module: 14px / 400, white, no underline */
#content .sc-ecosystem .sc-tile__more .jtl-text__body {
  font-size: 14px; font-weight: 400; line-height: 14px;
  color: #fff !important; text-decoration: none; margin: 0;
}
/* orange arrow bottom-right on every tile except the CTA tile — the exact Figma
 * arrow (node 1133-8923) masked so it can be tinted orange. The pseudo-element
 * is a grid item, so it lands in the arrow area on its own; the box is the
 * module's 46×28 and the glyph inside it the module's 16×13, right-aligned. */
.sc-ecosystem .jtl-card-grid__card:not(:last-child)::after {
  content: ""; grid-area: arrow; align-self: end;
  width: 46px; height: 28px; background-color: var(--sc-orange);
  -webkit-mask-image: url(assets/jp1388-arrow.svg); mask-image: url(assets/jp1388-arrow.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: right center; mask-position: right center;
  -webkit-mask-size: 16px 13px; mask-size: 16px 13px;
}
/* last tile = the orange "Discover the JTL Ecosystem" CTA. It is a flex column,
 * not the tile grid — one centred label over one centred arrow, 10px apart. */
.sc-ecosystem .jtl-card-grid__card:last-child {
  background: var(--sc-orange);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
}
.sc-ecosystem .jtl-card-grid__card:last-child .jtl-card__icon { display: none; }
/* The CTA label is the module's button-style caption, not a tile title: 16/24
 * semibold uppercase. It has to out-rank the tile-title rule above. */
#content .sc-ecosystem .jtl-card-grid__card:last-child .sc-tile__title .jtl-text__eyebrow {
  font-size: 16px; line-height: 24px; font-weight: 600; text-transform: uppercase;
}
/* CTA tile keeps a right-arrow, navy like its label (the exact Figma arrow). */
.sc-ecosystem .jtl-card-grid__card:last-child::after {
  content: ""; display: block; margin: 0;
  width: 16px; height: 13px; background-color: var(--sc-navy);
  -webkit-mask-image: url(assets/jp1388-arrow.svg); mask-image: url(assets/jp1388-arrow.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.sc-ecosystem .jtl-card-grid__card:last-child .jtl-text { text-align: center; font-weight: 700; }
#content .sc-ecosystem .jtl-card-grid__card:last-child .jtl-text__eyebrow,
#content .sc-ecosystem .jtl-card-grid__card:last-child .jtl-text__body,
#content .sc-ecosystem .jtl-card-grid__card:last-child .jtl-text__heading { color: var(--sc-navy) !important; }
/* Panel padding + column count step at the SAME widths as the reference module
 * (its `lg` 992 and `md` 768), so the two matrices reflow together. 64px of side
 * padding on a 343px phone panel left the tracks narrower than a tile's own
 * minimum, which pushed the tiles off the panel's centre line. */
@media (max-width: 991px) {
  .jtl-card-grid.sc-ecosystem { padding: 40px 32px; }
  .sc-ecosystem .jtl-card-grid__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .jtl-card-grid.sc-ecosystem { padding: 32px 20px; }
  .sc-ecosystem .jtl-card-grid__inner { grid-template-columns: 1fr; }
}

/* ── 8. AI-AGENT-JUNO DIAGRAM — TEMPORARY (static image of the Figma module) ─ */
.jtl-text.sc-juno-diagram {
  display: block;
  width: 100%;
  max-width: 1304px;
  margin: 0 auto;
  aspect-ratio: 1304 / 531;
  /* The same crisp, rounded ecosystem-diagram SVG the /de/ki/juno page uses. */
  background: url(assets/jp1388-juno-diagram.svg) center/contain no-repeat;
  font-size: 0;              /* hide the spacer character */
}
/* Drop the theme wrapper's top padding above the diagram so it sits flush under
 * the heading. Keyed to the diagram's own class, so only this container. */
.container:has(.sc-juno-diagram) {
  padding-top: 0;
}
.sc-juno-cta { display: flex; justify-content: center; margin-top: 32px; }
/* Gap between the 3 step cards and the "Jetzt wechseln" button — module = 88px. */
.sc-steps-cta { display: flex; justify-content: center; margin-top: 88px; }

/* Both post-sliders get their overline+heading+paragraph from a jtl_text intro
 * placed above them, so suppress the slider's own (default) header to avoid a
 * duplicate "Success Stories" heading. */
.sc-juno-cards .jtl-post-slider__head,
.sc-loop-cards .jtl-post-slider__head { display: none; }
/* Loop slider: no footer at all (no "Alle Beiträge", no nav arrows). */
.sc-loop-cards .jtl-post-slider__foot { display: none; }
/* Juno slider: keep the "Smart Commerce entdecken" CTA (centred), drop only the
 * prev/next nav-arrow group. */
.sc-juno-cards .jtl-post-slider__nav { display: none; }
.sc-juno-cards .jtl-post-slider__foot { justify-content: center; }
/* Tighten the (large) gap between the "Bleib im Loop" intro and its cards. */
.sc-loop-cards { margin-top: -80px; }

/* ── 11. NUMBERED STEPS — TEMPORARY (numbered_list re-skinned as 3 navy cards) ─ */
/* items live in an inner .list-widget__wrapper (flex column by default) — lay it
 * out as the 3-across card row. */
.sc-steps .list-widget__wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.sc-steps .numbered-list-widget__item.sc-step {
  background: var(--sc-navy);
  border-radius: 16px;
  padding: 28px;
  color: #fff;
  display: block;
}
.sc-steps .numbered-list-widget__item--number,
.sc-steps .numbered-list-widget__item--number span { color: var(--sc-orange) !important; font-weight: 700; font-size: 32px; }
/* card title = a nested subline (renders as .jtl-text__eyebrow); copy = paragraph */
#content .sc-steps .numbered-list-widget__item--content .jtl-text__eyebrow {
  color: #fff !important; font-size: 18px; font-weight: 700;
  text-transform: none; letter-spacing: 0; margin: 8px 0 16px;
}
#content .sc-steps .numbered-list-widget__item--content .jtl-text__body { color: rgba(255,255,255,.82) !important; }
@media (max-width: 900px) { .sc-steps .list-widget__wrapper { grid-template-columns: 1fr; } }
/* Steps-section intro paragraph ("…modular aufgebaut…") — more breathing room
 * above (from the heading) and below (to the step cards). Hook via the column
 * that holds the numbered-list widget (the sc_row el_class is stripped by the
 * theme, so target the paragraph that's a sibling of .sc-steps). */
#content .col:has(> .sc-steps) > .jtl-text--paragraph { margin-top: 32px; margin-bottom: 56px; }

/* ── 10. SUCCESS STORY — exact composite image (photo + SportFits blob + quote
 *       blob) from the Figma module on the left; editable text on the right. */
.sc-testi-img {
  width: 100%; max-width: 600px; aspect-ratio: 1280 / 960;
  background: url(assets/jp1388-testimonial-left.png) left center/contain no-repeat;
}
.sc-testi-text { display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 560px; }
#content .sc-testi-text .jtl-text--subline .jtl-text__eyebrow { color: var(--sc-blue) !important; }
#content .sc-testi-text .jtl-text--quote,
#content .sc-testi-text .jtl-text--quote * { color: var(--sc-navy) !important; }
#content .sc-testi-text .jtl-text--quote { margin-top: 24px; }
.sc-testi-name .jtl-text__body { font-weight: 700; font-size: 16px; color: var(--sc-navy) !important; margin: 24px 0 2px; }
.sc-testi-role .jtl-text__body { color: var(--sc-navy) !important; text-decoration: underline; text-decoration-color: var(--sc-orange); text-underline-offset: 2px; margin: 0; }

/* ── 14. CONTACT — flip to navy-left / light-blue-right to match the homepage
 *       (the widget default is sand-left / navy-right). Scoped to sc-contact-hero. */
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__inner { border-radius: 46px; overflow: hidden; align-items: stretch; gap: 0; padding: 0; }
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro { background: var(--sc-navy); padding: 56px 48px; }
#content .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro .jtl-text__eyebrow { color: var(--sc-lightblue) !important; }
#content .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro .jtl-text__heading,
#content .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro .jtl-text__body { color: #fff !important; }
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__form { background: #8fd0ff; padding: 56px 48px; color: var(--sc-navy); }
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__form-title,
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__form label { color: var(--sc-navy); }
/* Design uses rectangular fields with a small radius, not the widget's default
 * pills (24px). Adding .sc-contact-hero out-ranks the widget rule (no !important). */
.sc-contact-hero .jtl-contact-hero__field input[type="text"],
.sc-contact-hero .jtl-contact-hero__field input[type="email"],
.sc-contact-hero .jtl-contact-hero__field input[type="tel"],
.sc-contact-hero .jtl-contact-hero__control--select select { border-radius: 0; }
.sc-contact-hero .jtl-contact-hero__field textarea { border-radius: 0; }
/* Required fields carry a red asterisk in the design (Vorname/Nachname/E-Mail/
 * Unternehmensname/Telefon — not the message or source). The widget labels have
 * no required flag, so target them by their `for` suffix. */
.sc-contact-hero label[for$="-first"]::after,
.sc-contact-hero label[for$="-last"]::after,
.sc-contact-hero label[for$="-email"]::after,
.sc-contact-hero label[for$="-company"]::after,
.sc-contact-hero label[for$="-phone"]::after {
  content: " *"; color: #fb581f; font-weight: 700;
}
/* Phone: label and number on their own lines, number normal (400) weight. */
#content .sc-contact-hero .sc-phone-label .jtl-text__body { margin-bottom: 0; }
#content .sc-contact-hero .sc-phone .jtl-text__body { margin-top: 0; font-weight: 400; }
/* Consent copy colour (the link keeps the JTL blue below). The consent is a
 * <label>, so it needs to out-rank the generic form-label colour rule. */
#content .sc-contact-hero .jtl-contact-hero__consent,
#content .sc-contact-hero .jtl-contact-hero__consent-text { color: #0b1b45; }
/* Privacy link in the JTL blue. */
.sc-contact-hero .jtl-contact-hero__form a { color: #2722f8; text-decoration-color: #2722f8; }
/* SENDEN on its own line, below the consent (widget puts them in a flex row). */
.sc-contact-hero .jtl-contact-hero__actions { flex-direction: column; align-items: flex-start; gap: 20px; }
/* SENDEN hover — this page flips the form panel from the widget's default navy to
 * light-blue (see the CONTACT sections below), so the widget's built-in negative hover (light-sand fill,
 * meant to stay visible on navy) reads as a washed-out near-white pill on the light
 * panel. On a light background the button is a standard Primary, whose hover is a
 * navy fill with light-sand label. Scoped to this page's panel only. */
.sc-contact-hero .jtl-contact-hero__submit:hover,
.sc-contact-hero .jtl-contact-hero__submit:focus-visible {
  background-color: var(--sc-navy);
  color: var(--sc-sand);
}

/* ── 5b. ECOSYSTEM — real mono partner logos under "powered by" (the redesign
 *        SVG set, root-relative so the path holds across environments). */
/* "powered by" is the same 14/14 white label as "mehr erfahren" in the module —
 * not a smaller, dimmer caption. */
#content .sc-ecosystem .sc-tile__powered .jtl-text__body {
  font-size: 14px; font-weight: 400; line-height: 14px;
  color: #fff !important; margin: 0 0 8px;
}
/* The label sits on the "poweredby" row and the mark on the "logo" row below it,
 * so the block spans both. The logo SVGs use currentColor, so they are painted
 * white via a mask on a ::after box. */
/* 50px = the 14px label + its 8px margin + the 28px row the mark is bottom-set
 * in, so the label lands on the reference's line and the mark on its baseline. */
.sc-ecosystem .sc-tile__powered { position: relative; grid-area: poweredby; grid-row: 3 / 5; align-self: end; padding-bottom: 28px; }
.sc-ecosystem .sc-tile__powered::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 20px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left bottom; mask-position: left bottom;
  /* `contain` inside a 120×24 box is what caps BOTH axes: these are word-marks
   * of very different aspect ratios, so a height cap alone lets a wide mark
   * (GREYHOUND, Returnless) run past the module's 120px width. */
  -webkit-mask-size: contain; mask-size: contain;
}
.sc-tile__powered--greyhound::after  { -webkit-mask-image: url(assets/jp1388-greyhound.svg);  mask-image: url(assets/jp1388-greyhound.svg); }
.sc-tile__powered--jera::after       { -webkit-mask-image: url(assets/jp1388-jera.svg);       mask-image: url(assets/jp1388-jera.svg); }
.sc-tile__powered--countx::after     { -webkit-mask-image: url(assets/jp1388-countx.svg);     mask-image: url(assets/jp1388-countx.svg); }
.sc-tile__powered--returnless::after { -webkit-mask-image: url(assets/jp1388-returnless.svg); mask-image: url(assets/jp1388-returnless.svg); }
.sc-tile__powered--dealavo::after    { -webkit-mask-image: url(assets/jp1388-dealavo.svg);    mask-image: url(assets/jp1388-dealavo.svg); }
.sc-tile__powered--bringly::after    { -webkit-mask-image: url(assets/jp1388-bringly.svg);    mask-image: url(assets/jp1388-bringly.svg); }
.sc-tile__powered--ffn::after        { -webkit-mask-image: url(assets/jp1388-ffn.svg);         mask-image: url(assets/jp1388-ffn.svg); }

/* ── 13b. WE ARE IN IT TOGETHER — exact blobs illustration from the Figma module. */
.sc-together-blobs {
  width: 100%; max-width: 528px;
  aspect-ratio: 528 / 396;
  background: url(assets/jp1388-together-blobs.png) left center/contain no-repeat;
}
.sc-together { display: flex; flex-direction: column; justify-content: center; height: 100%; }
/* Body paragraph: 23px gap above (from the heading) and below (to the buttons). */
#content .sc-together > .jtl-text--paragraph { margin-top: 23px; margin-bottom: 23px; }

/* ── 4b. FEATURE GRID cards — the design has no white card background; the cards
 *        sit directly on the section. Remove the widget's default white fill. */
.sc-features .jtl-card-grid__card { background: transparent; }
/* 80px breathing room above the feature content (the wrapper padding is removed). */
.sc-features .jtl-card-grid__inner { padding-top: 80px; }

/* ── 6. AWARDS band — the Figma bar sits on the sand band, not the widget's
 *       default peach with an orange gradient overlay. Skin sc-awards to sand and
 *       drop the overlay so the sand-backed badges blend. */
.awards.sc-awards { background: #eeeee7; overflow: visible; padding-top: 0; padding-bottom: 0; }
.awards.sc-awards .awards-overlay { display: none; }
/* Drop the theme wrapper's top padding above the awards band. */
.container:has(.sc-awards) { padding-top: 0; }
/* Badges vary in native height (152–289px); cap them to one measure and let the
 * width follow, so none overflows the row and gets clipped at the top. */
.sc-awards .awards-section__gallery-item { align-items: center; }
/* The band has no title here, but the widget still reserves the title column in
 * its flex row, pushing the badges into the right half. Hide the empty title and
 * let the gallery span the full band, centred. */
.sc-awards .heading-container { display: none; }
.sc-awards .awards-container { width: 100%; }
/* On desktop all badges live inside ONE swiper-slide. The widget pins that slide
 * to width:fit-content + justify-content:center; override it (higher specificity,
 * scoped to the desktop track) so the badges spread across the full band. */
.sc-awards .awards-container .awards-section__gallery .is-desktop .swiper-slide {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sc-awards .awards-section__gallery-item img {
  height: auto;
  width: auto;
  max-height: 90px;
  object-fit: contain;
}

/* Real design icons (blue #2722f8 SVGs from the module) painted over each card's
 * icon element; the Font Awesome glyph is kept only as the carrier and hidden.
 * The #content + child combinator out-ranks the widget's own icon sizing. */
.sc-features .jtl-card__icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
}
#content .sc-features .jtl-card-grid__card > .jtl-card__icon {
  display: block;
  width: 63px;
  height: 63px;
  font-size: 0;
  margin: 0 auto;
}
.sc-features .jtl-card__icon::before { content: "" !important; }
.sc-features .sc-feat--multichannel .jtl-card__icon { background-image: url(assets/jp1388-icon-feat-multichannel.svg); }
.sc-features .sc-feat--processes    .jtl-card__icon { background-image: url(assets/jp1388-icon-feat-processes.svg); }
.sc-features .sc-feat--finance      .jtl-card__icon { background-image: url(assets/jp1388-icon-feat-finance.svg); }
.sc-features .sc-feat--returns      .jtl-card__icon { background-image: url(assets/jp1388-icon-feat-returns.svg); }
/* Drop the theme wrapper's top+bottom padding around the feature (icons) band:
 * section > .container adds 4rem each; the band's own inner padding carries the
 * rhythm. Keyed via the grid's own class so only this band is affected. */
.container:has(> .row > .col > .sc-features) {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── 14b. CONTACT — the light-blue form panel carries the exact organic curve
 *         from the Figma module (node 1084-11626): its left edge bows LEFT into
 *         the navy. The band background is navy; the blue panel is masked to the
 *         module's vector so the navy shows through the concave scoop. The mask
 *         is that vector path (viewBox 848x788), stretched to the panel. */
.jtl-contact-hero.sc-contact-hero .jtl-contact-hero__form-title { display: none; }
@media (min-width: 992px) {
  .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__inner { background: var(--sc-navy); }
  /* Widen the form panel (fields get more room); narrow the intro to match.
   * justify-content centres the intro copy vertically against the taller form. */
  .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro { background: transparent; flex: 1 1 34%; justify-content: center; }
  /* Centre the navy intro group as a block (margin auto), but keep the text
   * itself left-aligned within it. Force every line to the same 400px box so
   * short lines (eyebrow, phone) share the long lines' left edge instead of
   * self-centring. */
  .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__intro > .jtl-text {
    display: block; width: 100%; max-width: 400px;
    margin-left: auto; margin-right: auto; text-align: left;
  }
  .jtl-contact-hero.sc-contact-hero .jtl-contact-hero__form {
    background: #89d2ff;
    flex: 1 1 66%;
    max-width: none;
    margin-left: -9%;
    padding-left: 32%;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 848 788' preserveAspectRatio='none'><path d='M200 0C90 150 0 280 0 394C0 508 90 638 200 788L848 788L848 0Z' fill='%23000'/></svg>");
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 848 788' preserveAspectRatio='none'><path d='M200 0C90 150 0 280 0 394C0 508 90 638 200 788L848 788L848 0Z' fill='%23000'/></svg>");
    -webkit-mask-size: 120% 100%; mask-size: 120% 100%;
    -webkit-mask-position: 60px center; mask-position: 60px center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}

/* CTA tile: hide the grid's default ::before icon (it has no icon_fa). */
.sc-ecosystem .jtl-card-grid__card:last-child::before { display: none !important; content: none !important; }
/* Trade Network — partner shown as text (its logo mark does not mask cleanly),
 * in the same slot and the same 14/14 white as the other partner lines. It spans
 * the same two rows, and the same 46px, as the label+logo block on those tiles,
 * so its first line starts on their "powered by" line rather than a row lower. */
.sc-ecosystem .sc-tile__powered-text { grid-row: 3 / 5; grid-column: 1; align-self: end; height: 50px; }
#content .sc-ecosystem .sc-tile__powered-text .jtl-text__body {
  font-size: 14px; font-weight: 400; line-height: 14px; color: #fff !important; margin: 0;
}

/* ── Section backgrounds — white bands over the sand page. The sc_row el_class is
 *    stripped, so the row-level sections are matched via :has() on a surviving
 *    widget/atom class inside them. ─────────────────────────────────────────── */
/* .sc-stats / .sc-juno-cards ARE the section elements (the widget wrapper paints
 * its own band), so target them directly with #content to out-rank it. The facts
 * band is already white; the rule that matters here is the one on its theme row
 * wrapper, so the sand page does not show as a strip above and below it. */
#content .sc-stats,                                           /* stats + "Mehr als ein ERP…" … */
#content section:has(.sc-stats) { background: #fff; }         /* …and its theme row wrapper */
#content section:has(.sc-juno-intro) { background: #fff; }    /* "AI Agent Juno" intro */
#content section:has(.sc-ki-lead) { background: #fff; }       /* "KI im E-Commerce" heading intro */
#content section:has(.sc-juno-diagram) { background: #fff; }  /* the KI/Juno diagram band */
#content .sc-juno-cards,                                      /* the slider <section> … */
#content section:has(.sc-juno-cards) { background: #fff; }    /* …and its theme row wrapper */
/* "Bleib im Loop" slider keeps the widget's default sand (#eeeee7) band — no
 * white override. */
/* Drop the "AI Agent Juno" intro section's wrapper bottom padding. */
.container:has(.sc-juno-intro) { padding-bottom: 0; }
/* Juno card copy area on a sand tint so the card reads on the white section. */
.sc-juno-cards .jtl-post__body { background: #eeeee7; }

/* KI intro lead paragraph — constrain width. */
.sc-ki-lead { max-width: 845px; margin-left: auto; margin-right: auto; }

/* Logo strip: the band owns its own height, so the only thing taken off here is
 * the theme wrapper's vertical padding. Everything else is left exactly as the
 * widget draws it, which is what makes this instance match the identical one on
 * /de/ki/juno band-for-band. (.sc-logos is the slider's own <section>.)
 *
 * Two rules used to sit above this one; both are gone on purpose:
 *
 *   - `display: none` on the widget's heading block, to drop its default
 *     "JTL Community" fallback. It could never have matched: this instance
 *     passes show_text="no", and the widget then emits no heading element at
 *     all rather than an empty one. The attribute already did the job.
 *   - `margin-top: -32px`, to sit the band closer under the hero. Nothing in
 *     the reference does that, and across the whole slider subtree it was the
 *     single computed difference between the two instances — it pulled the
 *     band up over the last 32px of the hero above it. */
.container:has(> .row > .col > .sc-logos) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Extra breathing room under the centered H2 heading in the 5th section.
 * Prefixed with the page's own `sc-hero` body hook so the structural
 * nth-child selector can only ever match on /de/smart-commerce/. */
body:has(.sc-hero) #content > section:nth-child(5) > div > div > div > section > div > div.jtl-text.jtl-text--h2.jtl-text--center > h2 {
  padding-bottom: 12px;
}

/* ── The Elementor rebuild of this page pulls its hero up behind the site
 *    chrome the same way the widget above does, and needs the same banner lift.
 *
 *    The rule two blocks up is keyed on `.sc-hero`, which is the WPBakery
 *    widget's class; the rebuilt hero is a library section carrying the
 *    library's own pull-up marker instead. Same fix, same reason: with the band
 *    reaching the very top it paints over the Connect banner, so the banner is
 *    lifted rather than the band held back — holding it back is what leaves the
 *    sand gap this page exists to close.
 *
 *    Keyed on the marker rather than on a page id so it cannot apply to a page
 *    whose hero is not pulled up. ───────────────────────────────────────────── */
body:has(.jtl-ew-section[style*="--jtl-ew-section-pull-up"]) .connect-banner {
  position: relative;
  z-index: 20;
}