/* =========================================================
   Startseite | Outdoor-Saison 2026 | NOVAChild
   passt zu: div.tile innerhalb .outdoor-grid
   ========================================================= */
/* KEEPALIVE 20260703 - unsichtbarer CSS-Prüfanker */
body #product-highlights .ph-title::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body #product-highlights,
body #product-highlights * {
    box-sizing: border-box !important;
}

body #product-highlights {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto 48px auto !important;
    padding: 32px 24px 44px 24px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* Innencontainer */
body #product-highlights .ph-inner {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Video */
body #product-highlights .season-hero {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto 32px auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #000000 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(56,54,115,0.12) !important;
}

body #product-highlights .season-hero__video {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Titel */
body #product-highlights .ph-title {
    margin: 0 0 8px 0 !important;
    color: #383673 !important;
    font-size: 2rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

body #product-highlights .ph-subtitle {
    margin: 0 0 28px 0 !important;
    color: #262624 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

/* Grid */
body #product-highlights .outdoor-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Kachel ist bei dir ein DIV, kein A */
body #product-highlights .outdoor-grid > .tile {
    position: relative !important;
    display: block !important;
    min-height: 260px !important;
    width: 100% !important;
    padding: var(--tile-top-pad, 88px) 18px 72px 18px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(56,54,115,0.12) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12) !important;
}

body #product-highlights .outdoor-grid > .tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.16) !important;
}

/* Hintergrundbild */
body #product-highlights .tile__bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background-image: var(--bg) !important;
    background-size: cover !important;
    background-position: center !important;
}

body #product-highlights .tile__bg::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        90deg,
        rgba(242,242,242,0.94) 0%,
        rgba(242,242,242,0.76) 58%,
        rgba(242,242,242,0.10) 100%
    ) !important;
}

/* Textbereich */
body #product-highlights .tile__content {
    position: relative !important;
    z-index: 3 !important;
    width: 64% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Überschrift / Link */
body #product-highlights .tile__h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

body #product-highlights .tile__h2 a,
body #product-highlights .tile__link {
    color: #383673 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

body #product-highlights .tile__h2 a:hover,
body #product-highlights .tile__link:hover {
    color: #A61C28 !important;
    text-decoration: none !important;
}

/* Fließtext */
body #product-highlights .tile__p {
    margin: 0 !important;
    padding: 0 !important;
    color: #262624 !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    max-width: 34ch !important;
}

/* CTA-Button */
body #product-highlights .tile__cta {
    position: absolute !important;
    z-index: 6 !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #A61C28 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body #product-highlights .tile__cta:hover {
    background: #8f1721 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Produktbild */
body #product-highlights .tile__product {
    position: absolute !important;
    z-index: 5 !important;
    right: var(--prod-right, 10px) !important;
    top: var(--prod-top, 10px) !important;
    width: var(--prod-w, 235px) !important;
    height: var(--prod-h, 265px) !important;
    background-image: var(--prod) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: top right !important;
    transform:
        rotate(var(--prod-rot, 10deg))
        translate(var(--prod-x, 0px), var(--prod-y, -18px))
        scale(var(--prod-scale, 1)) !important;
    transform-origin: var(--prod-origin, 70% 60%) !important;
    filter:
        drop-shadow(0 18px 22px rgba(0,0,0,0.28))
        drop-shadow(0 6px 10px rgba(0,0,0,0.18)) !important;
    pointer-events: none !important;
}

/* Tablet */
@media (max-width: 991px) {
    body #product-highlights {
        padding: 28px 16px 36px 16px !important;
    }

    body #product-highlights .outdoor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    body #product-highlights .season-hero__video {
        height: 320px !important;
    }

    body #product-highlights .ph-title {
        font-size: 1.65rem !important;
    }
}

/* Mobil */
@media (max-width: 600px) {
    body #product-highlights {
        padding: 24px 12px 32px 12px !important;
    }

    body #product-highlights .outdoor-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body #product-highlights .season-hero__video {
        height: 240px !important;
    }

    body #product-highlights .outdoor-grid > .tile {
        min-height: 235px !important;
        padding-top: var(--tile-top-pad-m, 76px) !important;
    }

    body #product-highlights .tile__content {
        width: 72% !important;
    }

    body #product-highlights .tile__product {
        width: var(--prod-w-m, 190px) !important;
        height: var(--prod-h-m, 190px) !important;
    }

    body #product-highlights .tile__cta {
        font-size: 0.92rem !important;
    }
}
/* =========================================================
   HEADER / NAVIGATION | Baumarktprofi24 NOVAChild
   Finale Basisversion 1.5
   Ziel: kompakte runde Hauptnavigation, keine Unterstriche,
   Dropdown weiß mit blauer Schrift
   ========================================================= */

