/**
 * jp-739-beratung-contact-redesign.css — "Request an appointment" contact module.
 *
 * Ticket: JP-739 — the "Termin anfragen / Request an appointment" section uses
 *         the OLD design (white/cream card + plain form).
 * Pages:  https://b376u019-a.myrdbx.io/de/beratung-vereinbaren/#termin-anfragen (page-id 287763)
 *         https://b376u019-a.myrdbx.io/en/talk-to-sales/                        (page-id 289452)
 * Figma:  JTL Website Modules (Hubspot/Kontakt) → node 248:4209 "Update".
 *
 * The approved design is the redesigned contact module already shipping on the
 * HOME #kontaktieren section: a navy #0b1b45 rounded card with a light-blue
 * #89d2ff organic curve on the right (behind the form), a tech-blue KONTAKT &
 * BERATUNG eyebrow and white headline/body/phone on the left, HubSpot form on
 * the light-blue area. This section (id #beratung) uses the SAME widget classes
 * (.row.basic-br, .container-contact, .redesign-styles__overtitle/__title/__text,
 * hbspt form) — it just never received the #kontaktieren-scoped treatment.
 *
 * This mirrors the custom-clone.css §7603 #kontaktieren rules, re-scoped to
 * #beratung on the two consultation pages, with a flexible two-column split
 * (this page's left column also carries a "Für wen…" checklist, so it is not
 * pinned to the home module's fixed 350px width). The curve reuses the shared
 * asset. Page-scoped (rule 4b) — no other section is affected.
 *
 * NOTE: the HubSpot form loads via external JS; on prod/staging the redesign
 * wraps the live form. Verify final form-field rendering on staging (§3.X.6).
 */

/* Navy 46-rounded card (was white). Positioned for the curve pseudo. */
body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br {
    background-color: #0b1b45 !important;
    background-image: none !important;
    border-radius: 46px !important;
    padding: 46px 64px !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 48px !important;
}

/* Light-blue organic curve on the right, behind the form (Figma 248:4209).
   Reuses the home module's shared vector; absolute web path so it resolves from
   the overrides/ folder.

   `100% 100%`, not `auto 100%`. The asset is `preserveAspectRatio="none"` with
   percentage width/height, so it has no intrinsic size; Firefox derives a ratio
   from its viewBox (848:788) while Chrome does not, and under `auto 100%` the
   curve stops short of the edge in Firefox only. See the note on the
   #kontaktieren rule in custom-clone.css for the measurements. */
body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    background-image: url('/site/themes/jtl/images/jp434/kontakt/light-blue-vector.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 100% 100%;
    transform: rotate(180deg);
    z-index: 0;
    pointer-events: none;
}

/* Left column (copy + checklist + phone) — ~38%, above the curve. Matches the
   approved home #kontaktieren split (navy text ≈26-38%, light-blue curve ≈66-70%)
   per Figma 248:4150. This page carries an extra "Für wen…" checklist, so it gets
   a touch more than home's 26% — but far less than the earlier 52% that made the
   navy dominate and pushed the light-blue too narrow (the reported mismatch). */
body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br > .col-lg-6:first-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Right column (HubSpot form) — fills the rest, on the light-blue area. */
body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;   /* keep the form on the light-blue (right) as the navy widens */
}

/* Whole left column copy → white on the navy panel. The body/checklist/phone
   are bare elements directly in the column (no .redesign-styles__text wrapper),
   so whiten the column broadly, then re-tint the eyebrow below. */
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child p,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child li,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child h3,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child h4,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child div,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child strong,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child b,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child span,
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child i {
    color: #ffffff !important;
}

/* Eyebrow → tech/light-blue #89d2ff, Inter Semi Bold 18/24/0.9 uppercase.
   (It's a SPAN.redesign-styles__overtitle, not an h2.) Full chain so it beats
   the broad white-column rule above. */
body:is(.page-id-287763, .page-id-289452) #beratung .row.basic-br > .col-lg-6:first-child .redesign-styles__overtitle {
    color: #89d2ff !important;
    -webkit-text-fill-color: #89d2ff !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px !important;
}
body:is(.page-id-287763, .page-id-289452) #beratung .redesign-styles__overtitle::after,
body:is(.page-id-287763, .page-id-289452) #beratung .redesign-styles__overtitle::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Headline → white Kurdis Wide Bold 32/46. */
body:is(.page-id-287763, .page-id-289452) #beratung .redesign-styles__title,
body:is(.page-id-287763, .page-id-289452) #beratung .redesign-styles__title .font-weight-bold {
    color: #ffffff !important;
    font-family: "Kurdis Wide", Kurdis, Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    display: block !important;
}

/* Form must sit "outside" — directly on the light-blue area, NOT inside a white
   card (match the home #kontaktieren module). The HubSpot embed is wrapped in a
   white .wpb_raw_code box (bg #fff, radius 20); strip it so the white inputs
   float on the light-blue like the homepage. */
body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact .wpb_raw_code,
body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact .wpb_wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Mobile / tablet: stack the two columns full-width (curve is desktop only). */
@media (max-width: 991.98px) {
    body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br {
        flex-wrap: wrap !important;
        gap: 32px !important;
    }
    body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br::before {
        display: none !important;   /* no organic curve when stacked */
    }
    body:is(.page-id-287763, .page-id-289452) #beratung .row .row.basic-br > .col-lg-6:first-child,
    body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Stacked: the curve is gone, so the form would sit straight on the navy card
       and its dark HubSpot labels (#0b1b45) become invisible. Restore the Figma
       form card (div.wpb_raw_code = light-blue #89d2ff, radius 20, padding) so the
       labels read dark-on-light-blue exactly like the design's mobile layout.
       Desktop keeps the "outside on the curve" look (rule above stays transparent). */
    body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact .wpb_raw_code {
        background: #89d2ff !important;
        background-color: #89d2ff !important;
        border-radius: 20px !important;
        padding: 20px !important;
    }
    body:is(.page-id-287763, .page-id-289452) #beratung .col-lg-6.container-contact {
        justify-content: stretch !important;
    }
}