/*
 * 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;
}

/* ── 3. STAT COUNTERS — TEMPORARY (jtl_three_column_text re-skinned) ─────── */
.jtl-3col-text.sc-stats { text-align: center; }
.sc-stats .jtl-3col-text__inner { margin-top: 40px; }
.sc-stats .sc-stat { text-align: center; }
#content .sc-stats .sc-stat__num .jtl-text__heading {
  color: var(--sc-blue) !important;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  font-weight: 700;
}
.sc-stats .sc-stat__num { margin-bottom: 12px; }
.sc-stats .sc-stat__label { color: var(--sc-navy); font-weight: 700; margin: 0; }
/* The visible label is the inner jtl-text <p>, which carries its own 400 weight,
 * so the wrapper weight above never reaches it — set 600 on the paragraph. */
#content .sc-stats .sc-stat__label > p { font-weight: 600; }

/* ── 5. ECOSYSTEM TILE GRID — TEMPORARY (jtl_card_grid re-skinned dark) ──── */
.jtl-card-grid.sc-ecosystem {
  background: var(--sc-navy);
  border-radius: 32px;
  color: #fff;
  padding: 64px 48px;
}
/* Cap the navy card at 1570px, centred, breaking out of the ~1450 page container
 * up to that width (never past the viewport, keeping a 24px gutter). The base
 * widget makes .jtl-card-grid full-bleed (margin:calc(50%-50vw); max-width:100vw);
 * this reuses the same centring idiom but stops at 1570. Compound class out-ranks
 * the base rule. */
.jtl-card-grid.sc-ecosystem.jtl-card-grid--services {
  max-width: 1570px;
  margin-left: calc(50% - min(785px, 50vw - 24px));
  margin-right: calc(50% - min(785px, 50vw - 24px));
}
.sc-ecosystem .jtl-card-grid__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
/* 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; }
.sc-ecosystem .jtl-card-grid__inner > .jtl-text:last-of-type { margin-bottom: 24px; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__eyebrow { color: var(--sc-lightblue) !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: eyebrow 18, heading 32, body 18 */
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__eyebrow { font-size: 18px; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__heading { font-size: 32px; line-height: 1.15; }
#content .sc-ecosystem .jtl-card-grid__inner > .jtl-text .jtl-text__body { font-size: 18px; }
/* Tile layout mirrors the homepage jtl-solution-tile: title top-left, icon
 * top-right, "mehr erfahren"/"powered by" bottom-left, orange arrow bottom-right. */
.sc-ecosystem .jtl-card-grid__card {
  position: relative;
  background: rgba(255, 255, 255, .10);
  border-radius: 24px;
  padding: 24px 24px 18px;
  text-align: left;
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
/* 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 pinned 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 33×33. */
.sc-ecosystem .jtl-card__icon {
  position: absolute; top: 24px; right: 24px; 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: 33px; height: 33px; 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); }
.sc-ecosystem .sc-tile__title { padding-right: 44px; }
.sc-ecosystem .sc-tile__title .jtl-text__eyebrow { font-size: 20px; font-weight: 600; line-height: 28px; text-transform: none; letter-spacing: 0; }
/* Title flush to the top row, the "mehr erfahren"/"powered by" line flush to the
 * bottom — the module's space-between layout. 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 #content id
 * lets these out-rank it without !important. */
#content .sc-ecosystem .jtl-card-grid__card > .sc-tile__title { margin-top: 0; }
#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: auto; }
/* "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. */
.sc-ecosystem .jtl-card-grid__card:not(:last-child)::after {
  content: ""; position: absolute; right: 24px; bottom: 22px;
  width: 18px; height: 16px; 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: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* last tile = the orange "Discover the JTL Ecosystem" CTA */
.sc-ecosystem .jtl-card-grid__card:last-child {
  background: var(--sc-orange);
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sc-ecosystem .jtl-card-grid__card:last-child .jtl-card__icon { display: none; }
/* 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: 12px auto 0;
  width: 20px; height: 18px; 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; }
@media (max-width: 1080px) { .sc-ecosystem .jtl-card-grid__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .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). */
.sc-ecosystem .sc-tile__powered .jtl-text__body { font-size: 12px; color: rgba(255,255,255,.55) !important; margin: 0 0 6px; }
/* the logo SVGs use currentColor, so paint them white via mask on a ::after box */
.sc-ecosystem .sc-tile__powered { position: relative; padding-bottom: 30px; }
.sc-ecosystem .sc-tile__powered::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 160px; height: 22px;
  background-color: rgba(255,255,255,.92);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: auto 22px; mask-size: auto 22px;
}
.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; }
/* FFN logo is a very wide/short mark — size it with contain in a wider box. */
.sc-tile__powered--ffn::after {
  width: 190px; height: 20px;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Trade Network — partner shown as text (its logo mark does not mask cleanly). */
.sc-ecosystem .sc-tile__powered-text { margin-top: auto; }
.sc-ecosystem .sc-tile__powered-text .jtl-text__body { font-size: 13px; color: rgba(255,255,255,.62) !important; }

/* ── 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 (widget wrapper carries a
 * baked #eeeee7), so target them directly with #content to out-rank 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 slider: drop the widget's default "JTL Community" header and sit close
 * under the hero above it. (.sc-logos is the slider's own <section>.) */
.sc-logos .jtl-trust-logo-slider__text { display: none; }
.sc-logos { margin-top: -32px; }
/* Drop the theme wrapper's top+bottom padding around the logo strip. */
.container:has(> .row > .col > .sc-logos) {
  padding-top: 0;
  padding-bottom: 0;
}