:root {
    --bmp24-rot: #A61C28;
    --bmp24-blau: #383673;
    --bmp24-schwarz: #262624;
    --bmp24-grau: #737372;
    --bmp24-hellgrau: #F2F2F2;
}

/* =========================================================
   Header-Grundlayout
   ========================================================= */

body header,
body #header,
body .header,
body .header-main,
body .navbar {
    background: #ffffff !important;
}

/* Logo größer und präsenter */
body header .navbar-brand img,
body header .brand img,
body header .logo img,
body .navbar-brand img {
    max-height: 76px !important;
    width: auto !important;
}

/* Logo-Bereich mit etwas Luft */
body header .navbar-brand,
body header .brand,
body header .logo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* =========================================================
   Desktop-Hauptnavigation
   ========================================================= */

@media (min-width: 992px) {

    /* Nur die sichtbare Hauptnavigation als blaue, runde Leiste */
    body header .navbar-nav,
    body #mainNavigation .navbar-nav,
    body .navbar-nav.nav-scrollbar {
        background: var(--bmp24-blau) !important;
        border-radius: 24px !important;
        padding: 5px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
        overflow: visible !important;
        box-shadow: 0 8px 20px rgba(56,54,115,0.14) !important;
        border: none !important;
    }

    /* Hauptmenüpunkt normal */
    body header .navbar-nav > .nav-item > .nav-link,
    body header .navbar-nav > li > a,
    body #mainNavigation .navbar-nav > .nav-item > .nav-link,
    body #mainNavigation .navbar-nav > li > a {
        color: #ffffff !important;
        background: var(--bmp24-blau) !important;
        font-size: 0.92rem !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        padding: 15px 16px !important;
        white-space: nowrap !important;
        border-radius: 18px !important;
        text-decoration: none !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Hauptmenüpunkt Hover / geöffnet / aktiv */
    body header .navbar-nav > .nav-item:hover > .nav-link,
    body header .navbar-nav > .nav-item.show > .nav-link,
    body header .navbar-nav > .nav-item.active > .nav-link,
    body header .navbar-nav > li:hover > a,
    body #mainNavigation .navbar-nav > .nav-item:hover > .nav-link,
    body #mainNavigation .navbar-nav > .nav-item.show > .nav-link,
    body #mainNavigation .navbar-nav > .nav-item.active > .nav-link,
    body #mainNavigation .navbar-nav > li:hover > a {
        color: var(--bmp24-blau) !important;
        background: #ffffff !important;
        text-decoration: none !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Erster und letzter Punkt bleiben sauber rund */
    body header .navbar-nav > .nav-item:first-child > .nav-link,
    body header .navbar-nav > li:first-child > a,
    body #mainNavigation .navbar-nav > .nav-item:first-child > .nav-link,
    body #mainNavigation .navbar-nav > li:first-child > a {
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
    }

    body header .navbar-nav > .nav-item:last-child > .nav-link,
    body header .navbar-nav > li:last-child > a,
    body #mainNavigation .navbar-nav > .nav-item:last-child > .nav-link,
    body #mainNavigation .navbar-nav > li:last-child > a {
        border-top-right-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    /* Alle NOVA-Unterstriche / Hover-Linien entfernen */
    body header .navbar-nav > .nav-item::before,
    body header .navbar-nav > .nav-item::after,
    body header .navbar-nav > li::before,
    body header .navbar-nav > li::after,
    body header .navbar-nav > .nav-item > .nav-link::before,
    body header .navbar-nav > .nav-item > .nav-link::after,
    body header .navbar-nav > li > a::before,
    body header .navbar-nav > li > a::after,
    body #mainNavigation .navbar-nav > .nav-item::before,
    body #mainNavigation .navbar-nav > .nav-item::after,
    body #mainNavigation .navbar-nav > li::before,
    body #mainNavigation .navbar-nav > li::after,
    body #mainNavigation .navbar-nav > .nav-item > .nav-link::before,
    body #mainNavigation .navbar-nav > .nav-item > .nav-link::after,
    body #mainNavigation .navbar-nav > li > a::before,
    body #mainNavigation .navbar-nav > li > a::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Sicherheit: keine Text-Unterstreichung bei Hover */
    body header .navbar-nav a,
    body header .navbar-nav a:hover,
    body header .navbar-nav a:focus,
    body header .navbar-nav a:active,
    body #mainNavigation .navbar-nav a,
    body #mainNavigation .navbar-nav a:hover,
    body #mainNavigation .navbar-nav a:focus,
    body #mainNavigation .navbar-nav a:active {
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /*
       Verhindert die unschöne NOVA-Überlaufsteuerung am rechten Rand.
       Sie wurde durch die bisher zu breiten Menüpunkte ausgelöst.
    */
    body header .nav-scrollbar-arrow,
    body header .nav-scrollbar-btn,
    body header .nav-scrollbar-button,
    body #mainNavigation .nav-scrollbar-arrow,
    body #mainNavigation .nav-scrollbar-btn,
    body #mainNavigation .nav-scrollbar-button {
        display: none !important;
    }


    /* =====================================================
       Dropdown / Kategoriebaum
       Hintergrund weiß, Schrift blau
       ===================================================== */

    body header .dropdown-menu,
    body header .mega-menu,
    body header .megamenu,
    body header .navbar-nav .dropdown-menu,
    body #mainNavigation .dropdown-menu,
    body #mainNavigation .mega-menu,
    body #mainNavigation .megamenu,
    body .dropdown-menu.dropdown-menu-lg-full,
    body .dropdown-menu.show {
        background: #ffffff !important;
        color: var(--bmp24-blau) !important;
        border: 1px solid rgba(56,54,115,0.14) !important;
        border-radius: 0 0 22px 22px !important;
        box-shadow: 0 18px 40px rgba(0,0,0,0.14) !important;
        padding: 28px 34px !important;
    }

    /* Große blaue Flächen im Dropdown komplett entfernen */
    body header .dropdown-menu *,
    body header .mega-menu *,
    body header .megamenu *,
    body #mainNavigation .dropdown-menu *,
    body #mainNavigation .mega-menu *,
    body #mainNavigation .megamenu *,
    body .dropdown-menu.dropdown-menu-lg-full *,
    body .dropdown-menu.show * {
        background-color: transparent !important;
    }

    /* Dropdown-Links normal: blaue Schrift auf weißem Hintergrund */
    body header .dropdown-menu a,
    body header .mega-menu a,
    body header .megamenu a,
    body #mainNavigation .dropdown-menu a,
    body #mainNavigation .mega-menu a,
    body #mainNavigation .megamenu a,
    body .dropdown-menu.dropdown-menu-lg-full a,
    body .dropdown-menu.show a {
        display: inline-block !important;
        color: var(--bmp24-blau) !important;
        background: transparent !important;
        font-size: 1.06rem !important;
        line-height: 1.35 !important;
        font-weight: 650 !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    /* Dropdown-Link Hover: dezenter Projekthinweis, kein blauer Block */
    body header .dropdown-menu a:hover,
    body header .mega-menu a:hover,
    body header .megamenu a:hover,
    body #mainNavigation .dropdown-menu a:hover,
    body #mainNavigation .mega-menu a:hover,
    body #mainNavigation .megamenu a:hover,
    body .dropdown-menu.dropdown-menu-lg-full a:hover,
    body .dropdown-menu.show a:hover {
        color: var(--bmp24-rot) !important;
        background: transparent !important;
        text-decoration: none !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* Dropdown-Überschriften / wichtige Kategoriegruppen */
    body header .dropdown-menu strong,
    body header .dropdown-menu b,
    body header .dropdown-menu .h5,
    body header .dropdown-menu .h6,
    body header .mega-menu strong,
    body header .mega-menu b,
    body header .megamenu strong,
    body header .megamenu b,
    body #mainNavigation .dropdown-menu strong,
    body #mainNavigation .dropdown-menu b,
    body #mainNavigation .dropdown-menu .h5,
    body #mainNavigation .dropdown-menu .h6,
    body .dropdown-menu.dropdown-menu-lg-full strong,
    body .dropdown-menu.dropdown-menu-lg-full b {
        color: var(--bmp24-schwarz) !important;
        background: transparent !important;
        font-size: 1.12rem !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid var(--bmp24-hellgrau) !important;
    }

    /* Unterstriche/Linien auch im Dropdown entfernen */
    body header .dropdown-menu a::before,
    body header .dropdown-menu a::after,
    body #mainNavigation .dropdown-menu a::before,
    body #mainNavigation .dropdown-menu a::after,
    body .dropdown-menu.dropdown-menu-lg-full a::before,
    body .dropdown-menu.dropdown-menu-lg-full a::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Tiefer liegende Kategorieebenen ausblenden, damit nicht der ganze Baum erschlägt */
    body header .dropdown-menu ul ul,
    body header .dropdown-menu li ul,
    body header .mega-menu ul ul,
    body header .mega-menu li ul,
    body header .megamenu ul ul,
    body header .megamenu li ul,
    body #mainNavigation .dropdown-menu ul ul,
    body #mainNavigation .dropdown-menu li ul,
    body .dropdown-menu.dropdown-menu-lg-full ul ul,
    body .dropdown-menu.dropdown-menu-lg-full li ul {
        display: none !important;
    }
}

/* Kompaktere Darstellung auf kleineren Desktop- und Notebookbreiten */
@media (min-width: 992px) and (max-width: 1499px) {
    body header .navbar-nav > .nav-item > .nav-link,
    body header .navbar-nav > li > a,
    body #mainNavigation .navbar-nav > .nav-item > .nav-link,
    body #mainNavigation .navbar-nav > li > a {
        font-size: 0.84rem !important;
        padding: 14px 11px !important;
    }
}


