/**
 * jp-434-home-responsive.css — Home (/de/) tablet + mobile responsive sweep (JP-434)
 *
 * Scope: body.home only. Section 1 below fixes the hero; sections 2+ fix the
 *        other home widgets that kept desktop-first widths/padding below lg.
 * Page:  https://dev-jtl-vietanh.betterscale.dev/de/
 * Figma: hero tablet 163:9430 / mobile 163:6475 · facts 163:9442 / 163:6500
 *
 * Companion files (already on main): jp-434-home-mobile.css (grid/overflow
 * collapses) + jp-434-home-quote-spacing.css. This file loads last
 * alphabetically, so its rules win where they overlap.
 *
 * ===================== 1. HERO =====================
 * Desktop (>=992px) keeps the original 2-col hero untouched. Below the lg
 * breakpoint Figma STACKS the hero: photo full-width on top, navy content
 * (heading + body + CTAs) below, joined by a curved navy cap that domes up
 * into the photo. The desktop hero pins the photo with position:absolute,
 * which survives below lg and keeps the photo cramped in the corner — so the
 * first job is to un-pin it into normal flow.
 *
 * Tablet and mobile differ in type scale, CTA layout and curve geometry, so
 * each is taken from its own Figma frame:
 *   - Heading: Kurdis Wide Bold — 44/56 (tablet) · 38/48 (mobile)
 *   - Body:    Inter Regular 20/28 (both)
 *   - CTAs:    side-by-side equal-width (tablet) · stacked full-width (mobile)
 *   - Curve:   vector 163:9433 765.995x221 (tablet) · 163:6485 388.96x98 (mobile)
 */

/* ============================================================
   Common stacking + shared type/CTA traits (tablet + mobile)
   ============================================================ */
@media (max-width: 991.98px) {
    body.home .hero-product-section .row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* Photo col: un-pin from absolute, full-width, render first (top). */
    body.home .hero-product-section .hero-product-section__image {
        position: relative !important;
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.home .hero-product-section .hero-product-section__image picture,
    body.home .hero-product-section .hero-product-section__image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Navy content col: full-width, below the photo. */
    body.home .hero-product-section .hero-product-section__content {
        order: 0 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        overflow: visible !important;
    }

    /* Curved navy cap (per-breakpoint shape + size set below). The cap's flat
       bottom sits on the content-panel top; it is pulled up over the photo's
       lower edge so the navy domes up into the photo. */
    body.home .hero-product-section .hero-product-section__content::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* The desktop eyebrow ("JTL-Software") is not in the tablet/mobile Figma. */
    body.home .hero-product-section .hero-product-section__content--subtitle {
        display: none !important;
    }

    /* Heading -> body gap = 16px (Figma). */
    body.home .hero-product-section .hero-product-section__content--title {
        margin: 0 0 16px !important;
        font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
        color: #fff !important;
    }
    /* Body copy: Inter 20/28 on both breakpoints. body -> CTA gap = 32px. */
    body.home .hero-product-section .hero-product-section__content--text {
        margin: 0 0 32px !important;
    }
    body.home .hero-product-section .hero-product-section__content--text p {
        font-family: Inter, sans-serif !important;
        font-size: 20px !important;
        line-height: 28px !important;
        letter-spacing: 0 !important;
        color: #fff !important;
        margin: 0 !important;
    }

    /* CTA pills: Inter SemiBold 16/24, +0.32px tracking, uppercase, 12/24 pad. */
    body.home .hero-product-section .hero-product-section__content--buttons a {
        padding: 12px 24px !important;
        border-radius: 145px !important;
    }
    body.home .hero-product-section .hero-product-section__content--buttons a .product-button-group__button--with-icon__text {
        font-family: Inter, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        letter-spacing: 0.32px !important;
        text-transform: uppercase !important;
    }
}

/* ============================================================
   Tablet 768–991px (Figma 163:9430)
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home .hero-product-section .hero-product-section__content {
        padding: 24px 46px 0 !important;
    }

    /* Heading 44/56. The markup hard-codes "just<br>run E-Com.<br>Evolve it."
       with NO spaces around the <br>s, so it renders 3 lines here vs Figma's
       2 — suppressing a <br> would glue "justrun" (only display:none stops a
       <br> breaking, and that drops the word gap). Keep the clean 3-line
       wrap; the type scale is the change that matters. */
    body.home .hero-product-section .hero-product-section__content--title {
        font-size: 44px !important;
        line-height: 56px !important;
    }

    /* CTAs side-by-side, equal width, 16px gap. */
    body.home .hero-product-section .hero-product-section__content--buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        width: 100% !important;
    }
    body.home .hero-product-section .hero-product-section__content--buttons a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    /* Curve = Figma tablet vector 163:9433 (765.995x221) rotated 180° so the
       dome peaks left-of-center and vanishes toward the right edge, leaving
       the photo as a wedge top-right. Intrinsic ratio 221/766 ≈ 0.288. */
    body.home .hero-product-section .hero-product-section__content::before {
        top: calc(-28.8vw + 1px) !important;
        height: 28.8vw !important;
        background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20765.995%20221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%20149.8657%20L0%20221%20L765.995%20221%20C754.1088%20211.0834%20741.4605%20201.8096%20728.0303%20193.2796%20L505.056%2051.652%20C450.868%2017.222%20390.386%200.005%20329.898%200%20L329.851%200%20C269.363%200.004%20208.869%2017.221%20154.657%2051.651%20L0%20149.8657Z%22%20fill%3D%22%230B1B45%22%2F%3E%3C%2Fsvg%3E") !important;
    }
}

