/* show_category_responsive_patch_v14.css
   Inhaltlich unverändert zu v13.
   Version nur erhöht, damit Browsercache nach Head/OG-Update sauber invalidiert wird.
*/


/* =========================================
   CATEGORY HEADLINE SPACER
   Abstand vor $sh_ca_headline
   ========================================= */

body.page-category .category-products-head {
    margin-top: 35px !important;
}


/* =========================================
   SHOW CATEGORY DESKTOP FINAL V61 SUBTITLE DOWN1
   Finaler Desktop-Stand nach Sichtabgleich:
   - kein Inline-CSS in show_category.php
   - Sidebar als Overlay, geschlossen bis Menu-Click
   - Sidebar-Position: Desktop-Frame minus 8px
   - Content links: 38px nach links
   - rechte Content-Kante: oben +2px, Produktgrid wieder sauber innerhalb
   - keine Debug-Linien
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) {
        --rs-category-frame-width: min(var(--desktop-header-max-width, 1320px), calc(100vw - 32px));
        --rs-category-sidebar-left: max(8px, calc(((100vw - var(--rs-category-frame-width)) / 2) - 8px));
        --rs-category-sidebar-top: calc(var(--topbar-height, 58px) - 2px);

        --rs-category-content-grow-left: 38px;
        --rs-category-content-grow-right: -32px;
        --rs-category-content-grow-total: calc(var(--rs-category-content-grow-left) + var(--rs-category-content-grow-right));
        --rs-category-content-width-final: calc(1040px + var(--rs-category-content-grow-total));
        --rs-category-inner-right-trim: 10px;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #page-content-wrapper.category-page-main {
        display: block !important;
        width: 100% !important;
        max-width: var(--rs-category-content-width-final) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 42px 24px 96px 24px !important;
        float: none !important;
        clear: none !important;
        transform: none !important;
        box-sizing: border-box !important;
        grid-column: auto !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page {
        display: block !important;
        width: var(--rs-category-content-width-final) !important;
        max-width: var(--rs-category-content-width-final) !important;
        margin-left: calc(-1 * var(--rs-category-content-grow-left)) !important;
        margin-right: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header {
        display: block !important;
        width: calc(100% - var(--rs-category-inner-right-trim)) !important;
        max-width: calc(var(--rs-category-content-width-final) - var(--rs-category-inner-right-trim)) !important;
        margin: 0 0 28px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header h1,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header h1 {
        display: block !important;
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
        color: #111 !important;
        font-size: 31px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        text-transform: none !important;
        font-family: inherit !important;
        text-align: left !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header .service-page-subtitle,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header .service-page-subtitle {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #666 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;
        text-align: left !important;
        font-family: inherit !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid,
    body.page-category:not(.page-subcategory):not(.page-search-results) .xr_s41,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid {
        width: calc(100% - var(--rs-category-inner-right-trim)) !important;
        max-width: calc(var(--rs-category-content-width-final) - var(--rs-category-inner-right-trim)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .xr_s41 {
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        color: #555 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head {
        margin-top: 34px !important;
        margin-bottom: 22px !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head h4,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head h2 {
        margin: 0 !important;
        color: #111 !important;
        font-weight: 700 !important;
        text-align: left !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 34px 24px !important;
        padding: 0 !important;
        clear: both !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > .category-product-card,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > article {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image img {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #wrapper > #sidebar-wrapper,
    body.page-category:not(.page-subcategory):not(.page-search-results) #sidebar-wrapper {
        position: fixed !important;
        top: var(--rs-category-sidebar-top) !important;
        left: var(--rs-category-sidebar-left) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--sidebar-desktop-width, 280px) !important;
        max-width: var(--sidebar-desktop-width, 280px) !important;
        height: calc(100vh - var(--rs-category-sidebar-top)) !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        z-index: 2147481800 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #111 !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        transition: transform 0.12s ease-out, opacity 0.12s ease-out !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #sidebar-wrapper::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #wrapper:not(.toggled) #sidebar-wrapper {
        transform: translate3d(-106%, 0, 0) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #wrapper.toggled #sidebar-wrapper {
        left: var(--rs-category-sidebar-left) !important;
        transform: translate3d(0, 0, 0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) #sidebar-wrapper > ul.sidebar-nav,
    body.page-category:not(.page-subcategory):not(.page-search-results) #sidebar-wrapper .sidebar-nav {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        background: #111 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
}

@media (min-width: 1024px) and (max-width: 1160px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) #page-content-wrapper.category-page-main {
        max-width: calc(100vw - 70px) !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page {
        width: calc(100vw - 70px) !important;
        max-width: calc(100vw - 70px) !important;
        margin-left: 0 !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid,
    body.page-category:not(.page-subcategory):not(.page-search-results) .xr_s41,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head,
    body.page-category:not(.page-search-results):not(.page-subcategory) .category-product-grid {
        width: calc(100% - 10px) !important;
        max-width: calc(100vw - 80px) !important;
        outline: 0 !important;
    }
}


/* =========================================
   SHOW CATEGORY SPLIT TOP GRID FIX V48 BOTH GRIDS PLUS5
   Korrektur:
   - obere Contentbereiche 2px weiter nach rechts
   - Produktgrid NICHT weiter ueberziehen
   - Produktbilder bleiben sauber im Grid
   - Basis ist V36 clean
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) {
        --rs-category-top-right-trim: 8px;
        --rs-category-grid-right-trim: 10px;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid,
    body.page-category:not(.page-subcategory):not(.page-search-results) .xr_s41,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head {
        width: calc(100% - var(--rs-category-top-right-trim)) !important;
        max-width: calc(var(--rs-category-content-width-final) - var(--rs-category-top-right-trim)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid {
        width: calc(100% - var(--rs-category-grid-right-trim)) !important;
        max-width: calc(var(--rs-category-content-width-final) - var(--rs-category-grid-right-trim)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > .category-product-card,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > article {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1024px) and (max-width: 1160px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid,
    body.page-category:not(.page-subcategory):not(.page-search-results) .xr_s41,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-products-head {
        width: calc(100% - 8px) !important;
        max-width: calc(100vw - 78px) !important;
    }

    body.page-category:not(.page-search-results):not(.page-subcategory) .category-product-grid {
        width: calc(100% - 10px) !important;
        max-width: calc(100vw - 80px) !important;
    }
}


/* =========================================
   SHOW CATEGORY BOTH GRIDS RIGHT PLUS5 FINAL V48
   Ergebnis aus V47:
   - +25px war der richtige Hebel, aber 20px zu weit
   - final deshalb +5px
   - Kategorieuebersicht oben und Produktgrid unten getrennt direkt gesteuert
   - keine Diagnose-Linien
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) {
        --rs-category-both-grids-right-expand-final: 5px;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid {
        width: calc((100% - var(--rs-category-top-right-trim)) + var(--rs-category-both-grids-right-expand-final)) !important;
        max-width: calc((var(--rs-category-content-width-final) - var(--rs-category-top-right-trim)) + var(--rs-category-both-grids-right-expand-final)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid {
        width: calc((100% - var(--rs-category-grid-right-trim)) + var(--rs-category-both-grids-right-expand-final)) !important;
        max-width: calc((var(--rs-category-content-width-final) - var(--rs-category-grid-right-trim)) + var(--rs-category-both-grids-right-expand-final)) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        outline: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid > *,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > .category-product-card,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-grid > article {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-product-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1024px) and (max-width: 1160px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-subcat-grid {
        width: calc((100% - 8px) + 5px) !important;
        max-width: calc((100vw - 78px) + 5px) !important;
    }

    body.page-category:not(.page-search-results):not(.page-subcategory) .category-product-grid {
        width: calc((100% - 10px) + 5px) !important;
        max-width: calc((100vw - 80px) + 5px) !important;
    }
}


/* =========================================
   SHOW CATEGORY H1 SECTION ALIGN V53
   Basis: V48 finaler Grid-Stand
   Nur H1-Sektion:
   - 45px nach links
   - 5px nach oben
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) header.service-page-header.category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header {
        transform: translate(-52px, -7px) !important;
        position: relative !important;
        z-index: 1 !important;
    }
}


/* =========================================
   SHOW CATEGORY SUBTITLE DOWN V53
   Nur service-page-subtitle:
   - 2px tiefer
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) header.service-page-header.category-page-header .service-page-subtitle,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header .service-page-subtitle,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header .service-page-subtitle {
        transform: translateY(22px) !important;
        position: relative !important;
    }
}


/* =========================================
   SHOW CATEGORY DIRECT H1 SUBTITLE V54
   Direkter Element-Hebel, weil Header-Transform bei V53 optisch nicht gegriffen hat:
   - H1 direkt 3px nach rechts
   - service-page-subtitle direkt 3px nach rechts und 7px tiefer
   - Basis bleibt V53
   ========================================= */