/* =========================================================
   Suche im Header
   ========================================================= */

body header input[type="search"],
body header .form-control {
    border: 1px solid var(--bmp24-blau) !important;
    border-radius: 10px 0 0 10px !important;
}

body header .btn,
body header button[type="submit"] {
    background: var(--bmp24-blau) !important;
    border-color: var(--bmp24-blau) !important;
    color: #ffffff !important;
    border-radius: 0 10px 10px 0 !important;
}

body header .btn:hover,
body header button[type="submit"]:hover {
    background: var(--bmp24-rot) !important;
    border-color: var(--bmp24-rot) !important;
    color: #ffffff !important;
}
/* =========================================================
   GLOBALE FARBKORREKTUR | NOVA-Gelb durch Baumarktprofi24-Rot ersetzen
   Ziel: gelbe Akzente, Linien, Fokusrahmen und aktive Zustände entfernen
   ========================================================= */

/* Primäre Akzentfarbe */
.text-primary,
.btn-link:hover,
.page-link:hover,
.consent-modal-close:hover,
.consent-modal-close:focus,
a.give-consent-preview:focus-visible,
.form-icon-trigger-label:hover,
.jqcloud-word a:hover,
.checkout-steps .step-check,
#footer a:not(.btn):hover {
    color: #A61C28 !important;
}

