/* =========================================================
   KOBALZ CATEGORY MENU
   Version: v1.0.24 HEADER_SWITCHES_SAFE_PRODUCTLIST_ONLY
   Desktop-only ALLE KATEGORIEN plus Backend-Schnellzugriffe und produktlistensichere Header-Switches
   Dynamischer JTL-/Wawi-Kategoriebaum, breites dreispaltiges Premium-Panel
   ========================================================= */

body.kobalz-category-menu-ready {
    --kcm-green: #008000;
    --kcm-green-dark: #006b00;
    --kcm-green-soft: #eef7ee;
    --kcm-text: #111811;
    --kcm-muted: #667066;
    --kcm-line: #dfe8df;
    --kcm-line-soft: #edf3ed;
    --kcm-bg: #f7faf7;
    --kcm-card: #ffffff;
    --kcm-panel-width: min(1760px, 98vw);
    --kcm-shadow: 24px 0 80px rgba(0, 0, 0, .30);
}

@media (min-width: 992px) {

    /* Desktop-Navigation nach Einführung des Mega-Menüs auf einen einzigen Punkt reduzieren.
       Die Klasse wird nur auf die echte Hauptnavigationsliste gesetzt, damit mobile Navigation
       und das Kategorie-Panel nicht beeinflusst werden. */
    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-desktop-only-root,
    body.kobalz-category-menu-ready #mainNavigation .kobalz-category-menu-desktop-only-root {
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-desktop-only-root > li:not(.kobalz-category-menu-nav-item):not(.kobalz-category-menu-quick-item):not(.kpl-header-switches-holder),
    body.kobalz-category-menu-ready #mainNavigation .kobalz-category-menu-desktop-only-root > li:not(.kobalz-category-menu-nav-item):not(.kobalz-category-menu-quick-item):not(.kpl-header-switches-holder),
    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-desktop-only-root > .nav-item:not(.kobalz-category-menu-nav-item):not(.kobalz-category-menu-quick-item):not(.kpl-header-switches-holder),
    body.kobalz-category-menu-ready #mainNavigation .kobalz-category-menu-desktop-only-root > .nav-item:not(.kobalz-category-menu-nav-item):not(.kobalz-category-menu-quick-item):not(.kpl-header-switches-holder) {
        display: none !important;
    }

    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-nav-item,
    body.kobalz-category-menu-ready .kobalz-category-menu-nav-item,
    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-quick-item,
    body.kobalz-category-menu-ready .kobalz-category-menu-quick-item,
    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kpl-header-switches-holder,
    body.kobalz-category-menu-ready .kpl-header-switches-holder {
        display: flex !important;
        align-items: stretch !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        background: #ffffff !important;
        border: 0 !important;
    }

    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-trigger,
    body.kobalz-category-menu-ready .kobalz-category-menu-trigger {
        appearance: none !important;
        height: 54px !important;
        min-height: 54px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 0 26px !important;
        margin: 0 !important;
        border-left: 1px solid var(--kcm-green-dark) !important;
        border-right: 1px solid var(--kcm-green-dark) !important;
        border-bottom: 0 !important;
        background: var(--kcm-green) !important;
        color: #ffffff !important;
        font-family: "Oswald", Arial, sans-serif !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 54px !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        border-radius: 0 !important;
        box-shadow: 0 8px 18px rgba(0, 128, 0, .14) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-trigger::before {
        content: none !important;
        display: none !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-trigger .kcm-trigger-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-family: Arial, sans-serif !important;
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-trigger .kcm-trigger-label {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-trigger::after {
        content: "▾" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 2px !important;
        color: #ffffff !important;
        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        line-height: 1 !important;
        transform: translateY(-1px) !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-trigger:hover,
    body.kobalz-category-menu-ready .kobalz-category-menu-trigger:focus,
    body.kobalz-category-menu-open .kobalz-category-menu-trigger {
        color: #ffffff !important;
        background: var(--kcm-green-dark) !important;
        outline: none !important;
    }


    body.kobalz-category-menu-ready header#jtl-nav-wrapper #mainNavigation .kobalz-category-menu-quick-link,
    body.kobalz-category-menu-ready .kobalz-category-menu-quick-link {
        height: 54px !important;
        min-height: 54px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 24px !important;
        margin: 0 !important;
        border-right: 1px solid var(--kcm-line) !important;
        background: #ffffff !important;
        color: #151515 !important;
        font-family: "Oswald", Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 54px !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: color .15s ease, background .15s ease !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-quick-link:hover,
    body.kobalz-category-menu-ready .kobalz-category-menu-quick-link:focus {
        color: var(--kcm-green-dark) !important;
        background: var(--kcm-green-soft) !important;
        outline: none !important;
    }

    body.kobalz-category-menu-ready .kcm-quick-sale .kobalz-category-menu-quick-link {
        color: var(--kcm-green-dark) !important;
        background: #f4fbf4 !important;
        font-weight: 800 !important;
    }

    body.kobalz-category-menu-ready .kcm-quick-sale .kobalz-category-menu-quick-link::before {
        content: "%" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        margin-right: 8px !important;
        border-radius: 999px !important;
        background: var(--kcm-green) !important;
        color: #ffffff !important;
        font-family: Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }


    body.kobalz-category-menu-ready .kpl-header-switches-holder {
        align-items: center !important;
        justify-content: center !important;
        height: 54px !important;
        padding: 0 0 0 30px !important;
        margin-left: 50px !important;
        border-left: 1px solid var(--kcm-line) !important;
        background: #ffffff !important;
    }

    /* KCM v1.0.24: Switches nur auf Produktlisten zeigen.
       Wichtig: Das KOBALZ-Menü selbst bleibt auf allen Seiten aktiv. */
    body.kobalz-category-menu-ready .kpl-header-switches-holder {
        display: none !important;
    }

    body.kobalz-category-menu-ready.kobalz-productlist-layout .kpl-header-switches-holder,
    body.kobalz-category-menu-ready.kobalz-productlist-has-list .kpl-header-switches-holder,
    body.kobalz-category-menu-ready.kpl-filter-modal-active .kpl-header-switches-holder,
    body.kobalz-category-menu-ready.kcm-productlist-page .kpl-header-switches-holder {
        display: flex !important;
    }

    body.kobalz-category-menu-ready .kpl-header-switches {
        display: inline-flex !important;
        align-items: center !important;
        gap: 22px !important;
        height: 54px !important;
        white-space: nowrap !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 !important;
        min-width: 0 !important;
        font-family: "Oswald", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        color: #142214 !important;
        cursor: pointer !important;
        user-select: none !important;
        text-transform: uppercase !important;
        letter-spacing: .01em !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-input {
        position: absolute !important;
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
        pointer-events: none !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-ui {
        position: relative !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 26px !important;
        border: 1px solid #c9d8c9 !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important;
        transition: background .16s ease, border-color .16s ease !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-knob {
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: #98a498 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
        transition: transform .16s ease, background .16s ease !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-input:checked + .kpl-menu-switch-ui {
        background: var(--kcm-green) !important;
        border-color: var(--kcm-green) !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-input:checked + .kpl-menu-switch-ui .kpl-menu-switch-knob {
        transform: translateX(22px) !important;
        background: #ffffff !important;
    }

    body.kobalz-category-menu-ready .kpl-menu-switch-label {
        display: inline-block !important;
        max-width: 150px !important;
        color: inherit !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10550 !important;
        background: rgba(10, 18, 10, .58) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .18s ease !important;
        backdrop-filter: blur(1px) !important;
    }

    body.kobalz-category-menu-open .kobalz-category-menu-overlay {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 10560 !important;
        width: var(--kcm-panel-width) !important;
        max-width: 98vw !important;
        height: 100vh !important;
        background: var(--kcm-card) !important;
        color: var(--kcm-text) !important;
        box-shadow: var(--kcm-shadow) !important;
        transform: translateX(-105%) !important;
        transition: transform .24s ease !important;
        overflow: hidden !important;
        border-right: 1px solid rgba(0, 128, 0, .12) !important;
    }

    body.kobalz-category-menu-open .kobalz-category-menu-panel {
        transform: translateX(0) !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-inner {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: linear-gradient(90deg, #f8fbf8 0, #ffffff 38%, #ffffff 100%) !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-head {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        min-height: 70px !important;
        padding: 14px 34px 12px !important;
        border-bottom: 1px solid var(--kcm-line) !important;
        background: #ffffff !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-kicker {
        margin: 0 0 7px !important;
        color: var(--kcm-green-dark) !important;
        font-size: .76rem !important;
        font-weight: 900 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-head h2 {
        margin: 0 !important;
        color: var(--kcm-text) !important;
        font-size: 1.9rem !important;
        font-weight: 900 !important;
        line-height: 1.12 !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-subtitle {
        max-width: 620px !important;
        margin: 8px 0 0 !important;
        color: var(--kcm-muted) !important;
        font-size: .98rem !important;
        line-height: 1.45 !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-close {
        appearance: none !important;
        border: 1px solid var(--kcm-line) !important;
        background: #ffffff !important;
        color: var(--kcm-text) !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.65rem !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .06) !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-close:hover,
    body.kobalz-category-menu-ready .kobalz-category-menu-close:focus {
        background: var(--kcm-green-soft) !important;
        color: var(--kcm-green-dark) !important;
        border-color: #c7dec7 !important;
        outline: none !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 350px minmax(0, 1fr) !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.kobalz-category-menu-ready .kcm-main-rail {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 22px 16px 30px !important;
        border-right: 1px solid var(--kcm-line) !important;
        background: linear-gradient(180deg, #f4f8f4 0, #fbfdfb 100%) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.kobalz-category-menu-ready .kcm-rail-head {
        padding: 0 8px 9px !important;
        margin: 0 0 4px !important;
        color: var(--kcm-muted) !important;
        font-size: .74rem !important;
        font-weight: 900 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    body.kobalz-category-menu-ready .kcm-main-tab {
        appearance: none !important;
        position: relative !important;
        border: 1px solid transparent !important;
        background: transparent !important;
        color: var(--kcm-text) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 50px !important;
        padding: 12px 15px 12px 16px !important;
        border-radius: 13px !important;
        font-size: .98rem !important;
        font-weight: 850 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
    }

    body.kobalz-category-menu-ready .kcm-main-tab::after {
        content: "›" !important;
        flex: 0 0 auto !important;
        color: #9aa79a !important;
        font-size: 1.35rem !important;
        line-height: 1 !important;
        margin-left: 12px !important;
    }

    body.kobalz-category-menu-ready .kcm-main-tab:hover,
    body.kobalz-category-menu-ready .kcm-main-tab:focus {
        background: #ffffff !important;
        border-color: #d8e6d8 !important;
        color: var(--kcm-green-dark) !important;
        outline: none !important;
    }

    body.kobalz-category-menu-ready .kcm-main-tab.is-active {
        background: #ffffff !important;
        border-color: #c8dfc8 !important;
        color: var(--kcm-green-dark) !important;
        box-shadow: 0 10px 24px rgba(0, 64, 0, .08) !important;
        transform: translateX(2px) !important;
    }

    body.kobalz-category-menu-ready .kcm-main-tab.is-active::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 10px !important;
        bottom: 10px !important;
        width: 4px !important;
        border-radius: 999px !important;
        background: var(--kcm-green) !important;
    }

    body.kobalz-category-menu-ready .kcm-content-area {
        position: relative !important;
        min-width: 0 !important;
        overflow: auto !important;
        padding: 30px 38px 48px !important;
        background: #ffffff !important;
    }

    body.kobalz-category-menu-ready .kcm-category-panel {
        display: none !important;
    }

    body.kobalz-category-menu-ready .kcm-category-panel.is-active {
        display: block !important;
    }

    body.kobalz-category-menu-ready .kcm-panel-title-row {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 22px !important;
        margin: 0 0 25px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid var(--kcm-line-soft) !important;
    }

    body.kobalz-category-menu-ready .kcm-panel-kicker {
        margin: 0 0 7px !important;
        color: var(--kcm-green-dark) !important;
        font-size: .74rem !important;
        font-weight: 900 !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
    }

    body.kobalz-category-menu-ready .kcm-panel-title-row h3 {
        margin: 0 !important;
        color: #111 !important;
        font-size: 1.92rem !important;
        font-weight: 900 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    body.kobalz-category-menu-ready .kcm-all-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 0 18px !important;
        border: 1px solid #b8d6b8 !important;
        border-radius: 999px !important;
        color: var(--kcm-green-dark) !important;
        background: #ffffff !important;
        font-size: .92rem !important;
        font-weight: 900 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-shadow: 0 6px 18px rgba(0, 80, 0, .05) !important;
    }

    body.kobalz-category-menu-ready .kcm-all-link::after {
        content: "→" !important;
        margin-left: 8px !important;
        font-weight: 900 !important;
    }

    body.kobalz-category-menu-ready .kcm-all-link:hover,
    body.kobalz-category-menu-ready .kcm-all-link:focus {
        background: var(--kcm-green-soft) !important;
        color: var(--kcm-green-dark) !important;
        outline: none !important;
    }

    body.kobalz-category-menu-ready .kcm-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 22px 24px !important;
        align-items: start !important;
    }

    body.kobalz-category-menu-ready .kcm-group {
        min-width: 0 !important;
        padding: 18px 18px 15px !important;
        border: 1px solid var(--kcm-line-soft) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .035) !important;
    }

    body.kobalz-category-menu-ready .kcm-group h4 {
        position: relative !important;
        margin: 0 0 12px !important;
        padding: 0 0 11px !important;
        color: #111 !important;
        font-size: 1rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-bottom: 1px solid var(--kcm-line-soft) !important;
    }

    body.kobalz-category-menu-ready .kcm-group h4::before {
        content: "" !important;
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        margin-right: 9px !important;
        border-radius: 999px !important;
        background: var(--kcm-green) !important;
        transform: translateY(-1px) !important;
    }

    body.kobalz-category-menu-ready .kcm-group h4 a {
        display: inline !important;
        padding: 0 !important;
        color: #111 !important;
        font-size: 1rem !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    body.kobalz-category-menu-ready .kcm-group a,
    body.kobalz-category-menu-ready .kcm-category-link {
        display: block !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        color: #4f5c4f !important;
        font-size: .94rem !important;
        font-weight: 500 !important;
        line-height: 1.34 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.kobalz-category-menu-ready .kcm-group .kcm-category-link.kcm-depth-2 {
        padding-left: 14px !important;
        font-size: .91rem !important;
        color: #5d685d !important;
    }

    body.kobalz-category-menu-ready .kcm-group .kcm-category-link.kcm-depth-3,
    body.kobalz-category-menu-ready .kcm-group .kcm-category-link.kcm-depth-4,
    body.kobalz-category-menu-ready .kcm-group .kcm-category-link.kcm-depth-5 {
        padding-left: 28px !important;
        font-size: .88rem !important;
        color: #6d766d !important;
    }

    body.kobalz-category-menu-ready .kcm-single-body {
        display: block !important;
    }

    body.kobalz-category-menu-ready .kcm-empty {
        max-width: 620px !important;
        margin: 10px 0 0 !important;
        color: var(--kcm-muted) !important;
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    body.kobalz-category-menu-ready .kcm-group a:hover,
    body.kobalz-category-menu-ready .kcm-group a:focus {
        color: var(--kcm-green-dark) !important;
        text-decoration: underline !important;
        outline: none !important;
    }

    body.kobalz-category-menu-open {
        overflow: hidden !important;
    }
}

@media (min-width: 992px) and (max-width: 1240px) {
    body.kobalz-category-menu-ready .kobalz-category-menu-trigger {
        padding-left: 22px !important;
        padding-right: 22px !important;
        font-size: 16px !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-quick-link {
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 14px !important;
    }

    body.kobalz-category-menu-ready .kobalz-category-menu-body {
        grid-template-columns: 315px minmax(0, 1fr) !important;
    }

    body.kobalz-category-menu-ready .kcm-content-area {
        padding: 26px 28px 42px !important;
    }

    body.kobalz-category-menu-ready .kcm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px 18px !important;
    }

    body.kobalz-category-menu-ready .kcm-group {
        padding: 16px 15px 13px !important;
    }
}

@media (max-width: 991.98px) {
    body.kobalz-category-menu-ready .kobalz-category-menu-nav-item,
    body.kobalz-category-menu-ready .kobalz-category-menu-quick-item,
    body.kobalz-category-menu-ready .kobalz-category-menu-overlay,
    body.kobalz-category-menu-ready .kobalz-category-menu-panel {
        display: none !important;
    }
}