/* ============================================================
   Mobile <=767px (Figma 163:6475)
   ============================================================ */
@media (max-width: 767.98px) {
    body.home .hero-product-section .hero-product-section__content {
        padding: 20px 32px 0 !important;
    }

    /* Heading 38/48. Three lines on mobile — keep both hard-coded <br>s. */
    body.home .hero-product-section .hero-product-section__content--title {
        font-size: 38px !important;
        line-height: 48px !important;
    }

    /* CTAs stacked, full-width, 16px gap. */
    body.home .hero-product-section .hero-product-section__content--buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        width: 100% !important;
    }
    body.home .hero-product-section .hero-product-section__content--buttons a {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Curve = Figma mobile vector 163:6485 (388.96x98) rotated 180°.
       Intrinsic ratio 98/388.96 ≈ 0.252. */
    body.home .hero-product-section .hero-product-section__content::before {
        top: calc(-25.2vw + 1px) !important;
        height: 25.2vw !important;
        background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%20388.96%2098%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2066.4563%20L0%2098%20L388.96%2098%20C382.9244%2093.6026%20376.5018%2089.4902%20369.6821%2085.7077%20L256.46%2022.9044%20C228.943%207.6368%20198.232%200.0021%20167.517%200%20L167.493%200%20C136.778%200.002%20106.06%207.6365%2078.532%2022.9039%20L0%2066.4563Z%22%20fill%3D%22%230B1B45%22%2F%3E%3C%2Fsvg%3E") !important;
    }
}

/* Hero headline line breaks. The headline ships as "Don't just<br>run E-Com.
   <br>Evolve it." with no spaces around the <br>s; the segments are re-wrapped
   into `.hero-ttl-seg` spans (joined by spaces) so breaks become per-breakpoint:
   default (desktop + mobile) keeps all three on their own line (= the original
   <br>s); tablet merges segments 1+2 so line 1 reads "Don't just run E-Com."
   and line 2 "Evolve it." (Figma 163:9430).

   The base rule is NOT body.home-scoped on purpose: the wrap helper runs on
   any page carrying this hero widget, so every wrapped title must reproduce
   its original <br>s by default. Only the tablet merge is home-specific. */
.hero-product-section__content--title .hero-ttl-seg:not(:first-child) {
    display: block;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home .hero-product-section__content--title .hero-ttl-seg:nth-child(2) {
        display: inline;
    }
}

/* ===================== 2. FACTS ("Die Welt des E-Commerce") =====================
   Figma facts 163:9442 (tablet) / 163:6500 (mobile).
   custom-clone.css:8165 sets `section.facts-grid-redesign { padding:80px 64px
   !important }` with NO breakpoint, so it overrides the base wawi-panels mobile
   padding (40px 24px). On a 390 screen that leaves only 280px of content width,
   so the 32px headline over-wraps to 5 lines (Figma is 3 at ~24px). The section
   also computes ~407px wide (full-bleed overshoot) — pin it to 100%. */