/* Primäre Hintergründe */
.bg-primary,
.badge-primary,
.progress-bar,
.list-group-item.active,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.badge-check .badge-circle,
.badge-circle:hover,
.badge-circle:focus,
.badge-circle-1.on-list,
.slick-arrow:hover,
.modal-header .close:hover,
.modal-header .close:focus,
.noUi-horizontal .noUi-connect,
.noUi-horizontal .noUi-handle,
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item .badge-circle {
    background-color: #A61C28 !important;
}

/* Primäre Rahmen */
.border-primary,
.btn-primary,
.btn-outline-primary,
.badge-outline-primary,
.badge-check,
.list-group-item.active,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.carousel-thumbnails .slick-slide.slick-current,
.swatches-image.active,
.swatches-text.active,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select button[data-toggle=collapse]:focus:not(.navbar-toggler),
.bootstrap-select.custom-select.show button.dropdown-toggle,
.bootstrap-select.custom-select.show button[data-toggle=collapse]:not(.navbar-toggler),
.filter-item.active .filter-img,
.filter-item:active .filter-img,
.filter-search-wrapper.input-group-selected .input-group-text,
.filter-search-wrapper.input-group-selected .filter-search,
.account-head-data .account-head-data-credit,
.form-control:focus,
.form-control:focus + .input-group-append .input-group-text {
    border-color: #A61C28 !important;
}

