/* ───────────────────────────────────────────────────────────────────────── * preise-infobox-slide23.css — "Infobox mit Box" (Figma Slide 23 / 248:6683) * * Brings the PREISE/"Infobox" module on fibu-schnittstelle (214912) to the * approved two-card layout already live on finanzbuchhaltung-software (232998): * ┌─ Dark Blue card (eyebrow + title + body + Orange CTA) ─┐ ┌ Light-Blue ┐ * └───────────────────────────────────────────────────────┘ └ subcard ┘ * * Client confirmed (2026-06-27) the reversal of the 2026-06-01 "PIM = single * card" decision noted in cascade-preise-module-chrome.css. * * JP-792 (2026-07-07): pim-software (232971) + einkaufssoftware (232980) were * ALSO handled here originally, but JP-716's preise-two-card-einkauf-pim.css * (2026-07-03, Figma 248:6706) is now the intended detached-two-card layout for * pim/einkauf DE+EN. The two overrides collided: this file's `:not()`-inflated * specificity (~0,12,1) out-ranked JP-716 (~0,8,1) and — because WPML stamps the * DE page-id class (page-id-232971 / -232980) on the EN twins too (262850 / * 262844) — clobbered ALL FOUR pages, forcing the subcard to width:100% / * position:absolute so it overlapped the navy card (the "full-width, covers the * previous components" bug). The 232971 + 232980 branches were removed from this * file so JP-716's layout renders cleanly on pim/einkauf (DE+EN). This file now * scopes ONLY to fibu-schnittstelle (214912), which JP-716 does not cover. * * WHY CSS, not the GROUP-B grid: on these 3 pages the `.product-subcard-widget` * is NESTED inside `.basic-card-widget > .card-body > .row > .col-lg-6` * (on 232998 it is a row-level sibling). Rather than a per-page WPBakery * content move (a per-environment DB migration), we restructure with a CSS * grid on `.card-body` (`display:contents` flattens the inner row) and paint * the navy box behind title+left via `.card-body::before` — single theme file, * deploys with the theme, verified desktop + mobile on the dev tunnel. * * Specificity: the chrome rules replicate cascade-preise-module-chrome.css * GROUP-A `:not()` chain + `.page-id` so they outrank the Dark-Blue cascade. * Below 992px the grid is off → the navy card stays whole with the Light-Blue * subcard stacked inside it. * ───────────────────────────────────────────────────────────────────────── */ @media (min-width:992px){ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary{ background:transparent !important; border-radius:0 !important; overflow:visible !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body{ display:grid !important; grid-template-columns:1fr 360px !important; column-gap:24px !important; align-items:stretch !important; position:relative !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body > .product-support-section__title-wrapper{ grid-column:1 !important; grid-row:1 !important; position:relative !important; z-index:1 !important; /* JP-948 restyle: Figma 248:6707 insets the card 31.944px at deck scale * (x1.442) = 46px. Bottom inset drops to 0 because the 32px heading->body * gap is carried by the h2's margin-bottom below. */ padding:46px 46px 0 46px !important; margin:0 !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body > .row{ display:contents !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child{ grid-column:1 !important; grid-row:2 !important; position:relative !important; z-index:1 !important; max-width:none !important; flex:none !important; padding:0 46px 46px 46px !important; /* JP-948: 31.944 x 1.442 = 46 */ } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body > .row > .col-lg-6:last-child{ grid-column:2 !important; grid-row:1 / span 2 !important; max-width:none !important; flex:none !important; display:flex !important; align-items:stretch !important; padding:0 !important; /* JP-948: the column still carries Bootstrap's `mt-lg-5` (32px) from the * WPBakery `spaces` attr, which was harmless in the original stacked * layout. Once this file made the column a grid item starting at row 1, * that margin pushed the Light-Blue subcard 32px below the Dark-Blue * card's top edge (`align-items:stretch` shrank it, so the BOTTOMS lined * up and only the tops were off). Neutralise it here — the grid, not the * utility class, owns vertical placement above 992px. Below 992px the * grid is off and `mt-8` still provides the stacked gap. */ margin-top:0 !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget .card-body::before{ content:'' !important; grid-column:1 !important; grid-row:1 / span 2 !important; background:#0b1b45 !important; border-radius:46px !important; /* JP-948: Figma 248:6707 rounded-[31.944] x 1.442 */ z-index:0 !important; } body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget{ height:100% !important; } } /* Light-Blue subcard card * JP-948: radius 24 -> 46px. Figma gives the Highlight (248:6715) the SAME * rounded-[31.944px] as the navy Text-Box (248:6707), so the pair must move * together -- restyling only the navy corner would read as a rendering bug. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget{ display:block !important; background:#89d2ff !important; border-radius:46px !important; padding:32px !important; margin:0 !important; max-width:none !important; width:100% !important; transform:none !important; } /* Dark text in the Light-Blue card */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget p, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget li, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget h3, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget h4, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget strong, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget a{ color:#0b1b45 !important; -webkit-text-fill-color:#0b1b45 !important; } /* Mobile: subcard stacked inside the navy card */ @media (max-width:991.98px){ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget{ margin-top:24px !important; } } /* JP-948: centre the Light-Blue card's copy vertically (Figma 248:6706). * * In the design the copy is centred in the box: its centre sits at 114.67 in a * 229.33-tall card. Live it was flush to the top. The card is `height:100%` of a * stretched grid row, so all the slack pools underneath the text -- 168px of it * once the JP-948 margin reset let the box grow to its full 272px. * * MUST come after the `display:block !important` rule above: that rule sits * outside the min-width block and carries !important at the same specificity, so * an identical selector inside the >=992px block would lose the `display` fight * on source order. Declared here, later in the file, it wins. * * flex-column + justify-content:center keeps the children in normal block order * while centring the group. Both twins hold a single

today (measured), but * flex-column means an editor adding a second node still stacks it correctly * rather than having it laid out as a flex ROW. * Desktop only: below 992px the grid is off and the card is content-height, so * there is no slack to centre within and this would be a no-op. */ @media (min-width:992px){ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .product-subcard-widget{ display:flex !important; flex-direction:column !important; justify-content:center !important; } } /* --------------------------------------------------------------------------- * JP-948 -- Dark-Blue card typography, per Figma 248:6707. * * DECK SCALE. The frame is `Link-Box-Desktop 1442` rastered at 1000px, so every * Figma length is scaled by 1442/1000 = 1.442. That factor is not assumed: five * properties the live card ALREADY matches confirm it exactly -- * heading 22.222 x 1.442 = 32.05 -> live 32px * tracking 0.4444 x 1.442 = 0.6408 -> live 0.64px * button fs 11.11 x 1.442 = 16.02 -> live 16px * button pad 16.667/8.333 x 1.442 = 24.03/12.02 -> live 24px/12px * Only then are the NON-matching lengths trustworthy: * card radius / padding 31.944 x 1.442 = 46.06 -> 46px (was 24 / 44+48) * heading line-height 31.944 x 1.442 = 46.06 -> 46px (was 40) * body font-size 12.5 x 1.442 = 18.03 -> 18px (was 16) * body line-height 19.444 x 1.442 = 28.04 -> 28px (was 24) * body -> button gap 38.556 x 1.442 = 55.6 -> 56px (was 48) * The heading->body gap is already 32px (22.222 x 1.442 = 32.05) and is left * alone. The orange CTA already matches the design on every property. * * COLOUR. Figma paints heading + body `var(--jtl-white, white)`; live renders * #eeeee7 (JTL Light Sand) from cascade-preise-module-chrome.css !important. * SOURCE ORDER IS LOAD-BEARING HERE, not a nicety. That sheet's branches run up * to (0,14,1) -- `...__title.text-tertiary .font-weight-bold` (cascade-*.css:187) * -- which EQUALS the descendant selector below. So: * - on the title element itself we win on specificity; * - on a `.font-weight-bold` span INSIDE the title it is a TIE, broken only by * load order. The loader globs overrides/*.css and sort()s them * (dump-clone/mu-plugins/00-dump-clone-overrides.php:197-198) and 'cascade-' * sorts before 'preise-', so this file wins. * Anything that sorts AFTER this file takes the colour straight back. * CAVEAT: the Raidboxes loader (10-jtl-redesign-overrides.php) is not in this * repo and has been hand-edited on the boxes before. PHP glob() default-sorts so * it is very likely identical, but this tie is UNVERIFIED on staging/prod. * Not trusted on arithmetic alone: computed heading + body colour measures * rgb(255,255,255) on BOTH twins at 1440px. * NOT a blanket recolour (css-override.md 2): every rule is pinned to * .page-id-214912, i.e. fibu-schnittstelle + its EN twin only. * * BREAKPOINT. Sizes/spacing are >=992px only: custom-clone.css sets deliberate * smaller mobile type (title 26/34, body 15/22) below 992px and Figma has no * mobile frame for this module, so mobile TYPE AND SPACING are left exactly as * they were. Colour and radius are viewport-independent tokens and DO change at * every width -- below 992px the heading/body go #eeeee7 -> #fff and the subcard * corner 24px -> 46px. (The navy ::before is >=992px only; below it the corner * comes from the real .basic-card-widget, which cascade-*.css:142 already sets * to 46px -- so the radius agrees across the breakpoint either way.) * ------------------------------------------------------------------------ */ /* Colour: white heading + body, all widths */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .product-support-section__title, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .product-support-section__title *, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .card-body > .row > .col-lg-6:first-child p, body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .card-body > .row > .col-lg-6:first-child p strong{ color:#fff !important; -webkit-text-fill-color:#fff !important; } @media (min-width:992px){ /* Heading: 32px Kurdis Wide Bold already correct; only the leading is off */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .product-support-section__title{ line-height:46px !important; margin-bottom:32px !important; /* carries the 32px heading->body gap now * that the title wrapper's bottom pad is 0 */ } /* Body copy */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .card-body > .row > .col-lg-6:first-child p{ font-size:18px !important; line-height:28px !important; } /* Orange CTA sits 56px below the copy (Figma 38.556 x 1.442), and 46px above * the card's bottom edge -- i.e. the card's uniform 46px inset, nothing more. * * margin-bottom:0 is the actual fix for "no breathing room under the button". * The column's padding-bottom is ALREADY the correct 46px; jp-710-dms-compare- * button-overlap.css was clawing 32px of it back with `margin-bottom:-32px`, * leaving a 14px gap. That sheet drops the page-id on purpose (its comment: * "minus the DE-only page-id ... so this also covers /en/document-management- * system"), so it reaches this card uninvited at (0,7,3). We do NOT edit it -- * page 233028 still wants the pull-up. This rule is (0,18,1) and page-scoped, * so it neutralises the negative margin here only. * * Adding padding-bottom instead would have stacked 46px of padding on top of a * -32px margin to net 46px, hiding the negative margin rather than answering * it -- and it would drift the moment jp-710 changes. */ body.wp-theme-jtl.page-template-product-landing:not(.page-id-8688):not(.page-id-96380):not(.page-id-1546):not(.page-id-199375):not(.page-id-262865):not(.page-id-233028):not(.page-id-125841).page-id-214912 .product-support-section .basic-card-widget.text-tertiary .card-body > .row > .col-lg-6:first-child .product-buttons-group{ margin-top:56px !important; margin-bottom:0 !important; } }