@media (max-width: 991.98px) {
    body.home section.facts-grid-redesign {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* Tablet stats layout (Figma 163:9442): NOT a 1-col stack. "xyz" sits on its
   own row spanning full width (centred); "54.000" + "500+" share row 2 as two
   columns, each number on one line. jp-434-home-mobile.css:71 forces the grid
   to 1fr at <=991 — override just the tablet band to 2-col and span the first
   stat. (Beats custom-clone.css:8238 `…__wrapper > * { grid-area:auto }` on
   specificity + load order.) */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home section.facts-grid-redesign .keyfacts-new__wrapper.grid,
    body.home section.facts-grid-redesign .keyfacts-new__wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 640px !important;
    }
    body.home section.facts-grid-redesign .keyfacts-new__wrapper > *:first-child {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 767.98px) {
    body.home section.facts-grid-redesign {
        padding: 48px 24px !important;
    }
    /* Headline 32→24 to match Figma mobile facts so it wraps to ~3 lines.
       custom-clone.css:7488 styles this h2 at (0,6,1) with !important via
       `…product-support-section.mr-lg-10:not(.linkboxen-mit-bild) h2`; match
       that chain + body.home + .facts-grid-redesign to win at (0,7,1). */
    body.home section.wawi-panels-section.home-version.product-support-section.facts-grid-redesign.mr-lg-10:not(.linkboxen-mit-bild) h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}

/* ===================== 3. LOGOBOX ("Lösungen für jede Challenge") ===============
   Navy decorated-container. The content was crushed to ~134px because the
   64px side padding is applied TWICE: section (custom-clone.css:9318
   `padding:0 64px 80px`) shrinks 390→262, then the inner wrapper (9342
   `padding:46px 64px`) shrinks 262→134. Cut both insets at small widths so
   the navy card has a usable content width, and collapse the desktop 4-col
   tile grid (9433) to 2-col on tablet / 1-col on mobile. */
@media (max-width: 991.98px) {
    body.home section.home-logobox-section {
        padding: 0 24px 56px !important;
    }
    body.home section.home-logobox-section .decorated-container-wrapper {
        padding: 40px 32px !important;
    }
    /* The widget builds TWO swipers: one holding the 8 real navy solution
       tiles (Kundenservice … powered-by + logo + arrow — Figma 163:6725) and
       one holding plain white logo duplicates. Below lg it hides the navy-tile
       swiper and shows the logo duplicates; flip that so mobile/tablet show the
       real tiles (as desktop does). Selected by content via :has(). */
    body.home section.home-logobox-section .product-payments-section__gallery .swiper:has(.logobox-tile) {
        display: block !important;
        width: 100% !important;
    }
    body.home section.home-logobox-section .product-payments-section__gallery .swiper:not(:has(.logobox-tile)) {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home section.home-logobox-section .swiper-slide {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 767.98px) {
    body.home section.home-logobox-section {
        padding: 0 16px 48px !important;
    }
    body.home section.home-logobox-section .decorated-container-wrapper {
        padding: 32px 20px !important;
    }
    body.home section.home-logobox-section .swiper-slide {
        grid-template-columns: 1fr !important;
    }
    body.home section.home-logobox-section .decorated-container-heading h2,
    body.home section.home-logobox-section .decorated-container-heading__title {
        font-size: 28px !important;
        line-height: 36px !important;
    }
}

/* ===================== 4. KONTAKT form (section-1690) =====================
   Desktop is a DIAGONAL 2-colour split: navy `.row` on the left (heading,
   white text) and a `#89D2FF` light-blue diagonal `::before` on the right
   (the form, dark text). Figma tablet/mobile 163:10877 keeps the SAME two
   colours but STACKS them: navy block on top (eyebrow + heading + body +
   phone, white), then a curved boundary where the light-blue form area
   ARCHES UP into the navy (navy stays only in the two top corners), then the
   form on the light-blue card (navy labels, white inputs, orange SENDEN).

   A straight diagonal can't make that arch, so below lg we drop the diagonal
   and rebuild the split: the form column becomes a full-bleed `#89D2FF` card
   and its `::before` is the blue dome cap (traced 1:1 from the Figma curve
   vector 163:10878, depth = 0.204 x width) that pokes up into the navy.
   Desktop (>=992) keeps the original diagonal untouched. */
@media (max-width: 991.98px) {
    /* Drop the desktop diagonal — the stacked layout uses the dome instead. */
    body.home section.section-1690 .row.pt-5.pr-5::before {
        display: none !important;
    }

    /* Form column -> light-blue card, full-bleed to the navy block edges.
       The form col is inset exactly 64px each side at both breakpoints
       (measured: navy-block padding = 64px), so -64 margin + 64 padding
       extends the blue to the navy edges while leaving the fields in place.
       NB: the section's id is #kontaktieren. Two existing !important rules
       fight us: custom-clone.css `#kontaktieren .col-lg-6.container-contact`
       (1,3,0), and jp-434-home-mobile.css `…basic-br > .col-lg-6` (1,5,0,
       which stacks both columns at width:100%). Match that exact child chain
       + .container-contact to land at (1,6,0) and win width/flex here. */
    body.home #kontaktieren .row .row.basic-br > .col-lg-6.container-contact {
        position: relative !important;
        overflow: visible !important;
        background-color: #89D2FF !important;
        /* It's a flex item, so width:auto won't fill — set it explicitly:
           100% (= navy block content, 606/260) + the two 64px insets = the
           full navy block width, then pull back out with -64 margins. */
        flex: 0 0 auto !important;
        width: calc(100% + 128px) !important;
        max-width: none !important;
        margin-left: -64px !important;
        margin-right: -64px !important;
        padding-left: 64px !important;
        padding-right: 64px !important;
        padding-bottom: 8px !important;
        /* No own radius: the navy block is overflow:hidden with a 46px radius,
           so it clips the full-bleed blue card to the module's rounded bottom.
           A radius here would leave a navy sliver between the two arcs. */
        border-radius: 0 !important;
    }

    /* The navy block carries pb-5 (46px) below the form col, which left a navy
       strip under the blue card (the blue stopped 46px short of the module
       bottom). Zero it at <=991 so the blue fills to the navy block's bottom
       edge; the block's overflow:hidden 46px corners then round the blue. */
    body.home section#kontaktieren.section-1690 .row.pt-5.pr-5.basic-br {
        padding-bottom: 0 !important;
    }

    /* Blue dome cap: sits just above the card, arcing up into the navy so the
       navy survives only in the top corners (Figma 163:10877). Width tracks
       the card (left/right:0 = full padding box); height 20vw keeps the
       traced 0.204 aspect at any width in the band. +1px overlap = no seam. */
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: calc(-20vw + 1px) !important;
        height: 20vw !important;
        background-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%201000%20204%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C204%20L37%2C184%20L74%2C163%20L110%2C143%20L147%2C122%20L184%2C102%20L220%2C82%20L257%2C61%20L294%2C43%20L331%2C29%20L367%2C16%20L404%2C8%20L441%2C2%20L478%2C0%20L514%2C0%20L551%2C2%20L588%2C8%20L625%2C14%20L661%2C27%20L698%2C39%20L735%2C57%20L771%2C78%20L808%2C98%20L845%2C118%20L882%2C139%20L918%2C159%20L955%2C180%20L992%2C202%20L1000%2C204%20Z%22%20fill%3D%22%2389D2FF%22%2F%3E%3C%2Fsvg%3E") !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        pointer-events: none !important;
    }

    /* Labels / helper text sit on the blue now -> navy, not white (Figma). */
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact label,
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact legend,
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact p,
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact .hs-richtext,
    body.home section#kontaktieren.section-1690 .col-lg-6.container-contact .hs-field-desc {
        color: #0B1B45 !important;
    }
}