/* Buttons */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) {
    background-color: #A61C28 !important;
    border-color: #A61C28 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #8f1721 !important;
    border-color: #8f1721 !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: #A61C28 !important;
    border-color: #A61C28 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler) {
    color: #ffffff !important;
    background-color: #A61C28 !important;
    border-color: #A61C28 !important;
}

/* Gelbe Fokus-Schatten entfernen */
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.noUi-horizontal .noUi-handle {
    box-shadow: 0 0 0 0.2rem rgba(166, 28, 40, 0.22) !important;
}

/* Gelbe Linien / aktive Unterstriche */
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after,
.tab-navigation .nav-link::after,
.productlist-filter-categories > .nav-item > .nav-link::before,
aside .nav-panel > .nav > .active > .nav-link {
    border-color: #A61C28 !important;
    background: #A61C28 !important;
}

/* Animierte Button-Flächen */
.btn-animated .btn-outline-primary::after,
.btn-animated .btn-outline-primary:hover::after {
    background: #A61C28 !important;
}

/* Loader / RMA */
#rmaStickyPositions.loadingAJAX::after,
#rmaStickyPositions.loadingAJAX::before {
    border-color: #A61C28 #A61C28 transparent transparent !important;
}

/* Harte Absicherung gegen typische NOVA-Gelbwerte */
[style*="#f8bf00"],
[style*="#F8BF00"],
[style*="248, 191, 0"] {
    border-color: #A61C28 !important;
}
/* =========================================================
   KATEGORIEMENÜ / HOVER-FIX | Baumarktprofi24
   Ziel: gelbe Hover-Effekte entfernen,
   Kategoriebaum blau mit weißer Schrift
   ========================================================= */

:root {
    --bmp24-rot: #A61C28;
    --bmp24-blau: #383673;
    --bmp24-schwarz: #262624;
    --bmp24-grau: #737372;
    --bmp24-hellgrau: #F2F2F2;
}

/* =========================================================
   01 | Gelbe Hover-Linien und Akzente neutralisieren
   ========================================================= */

.nav-link::before,
.nav-link::after,
.dropdown-toggle::before,
.dropdown-toggle::after,
.tab-navigation .nav-link::after,
.productlist-filter-categories > .nav-item > .nav-link::before,
aside .nav-panel > .nav > .active > .nav-link,
.snippets-categories-nav-link-child::before,
.snippets-categories-nav-link-child::after {
    border-color: var(--bmp24-rot) !important;
    background: var(--bmp24-rot) !important;
    box-shadow: none !important;
}

/* Gelbe Fokus-Schatten ersetzen */
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select button[data-toggle=collapse]:focus:not(.navbar-toggler) {
    border-color: var(--bmp24-rot) !important;
    box-shadow: 0 0 0 0.2rem rgba(166, 28, 40, 0.22) !important;
}

/* =========================================================
   02 | Kategoriebaum: aktiv/geöffnet blau mit weißer Schrift
   betrifft: snippets-categories-collapse / Kategoriebox
   ========================================================= */

/* Aktive Hauptkategorie */
.snippets-categories-collapse .nav-item.active > .nav-link,
.snippets-categories-collapse .nav-item.active > span.nav-link,
.snippets-categories-collapse .nav-item.active > span.nav-link > a {
    background: var(--bmp24-blau) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    border: none !important;
}

/* Geöffnete Dropdown-Kategorie */
.snippets-categories-collapse .nav-item.dropdown > .nav-link[aria-expanded="true"],
.snippets-categories-collapse .nav-item.dropdown > span.nav-link[aria-expanded="true"],
.snippets-categories-collapse .nav-item.dropdown > span.nav-link[aria-expanded="true"] > a {
    background: var(--bmp24-blau) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    border: none !important;
}

/* Normale Kategorie-Links */
.snippets-categories-collapse .nav-link,
.snippets-categories-collapse .snippets-categories-nav-link-child,
.snippets-categories-collapse .snippets-categories-nav-link-child a {
    color: var(--bmp24-blau) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: none !important;
}

