/* JP-1265 — /de/edi-software/ contact ("formular") section polish.
   DE-only page (no EN/WPML twin), so the page-id scope is unambiguous.
   The section is assembled from generic HeadlineStandard widgets + a HubSpot
   form embed, so it uses off-pattern classes and falls through the shared
   navy contact-box styling that sibling contact pages already get. This
   restores the three items the client flagged. Scoped to the contact card via
   the structural hook `.basic-br:has(.container-contact)` (language-neutral,
   stable across editor re-saves). */

/* 1) Top line: the overline "KONTAKT UND BERATUNG" renders as
   <span class="product-management-section__subtitle …>, so the shared light-blue
   rule (which only matches h2.redesign-styles__overtitle) never applies and it
   falls through to an off-model blue-violet on the navy card. Retint to
   JTL Light Blue. */
body.page-id-319499 .basic-br:has(.container-contact) .product-management-section__subtitle {
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
}

/* 2) Heading: a global rule sets `hyphens: auto` on .redesign-styles__title at
   ≤991.98px, which auto-breaks the section heading mid-word. Disable automatic
   hyphenation for this section's heading. */
body.page-id-319499 .basic-br:has(.container-contact) .redesign-styles__title {
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
}

/* 2b) Left-column copy is invisible on the navy card. The body paragraph uses
   `.product-management-section__text` (hard-coded navy #0b1b45 by the widget) and
   the checklist items are plain <li> that inherit a dark colour — neither is
   covered by the card's white-text rules (which only match `.redesign-styles__*`),
   so both rendered navy-on-navy. Whiten the paragraph and the list text, leaving
   the teal check icons (their own inline colour) untouched. */
body.page-id-319499 .basic-br:has(.container-contact) > .col-lg-6:first-child .product-management-section__text,
body.page-id-319499 .basic-br:has(.container-contact) > .col-lg-6:first-child .product-management-section__text p,
body.page-id-319499 .basic-br:has(.container-contact) > .col-lg-6:first-child ul.list-icons li {
    color: #ffffff !important;
}

/* 3) Inputs too narrow: the HubSpot embed defaults to ~300px, leaving the fields
   cramped inside the ~588px form column on desktop. Widen it to fill the column
   (capped ~600px), matching the sibling contact pages. */
body.page-id-319499 .col-lg-6.container-contact .wpb_raw_code,
body.page-id-319499 .col-lg-6.container-contact .wpb_wrapper,
body.page-id-319499 .col-lg-6.container-contact .hbspt-form,
body.page-id-319499 .col-lg-6.container-contact .hs-form-iframe {
    width: 100% !important;
    max-width: 600px !important;
}

/* 3b) The shared contact row is forced flex-nowrap with a 262px gap and a fixed
   350px text column at every width; below the desktop breakpoint that crushes
   the form. Stack the two columns so the form takes full width on tablet/mobile
   (this page ships no mobile override of its own). */
@media (max-width: 991.98px) {
    body.page-id-319499 .row.basic-br:has(.container-contact) {
        flex-wrap: wrap !important;
        gap: 32px !important;
    }
    body.page-id-319499 .row.basic-br:has(.container-contact) > .col-lg-6:first-child,
    body.page-id-319499 .row.basic-br:has(.container-contact) .col-lg-6.container-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}