/* ===================== 5. QUOTE / Success Story (tablet only) =====================
   Figma TABLET 163:9538 centres the whole testimonial (eyebrow, quote, author,
   role, CTA pill). Live keeps the quote text centred but the author/role/CTA
   left-aligned (the text column is `.text-center.text-lg-left` and resolves
   left here). Centre everything in the tablet band only.
   NB: Figma MOBILE 163:6610 is LEFT-aligned, so this is scoped 768–991 — mobile
   keeps its current left alignment. */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home section.home-quote-section .col-lg.text-center.text-lg-left,
    body.home section.home-quote-section .blockquote,
    body.home section.home-quote-section .blockquote p,
    body.home section.home-quote-section .blockquote cite,
    body.home section.home-quote-section .blockquote footer,
    body.home section.home-quote-section .blockquote span,
    body.home section.home-quote-section .blockquote strong {
        text-align: center !important;
    }
    /* Centre the CTA pill (it is a block/flex element, so text-align alone
       won't move it). */
    body.home section.home-quote-section .blockquote a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* "CEO von SportFits" (.quote-role) is a left-sitting fit-content block;
       margin-auto centres the block itself. */
    body.home section.home-quote-section .blockquote .quote-role {
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content !important;
    }
}

/* ===================== 6. ICON-3ER ("Was hält dich auf?") =====================
   Figma tablet 163:9547 = 3 tiles in ONE row (icon above title, centred).
   Figma mobile 163:6657 = 1 column, each tile = icon LEFT + title RIGHT on a
   single line (left-aligned). The grid (custom-clone.css:9236) is repeat(3,1fr)
   on desktop but collapses to 1 column below lg; the tile (.card-body) is a
   flex COLUMN (icon ::before above the h5). */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Section ships 80px 64px padding (no breakpoint) → only ~185px per column
       at 768, clipping "Marktveränderungen?". Trim padding + gap to widen the
       columns, and let long words wrap instead of overflowing. */
    body.home section.home-icon-3er-section {
        padding: 64px 40px !important;
    }
    body.home section.home-icon-3er-section .home-icon-3er-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    body.home section.home-icon-3er-section .card h5,
    body.home section.home-icon-3er-section .card .h5 {
        overflow-wrap: break-word !important;
    }
}
@media (max-width: 767.98px) {
    body.home section.home-icon-3er-section {
        padding: 48px 24px !important;
    }
    body.home section.home-icon-3er-section .home-icon-3er-grid {
        grid-template-columns: 1fr !important;
    }
    /* Tile becomes icon-left + title-right on one line, left-aligned. */
    body.home section.home-icon-3er-section .card {
        text-align: left !important;
    }
    body.home section.home-icon-3er-section .card-body {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
    body.home section.home-icon-3er-section .card .h5,
    body.home section.home-icon-3er-section .card h5 {
        text-align: left !important;
    }
}

/* ===================== 7. COMMUNITY linkboxen ("Get Connected and Evolve") =====
   Figma tablet 163:10786 = 2 cards on top (JTL Founder | JTL KMU) and the 3rd
   (JTL Enterprise) centred on the row below. jp-434-home-mobile.css:29 collapses
   this grid to 1 column at <=991; restore a 2-col grid in the tablet band and
   centre the 3rd card. Mobile (<=767) keeps the single-column stack. */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.home section.wawi-panels-section.linkboxen-mit-bild .wawi-panels-widget {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-items: center !important;
    }
    body.home section.wawi-panels-section.linkboxen-mit-bild .wawi-panels-widget > :nth-child(3) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: calc(50% - 12px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===================== 8. CTA-BOX ("We are in it together") =====================
   Desktop (>=992px) is a 2-col side-by-side: text column + image column, the
   SportFits blog-header image sitting flush in its right column (untouched).
   Below lg the `.row` stacks to a centred single column (flex-direction:column,
   align-items:center) and centres the eyebrow/heading/body — but the image is
   a `display:block` element with `margin:0`, so inside its now-full-width `.col`
   it stays pinned left (528px image in a 640px col → 112px gap all on the right).
   Centre the block image within its column so it lines up under the centred
   copy. Scoped to <=991 so the approved desktop layout is untouched. */
@media (max-width: 991.98px) {
    body.home section.home-cta-box-section .home-cta-image {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}