/* Hover im Kategoriebaum */
.snippets-categories-collapse .nav-link:hover,
.snippets-categories-collapse .snippets-categories-nav-link-child:hover,
.snippets-categories-collapse .snippets-categories-nav-link-child:hover a,
.snippets-categories-collapse span.nav-link:hover,
.snippets-categories-collapse span.nav-link:hover > a {
    background: var(--bmp24-blau) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}

/* Links innerhalb aktiver/geöffneter Kategorien weiß halten */
.snippets-categories-collapse .nav-item.active > .nav-link a,
.snippets-categories-collapse .nav-item.active > span.nav-link a,
.snippets-categories-collapse .nav-item.dropdown > span.nav-link[aria-expanded="true"] a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Unterkategorien leicht einrücken, aber nicht rot einfärben */
.snippets-categories-collapse ul ul .nav-link,
.snippets-categories-collapse ul ul .snippets-categories-nav-link-child {
    color: var(--bmp24-blau) !important;
    background: transparent !important;
    padding-left: 18px !important;
}

/* Unterkategorien Hover ebenfalls blau/weiß */
.snippets-categories-collapse ul ul .nav-link:hover,
.snippets-categories-collapse ul ul .snippets-categories-nav-link-child:hover {
    background: var(--bmp24-blau) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

/* Gelbe/rote Unterstriche im Kategoriebaum komplett entfernen */
.snippets-categories-collapse .nav-link::before,
.snippets-categories-collapse .nav-link::after,
.snippets-categories-collapse .snippets-categories-nav-link-child::before,
.snippets-categories-collapse .snippets-categories-nav-link-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pfeile / Dropdown-Indikatoren farblich passend */
.snippets-categories-collapse .dropdown-toggle::after {
    color: inherit !important;
    border-top-color: currentColor !important;
}

/* =========================================================
   KATEGORIEBOX LINKS | Active + Hover sauber in Hausfarben
   Ziel: kein Rot/Gelb in der Kategoriebox, aktiv/hover blau mit weißer Schrift
   ========================================================= */

/* Aktiver Hauptpunkt in der linken Kategoriebox */
aside .nav-panel > .nav > .nav-item.active > .nav-link,
aside .nav-panel > .nav > .nav-item.active > span.nav-link,
aside .nav-panel .nav-item.active > .nav-link,
aside .nav-panel .nav-item.active > span.nav-link,
.box-categories .nav-item.active > .nav-link,
.box-categories .nav-item.active > span.nav-link,
.snippets-categories .nav-item.active > .nav-link,
.snippets-categories .nav-item.active > span.nav-link {
    background: #383673 !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Link innerhalb aktiver Kategorie ebenfalls weiß */
aside .nav-panel .nav-item.active > .nav-link a,
aside .nav-panel .nav-item.active > span.nav-link a,
.box-categories .nav-item.active > .nav-link a,
.box-categories .nav-item.active > span.nav-link a,
.snippets-categories .nav-item.active > .nav-link a,
.snippets-categories .nav-item.active > span.nav-link a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hover in der Kategoriebox: blau mit weißer Schrift */
aside .nav-panel .nav-link:hover,
aside .nav-panel span.nav-link:hover,
aside .nav-panel .nav-link:hover a,
aside .nav-panel span.nav-link:hover a,
.box-categories .nav-link:hover,
.box-categories span.nav-link:hover,
.box-categories .nav-link:hover a,
.box-categories span.nav-link:hover a,
.snippets-categories .nav-link:hover,
.snippets-categories span.nav-link:hover,
.snippets-categories .nav-link:hover a,
.snippets-categories span.nav-link:hover a,
.snippets-categories-nav-link-child:hover,
.snippets-categories-nav-link-child:hover a {
    background: #383673 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Normale Kategorie-Links: blau auf hellem Hintergrund */
aside .nav-panel .nav-link,
aside .nav-panel span.nav-link,
aside .nav-panel .nav-link a,
aside .nav-panel span.nav-link a,
.box-categories .nav-link,
.box-categories span.nav-link,
.box-categories .nav-link a,
.box-categories span.nav-link a,
.snippets-categories .nav-link,
.snippets-categories span.nav-link,
.snippets-categories .nav-link a,
.snippets-categories span.nav-link a,
.snippets-categories-nav-link-child {
    color: #383673 !important;
    text-decoration: none !important;
}

/* Gelbe/rote Linien in der Kategoriebox vollständig entfernen */
aside .nav-panel .nav-link::before,
aside .nav-panel .nav-link::after,
aside .nav-panel span.nav-link::before,
aside .nav-panel span.nav-link::after,
.box-categories .nav-link::before,
.box-categories .nav-link::after,
.snippets-categories .nav-link::before,
.snippets-categories .nav-link::after,
.snippets-categories-nav-link-child::before,
.snippets-categories-nav-link-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pfeil im aktiven/hover Zustand weiß */
aside .nav-panel .nav-item.active > span.nav-link.dropdown-toggle::after,
aside .nav-panel span.nav-link.dropdown-toggle:hover::after,
.box-categories .nav-item.active > span.nav-link.dropdown-toggle::after,
.box-categories span.nav-link.dropdown-toggle:hover::after,
.snippets-categories .nav-item.active > span.nav-link.dropdown-toggle::after,
.snippets-categories span.nav-link.dropdown-toggle:hover::after {
    border-top-color: #ffffff !important;
    color: #ffffff !important;
}

/* =========================================================
   PRODUKTDETAILSEITE | Mobile Kaufansicht
   JTL-Shop 5.7.2 / NOVA / NOVA-Child
   Ziel: Titel oben, Bild + Kaufdaten nebeneinander,
   Warenkorb und Kurzbeschreibung anschließend in voller Breite
   ========================================================= */
@media (max-width: 767.98px) {
    /* Nur die reguläre Produktseite verändern, nicht die Schnellansicht. */
    #buy_form #product-offer.product-detail {
        display: grid !important;
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr) !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Die NOVA-Zwischencontainer für das mobile Raster durchlässig machen. */
    #buy_form #product-offer > .product-info,
    #buy_form #product-offer > .product-info > .product-info-inner,
    #buy_form #product-offer > .product-info > .product-info-inner > .product-offer {
        display: contents !important;
    }

    /* Produktname steht über der gesamten Kaufansicht. */
    #buy_form #product-offer .product-headline {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin: 0 0 6px 0 !important;
    }

    #buy_form #product-offer .product-title {
        margin: 0 !important;
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
    }

    /* Bewertung und Artikelnummer kompakt direkt unter dem Namen. */
    #buy_form #product-offer .rating-wrapper {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin: 0 0 4px 0 !important;
    }

    #buy_form #product-offer .info-essential {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        margin: 0 0 10px 0 !important;
        font-size: 0.8125rem !important;
        line-height: 1.3 !important;
    }

    /* Mobil nur die kaufrelevante Artikelnummer zeigen. */
    #buy_form #product-offer .info-essential > li:not(.product-sku) {
        display: none !important;
    }

    /* Freigestelltes Hauptbild links. */
    #buy_form #product-offer > .product-gallery {
        grid-column: 1 !important;
        grid-row: 4 !important;
        align-self: start !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #buy_form #product-offer .product-gallery .product-thumbnails-wrapper {
        display: none !important;
    }

    #buy_form #product-offer #image_wrapper,
    #buy_form #product-offer #gallery {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Preis, Steuer-/Versandhinweis, Bestand und Lieferzeit rechts. */
    #buy_form #product-offer .product-offer > .row:has(.stock-information) {
        grid-column: 2 !important;
        grid-row: 4 !important;
        align-self: start !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #buy_form #product-offer .product-offer > .row:has(.stock-information) > [class*="col"] {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }

    #buy_form #product-offer .price_wrapper {
        margin-bottom: 8px !important;
    }

    #buy_form #product-offer .price_wrapper .price {
        font-size: 1.5rem !important;
        line-height: 1.15 !important;
    }

    #buy_form #product-offer .vat_info,
    #buy_form #product-offer .delivery-status,
    #buy_form #product-offer .stock-information {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    #buy_form #product-offer .question-on-item {
        display: none !important;
    }

    /* Varianten bleiben funktionsfähig und erhalten die volle Breite. */
    #buy_form #product-offer .product-offer > .variations,
    #buy_form #product-offer .product-offer > .row.variations {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;
        width: 100% !important;
        margin: 14px 0 0 0 !important;
    }

    /* Konfigurationen und produktspezifische Uploadfelder ebenfalls vollbreit. */
    #buy_form #product-offer .product-offer > .row:not(.variations):not(:has(.stock-information)),
    #buy_form #product-offer .product-offer > .product-uploads {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Großer Kaufbereich über die gesamte Bildschirmbreite. */
    #buy_form #product-offer #add-to-cart {
        grid-column: 1 / -1 !important;
        grid-row: 7 !important;
        width: 100% !important;
        margin: 14px 0 0 0 !important;
    }

    #buy_form #product-offer #add-to-cart .basket-form-inline {
        width: 100% !important;
        margin: 0 !important;
    }

    #buy_form #product-offer #add-to-cart .choose_quantity {
        max-width: 150px !important;
        margin: 0 auto 10px auto !important;
    }

    #buy_form #product-offer #add-to-cart button[type="submit"] {
        width: 100% !important;
        min-height: 48px !important;
        font-weight: 700 !important;
    }

    /* Vorteile/Kurzbeschreibung erst nach dem Kaufbereich anzeigen. */
    #buy_form #product-offer .shortdesc {
        grid-column: 1 / -1 !important;
        grid-row: 8 !important;
        width: 100% !important;
        margin: 18px 0 0 0 !important;
        padding: 14px 0 !important;
        border-top: 1px solid #e5e5e5 !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    #buy_form #product-offer .shortdesc > :last-child {
        margin-bottom: 0 !important;
    }
}