@media (min-width: 1024px) {
    body.page-category:not(.page-subcategory):not(.page-search-results) header.service-page-header.category-page-header > h1:not(.visually-hidden),
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header > h1:not(.visually-hidden),
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header > h1:not(.visually-hidden) {
        transform: translateX(3px) !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin-left: 0 !important;
    }

    body.page-category:not(.page-subcategory):not(.page-search-results) header.service-page-header.category-page-header > .service-page-subtitle,
    body.page-category:not(.page-subcategory):not(.page-search-results) .service-page-header.category-page-header > .service-page-subtitle,
    body.page-category:not(.page-subcategory):not(.page-search-results) .category-page-header > .service-page-subtitle {
        transform: translate(3px, 7px) !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
    }
}


/* =========================================
   SHOW CATEGORY DESKTOP ALERT CONTACT STYLE V63
   Vorsichtige Übernahme des eingefrorenen Alert-Designs:
   rechte Kante 29px nach links, ohne Grid/H1/Sidebar anzufassen.
   ========================================= */
@media (min-width: 1024px) {
    body.page-category main#page-content-wrapper.category-page-main .alert.alert-danger {
        width: calc(100% - 29px) !important;
        max-width: calc(100% - 29px) !important;
        margin: 34px 29px 52px 0 !important;
        padding: 20px 22px 20px 22px !important;
        border: 1px solid #dcdcdc !important;
        border-left: 4px solid #e30613 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        color: #111 !important;
        min-height: 0 !important;
    }

    body.page-category main#page-content-wrapper.category-page-main .alert.alert-danger p {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        color: #e30613 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
}