/* ============================================================================ PREISE two-card module — DE + EN: /de/einkaufssoftware/ (232980) /en/procurement-software/ (262844) /de/pim-software/ (232971) /en/pim-software/ (262850) Match Figma 248:6706 (JTL-Website-Modules): a NAVY card on the left (eyebrow + title + body + orange button) and a SEPARATE sky-blue card on the right, side by side with a light-sand gap — instead of the current single full-width navy card with the sky-blue sub-card nested/floating inside it. DOM (both pages): .row.no-gutters (outer, one column) .col-lg-12 .basic-card-widget (A) navy, radius 46, pad 64 ← full width .card-body (B) flex-col (C) full-width heading block .row (D) flex-row .col-lg-6 (E) body + orange button .col-lg-6 …pr-lg-5 (F) .product-subcard-widget (sky-blue), floated There is no single element wrapping only {C,E} (heading+body) without F, so we can't just re-background one column. Instead: shrink the navy card A to the left ~64% (C + E flow inside it naturally) and lift F out to an absolutely- positioned full-height card in the right ~33%, anchored to the outer .row.no-gutters. Purely visual, page-scoped, reversible — no content change. ============================================================================ */ @media (min-width: 992px) { /* Outer row becomes the positioning context for the lifted sub-card. */ body.page-id-232980 .product-support-section .container > .row.no-gutters, body.page-id-232971 .product-support-section .container > .row.no-gutters, body.page-id-262844 .product-support-section .container > .row.no-gutters, body.page-id-262850 .product-support-section .container > .row.no-gutters { position: relative !important; } /* Neutralise intermediate positioning so the sub-card anchors to the outer row (not to .basic-card-widget / .card-body / .col which ship position). */ body.page-id-232980 .product-support-section .basic-card-widget, body.page-id-232980 .product-support-section .basic-card-widget .card-body, body.page-id-232980 .product-support-section .basic-card-widget .card-body > .row, body.page-id-232980 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6, body.page-id-232971 .product-support-section .basic-card-widget, body.page-id-232971 .product-support-section .basic-card-widget .card-body, body.page-id-232971 .product-support-section .basic-card-widget .card-body > .row, body.page-id-232971 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6, body.page-id-262844 .product-support-section .basic-card-widget, body.page-id-262844 .product-support-section .basic-card-widget .card-body, body.page-id-262844 .product-support-section .basic-card-widget .card-body > .row, body.page-id-262844 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6, body.page-id-262850 .product-support-section .basic-card-widget, body.page-id-262850 .product-support-section .basic-card-widget .card-body, body.page-id-262850 .product-support-section .basic-card-widget .card-body > .row, body.page-id-262850 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6 { position: static !important; } /* A — navy card shrinks to the left column (Figma ≈ 64%), padding 46 (Figma). */ body.page-id-232980 .product-support-section .basic-card-widget, body.page-id-232971 .product-support-section .basic-card-widget, body.page-id-262844 .product-support-section .basic-card-widget, body.page-id-262850 .product-support-section .basic-card-widget { width: 64% !important; max-width: 64% !important; padding: 40px !important; border-radius: 46px !important; overflow: visible !important; } /* Kill the global .orange card-body 64px padding (custom-clone.css §12615) on these detached pages (JP-792). It was COMPOUNDING on the card's own 40px above → ~104px inset, so the navy card rendered oversized/too tall. The card wrapper's 40px is now the only inset. Desktop-only: on mobile the wrapper has no padding (rule A is @media ≥992px), so the card-body's 64px stays and is the normal single-card mobile inset. */ body.page-id-232980 .product-support-section .basic-card-widget .card-body, body.page-id-232971 .product-support-section .basic-card-widget .card-body, body.page-id-262844 .product-support-section .basic-card-widget .card-body, body.page-id-262850 .product-support-section .basic-card-widget .card-body { padding: 0 !important; } /* E — body column now spans the full width of the (narrower) navy card. */ body.page-id-232980 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child, body.page-id-232971 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child, body.page-id-262844 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child, body.page-id-262850 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child { flex: 0 0 100% !important; max-width: 100% !important; padding-right: 0 !important; } /* The body copy ships wrapped in a div capped at max-width:340px (the margin class varies per page: .mb-5 / .mb-6 mb-xl-4 …), which forced a narrow ~5-6 line wrap and a tall card. Target the wrapper by position (direct child of the body column) so it works on every page → full-width copy → shorter widget. */ body.page-id-232980 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child > div, body.page-id-232971 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child > div, body.page-id-262844 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child > div, body.page-id-262850 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child > div { max-width: 100% !important; } /* F — lift the sub-card out to a full-height card on the right (≈33%). */ body.page-id-232980 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget, body.page-id-232971 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget, body.page-id-262844 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget, body.page-id-262850 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:nth-child(2) .product-subcard-widget { position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; width: 33% !important; max-width: 33% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; border-radius: 46px !important; padding: 40px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } } /* Heading colour → pure white (Figma), was cream #eeeee7. Body → 18px/28px. `#content` id-tier is needed to beat the theme's cream `#content …__title` rule (cascade-preise-module-chrome). */ body.page-id-232980 #content .product-support-section .basic-card-widget .product-support-section__title, body.page-id-232971 #content .product-support-section .basic-card-widget .product-support-section__title, body.page-id-262844 #content .product-support-section .basic-card-widget .product-support-section__title, body.page-id-262850 #content .product-support-section .basic-card-widget .product-support-section__title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 28px !important; line-height: 34px !important; margin-bottom: 24px !important; /* breathing room */ } body.page-id-232980 #content .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child p, body.page-id-232971 #content .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child p, body.page-id-262844 #content .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child p, body.page-id-262850 #content .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child p { font-size: 16px !important; line-height: 24px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Tighten the sub-card text to match the smaller scale. */ body.page-id-232980 #content .product-support-section .product-subcard-widget p, body.page-id-232971 #content .product-support-section .product-subcard-widget p, body.page-id-262844 #content .product-support-section .product-subcard-widget p, body.page-id-262850 #content .product-support-section .product-subcard-widget p { font-size: 16px !important; line-height: 24px !important; }