/* Sehr schmale Geräte: Bild und Kaufdaten wieder sicher untereinander. */
@media (max-width: 349.98px) {
    #buy_form #product-offer.product-detail {
        grid-template-columns: 1fr !important;
    }

    #buy_form #product-offer > .product-gallery {
        grid-column: 1 !important;
        grid-row: 4 !important;
        max-width: 220px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    #buy_form #product-offer .product-offer > .row:has(.stock-information) {
        grid-column: 1 !important;
        grid-row: 5 !important;
        margin-top: 12px !important;
    }

    #buy_form #product-offer .product-offer > .variations,
    #buy_form #product-offer .product-offer > .row.variations {
        grid-row: 6 !important;
    }

    #buy_form #product-offer #add-to-cart {
        grid-row: 8 !important;
    }

    #buy_form #product-offer .shortdesc {
        grid-row: 9 !important;
    }
}

/* =========================================================
   DARSTELLUNGSKORREKTUR | Merkmalswerte und Dropdown-Pfeile
   Verhindert rote Flächen hinter Produktmerkmalen sowie den
   Pfeilen bei "Sortierung" und "Artikel pro Seite".
   ========================================================= */

/* Bootstrap-Dropdown-Pfeil wieder als sauberer Pfeil darstellen. */
.dropdown-toggle::after {
    background: transparent !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 0.3em solid currentColor !important;
    border-right: 0.3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: 0.3em solid transparent !important;
}

