/* Impressum / Legal notice — redesign to match the current Figma.
 *
 * Scoped to body.page-id-3252. Under WPML both language twins carry that id
 * (the DE original 3252 is stamped on the EN "Legal notice" twin's <body> too),
 * so this one sheet styles /de/impressum/ AND /en/legal-notice/ identically and
 * touches no other page.
 *
 * Supersedes the earlier partial sheets jp-161-impressum.css and
 * qa-impressum-kontakt-card.css (both removed): the card selector there keyed on
 * the volatile WPBakery bg-* dropdown class and rotted when the card was re-saved
 * from bg-tertiary to bg-primary. Everything below hangs off the stable single
 * "#content .card" hook and the heading/paragraph structure instead.
 *
 * The contact CTA pill's APPEARANCE (fill / border / label / hover) is NOT styled
 * here — it is the reusable button widget (Secondary-neg variant), which owns
 * that. Only the pill's LAYOUT inside the card (centring, spacing) lives here.
 */

/* ---- Page background ------------------------------------------------------- */

/* Sand #eeeee7 across the whole page, per the Figma (the design root and
   section.hero-product-section are both #eeeee7). The white nav pill, the navy
   contact card and the navy footer keep their own fills; everything else — the
   header band, breadcrumb and body content — sits on sand. */
body.page-id-3252,
body.page-id-3252 #app {
    background-color: #eeeee7;
}

/* ---- Typography ------------------------------------------------------------ */

/* Headings: real <h1> plus the WPBakery span.hN headings (HeadlineStandard
   renders display_size="span" as <span class="h5"> etc., which the element
   selector h1..h6 never matched — why the section headings stayed grey). */
body.page-id-3252 #content h1,
body.page-id-3252 #content .h1,
body.page-id-3252 #content .h2,
body.page-id-3252 #content .h3,
body.page-id-3252 #content .h5,
body.page-id-3252 #content .h6 {
    color: #0b1b45;
    -webkit-text-fill-color: #0b1b45;
}

/* Page title "Impressum" — Kurdis Wide Bold 42/48, no tracking. */
body.page-id-3252 #content h1,
body.page-id-3252 #content .h1 {
    font-family: 'Kurdis Wide Bold', 'Kurdis Wide', 'Kurdis', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0;
}

/* Overline eyebrow "Kontakt zu JTL" above the H1 — Inter SemiBold 18/24, +0.9px,
   uppercase, JTL blue. The overline renders with two different markups depending
   on the page revision: a plain .h4 on the older content, and (post product-support
   widget migration) a .product-support-section__subtitle .h3 inside the hero — so
   both hooks are targeted. The .h3 form is otherwise painted navy by the headings
   rule above, whose -webkit-text-fill-color overrides `color`; restating
   -webkit-text-fill-color here keeps the fill blue. :not(.text-reset) excludes the
   card's own .h4 heading. */
body.page-id-3252 #content .h4:not(.text-reset),
body.page-id-3252 #content .product-support-section__subtitle {
    font-family: 'Inter', sans-serif;
    /* !important beats the Bootstrap .font-weight-normal utility on the element
       (font-weight:400!important), otherwise the SemiBold request is ignored. */
    font-weight: 600 !important;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #2722f8;
    -webkit-text-fill-color: #2722f8;
}

/* Body copy -> navy (was theme-default grey #585858). */
body.page-id-3252 #content p,
body.page-id-3252 #content li {
    color: #0b1b45;
}

/* Inline text links stay JTL blue. */
body.page-id-3252 #content a[href^="mailto:"],
body.page-id-3252 #content .card-body a[href^="mailto:"] {
    color: #2722f8;
    -webkit-text-fill-color: #2722f8;
}

/* Remove the orange underline under the H1 (Figma has none). */
body.page-id-3252 #content h1::after,
body.page-id-3252 #content .h1::after {
    display: none !important;
}

/* Remove the section divider rules (the Figma separates the info sections by
   spacing only, no <hr>). */
body.page-id-3252 #content hr {
    display: none;
}

/* ---- Contact card ---------------------------------------------------------- */

/* Navy card, 24px radius (Figma). One card on the page; hook is the structural
   .card, independent of the bg-* editor class.
   Vertical rhythm (Figma 3610:10584): 36px top/bottom padding (theme default was
   24px), and the card's own flex gap tightened to 27px so the icon sits ~27px
   above the text block instead of 32px. */
body.page-id-3252 #content .card {
    background-color: #0b1b45 !important;
    border-radius: 24px;
    padding-top: 36px;
    padding-bottom: 36px;
    gap: 27px;
}

/* Card text -> white. Scoped to the heading + body copy ONLY — never the CTA
   button, whose fill/label/hover are owned by the button widget (a broad
   ".card span" rule here would force the button label white and break its
   hover, where the label must flip to navy on the light-sand fill). */
body.page-id-3252 #content .card .card-body .h4,
body.page-id-3252 #content .card .card-body p,
body.page-id-3252 #content .card .card-body strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* Card icon — the Figma mail glyph shipped as an inline SVG (a white envelope in
   a rounded square; the navy card shows through the envelope cut-out). Replaces
   the theme's fa-stack icon: hide the stacked <span> glyphs and paint the SVG. */
body.page-id-3252 #content .card .card-top-icon {
    display: inline-block;
    width: 60px;
    height: 51px;
    background: url("jp1098-mail-icon.svg") center / contain no-repeat !important;
}
body.page-id-3252 #content .card .card-top-icon > span {
    display: none !important;
}

/* Card content is centred (icon / heading / text / button stack). */
body.page-id-3252 #content .card .card-body {
    text-align: center;
    /* Uniform ~27px rhythm (Figma). The theme stacks these children with a 16px
       flex gap AND a 16px bottom margin on each child AND a 24px top margin on
       the button, which compounds to 32px (heading->body) and 56px (body->button)
       — the box then reads too tall. Let a single 27px gap own the rhythm, zero
       the compounding margins, and drop the pb-5 (32px) padding that pushed the
       card bottom past the button. */
    gap: 27px;
    /* !important beats Bootstrap's .pb-5 spacing utility (padding-bottom:2rem
       !important) on the same element; without it the 32px stayed and stacked
       onto the card's 36px bottom padding, leaving a 68px gap below the pill. */
    padding-bottom: 0 !important;
}
body.page-id-3252 #content .card .card-body > .h4,
body.page-id-3252 #content .card .card-body > p {
    margin-bottom: 0;
}
/* CTA pill — the reusable button widget owns its fill/label/hover; here we set
   LAYOUT only. The pill is a flex item of the card-body column, whose default
   align-items (stretch) blows it out to the card's full inner width (~372px);
   Figma wants a compact auto-width pill centred under the text. align-self:center
   stops the cross-axis stretch (the pill shrinks to its own content, ~236px) and
   centres it, and dropping the 24px top margin lets the 27px gap above it apply.
   (The old display:inline-flex could not do this — a flex item is blockified, so
   inline-flex computes to flex and the pill still stretched full-width.) */
body.page-id-3252 #content .card .product-button-group__button--with-icon {
    align-self: center;
    margin-top: 0;
}

/* Breadcrumb alignment is now handled by the product-landing page template
   (page-template-product-landing #nav-breadcrumb .container), which puts the
   breadcrumb on the same 1570/60px grid as the page body — see JP-1124. The old
   per-page nav-inset override that used to live here has been removed. */