/* Verlinkte Produktmerkmale als gut lesbaren Text statt roter Badge-Fläche. */
.product-attributes .attr-characteristic a,
.product-attributes td.attr-characteristic a,
.product-attributes .attr-characteristic .badge,
.product-attributes td.attr-characteristic .badge {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--bmp24-blau, #383673) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: inherit !important;
}

.product-attributes .attr-characteristic a:hover,
.product-attributes td.attr-characteristic a:hover {
    color: var(--bmp24-rot, #A61C28) !important;
    text-decoration: underline !important;
}

/* =========================================================
   HEADER-NAVIGATION | verbindlicher Abschluss-Fix
   NOVA 5: .nav-scrollbar-inner > .nav-scrollbar-item
   ========================================================= */
@media (min-width: 992px) {
    body #mainNavigation ul.navbar-nav.nav-scrollbar-inner {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body #mainNavigation ul.navbar-nav.nav-scrollbar-inner
    > li.nav-item.nav-scrollbar-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        font-size: 14px !important;
    }

    body #mainNavigation ul.navbar-nav.nav-scrollbar-inner
    > li.nav-item.nav-scrollbar-item
    > a.nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 12px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 992px) and (max-width: 1499px) {
    body #mainNavigation ul.navbar-nav.nav-scrollbar-inner
    > li.nav-item.nav-scrollbar-item {
        font-size: 13px !important;
    }

    body #mainNavigation ul.navbar-nav.nav-scrollbar-inner
    > li.nav-item.nav-scrollbar-item
    > a.nav-link {
        padding: 13px 9px !important;
        font-size: 13px !important;
    }
}