/*
 * Lichterglanz Child-Overrides
 * Header V2: dunkles Header-Band mit Bordeaux-Topbar.
 */

:root {
    --lg-gold: #E6A817;
    --lg-gold-hover: #C8920E;
    --lg-gold-tint: #FBF3DE;
    --lg-brand: #4F0810;
    --lg-brand-hover: #6E101C;
    --lg-brand-tint: #F9F0F1;
    --lg-header-bg: #141414;
    --lg-stage-black: #000000;
    --lg-ui-anthracite: #1C1D2C;
    --lg-text: #3A3A3A;
    --lg-text-muted: #6B6B6B;
    --lg-white: #FFFFFF;
    --lg-bg-warm: #F7F4F0;
    --lg-border: #E5E7EB;
    --lg-benefit-muted: #B8B4B0;
    --lg-success: #2E7D32;
    --lg-danger: #C8102E;
    --lg-warning: #A56823;
    --lg-focus: rgba(230, 168, 23, .45);
    --lg-topbar-separator: rgba(255, 255, 255, .15);
    --lg-cta: var(--lg-gold);
    --lg-cta-hover: var(--lg-gold-hover);
    --lg-cta-text: #1A1A1A;
}

.btn-primary {
    color: var(--lg-cta-text);
    background-color: var(--lg-cta);
    border-color: var(--lg-cta);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: var(--lg-cta-text);
    background-color: var(--lg-cta-hover);
    border-color: var(--lg-cta-hover);
}

.attr-characteristica,
.content-wrapper a,
a.nice-deco {
    color: var(--lg-brand);
}

.attr-characteristica::before,
.attr-characteristica::after,
.content-wrapper a::before,
.content-wrapper a::after,
a.nice-deco::before,
a.nice-deco::after {
    background-color: var(--lg-brand);
}

/* Header-Rahmen */
#jtl-nav-wrapper,
header {
    background: var(--lg-header-bg);
    color: var(--lg-white);
    box-shadow: none;
}

#jtl-nav-wrapper .hide-navbar,
#jtl-nav-wrapper .hide-navbar > .navbar,
#jtl-nav-wrapper .menu-center-Y,
#jtl-nav-wrapper .menu-center-N,
#jtl-nav-wrapper .menu-multiple-rows-single,
#jtl-nav-wrapper .menu-multiple-rows-multiple {
    background: var(--lg-header-bg);
}

#header-top-bar a:not(.dropdown-item):not(.btn),
header a:not(.dropdown-item):not(.btn) {
    color: var(--lg-white);
    text-decoration: none;
}

#header-top-bar a:not(.dropdown-item):not(.btn):hover,
#header-top-bar a:not(.dropdown-item):not(.btn):focus,
header a:not(.dropdown-item):not(.btn):hover,
header a:not(.dropdown-item):not(.btn):focus {
    color: var(--lg-gold);
}

/* Topbar */
#header-top-bar.lg-topbar {
    min-height: 42px;
    background: var(--lg-brand);
    border-bottom: 0;
    color: var(--lg-white);
}

#header-top-bar .container,
#header-top-bar .container-fluid {
    width: 100%;
}

#header-top-bar .lg-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 42px;
}

#header-top-bar .lg-topbar-left,
#header-top-bar .lg-topbar-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

#header-top-bar .topbar-main,
#header-top-bar .topbar-note,
#header-top-bar #shop-nav {
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}

#header-top-bar .lg-topbar-left .nav-link,
#header-top-bar #shop-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .75rem;
    color: var(--lg-white);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

#header-top-bar .lg-topbar-left .nav-link:hover,
#header-top-bar .lg-topbar-left .nav-link:focus,
#header-top-bar #shop-nav .nav-link:hover,
#header-top-bar #shop-nav .nav-link:focus {
    color: var(--lg-gold);
}

#header-top-bar #shop-nav .fas {
    color: currentColor;
    font-size: 1rem;
}

#header-top-bar .lg-topbar-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    width: 1.1rem;
    height: 1.1rem;
}

#header-top-bar .lg-topbar-service-icon svg {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#header-top-bar #shop-nav .fa-user,
#header-top-bar #shop-nav .fa-heart,
#header-top-bar #shop-nav .fa-user-check {
    font-weight: 400;
}

#header-top-bar #shop-nav .fa-user-check::before {
    content: "\f007";
}

#header-top-bar #shop-nav .fa-shopping-cart::before {
    color: transparent;
    -webkit-text-stroke: .9px currentColor;
}

#header-top-bar #shop-nav .account-icon-dropdown > .nav-link::after {
    content: "Mein Konto";
}

#header-top-bar #shop-nav #shop-nav-wish > .nav-link::after {
    content: "Merkliste";
}

#header-top-bar #shop-nav #shop-nav-compare > .nav-link::after {
    content: "Vergleich";
}

#header-top-bar #shop-nav .cart-icon-dropdown-icon::after {
    content: "Warenkorb";
    margin-left: .45rem;
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 600;
    -webkit-text-stroke: 0;
}

#header-top-bar #shop-nav .cart-icon-dropdown-price {
    margin-left: .15rem;
    color: currentColor;
    font-weight: 700;
}

#header-top-bar #shop-nav .badge {
    background: var(--lg-gold);
    color: var(--lg-cta-text);
}

#header-top-bar #shop-nav .dropdown-menu {
    margin-top: 0;
}

#header-top-bar .nav-dividers .nav-item:not(:last-child)::after {
    color: var(--lg-topbar-separator);
    opacity: 1;
}

/* Hauptheader */
#jtl-nav-wrapper .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    padding: 0;
}

#jtl-nav-wrapper .navbar-brand img {
    width: auto;
    height: 100px;
    max-height: 100px;
}

#jtl-nav-wrapper .lg-header-benefit {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 175px;
    color: var(--lg-white);
    line-height: 1.2;
}

#jtl-nav-wrapper .lg-header-benefit-icon {
    color: var(--lg-gold);
    flex: 0 0 auto;
    font-size: 1.2rem;
}

#jtl-nav-wrapper .lg-header-benefit-copy {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    white-space: nowrap;
}

#jtl-nav-wrapper .lg-header-benefit-copy strong {
    color: var(--lg-white);
    font-size: .875rem;
    font-weight: 700;
}

#jtl-nav-wrapper .lg-header-benefit-copy span {
    color: var(--lg-benefit-muted);
    font-size: .8125rem;
    font-weight: 400;
}

#jtl-nav-wrapper #search,
#jtl-nav-wrapper .search-wrapper,
#jtl-nav-wrapper .search-wrapper form,
#jtl-nav-wrapper .form-icon,
#jtl-nav-wrapper .input-group {
    width: 100%;
}

#jtl-nav-wrapper .main-search-wrapper .form-control {
    height: 44px;
    background: var(--lg-white);
    border: 0;
    color: var(--lg-text);
    box-shadow: none;
}

#jtl-nav-wrapper .main-search-wrapper .form-control::placeholder {
    color: var(--lg-text-muted);
    opacity: 1;
}

#jtl-nav-wrapper .main-search-wrapper .btn-secondary {
    min-width: 54px;
    background: var(--lg-gold);
    border-color: var(--lg-gold);
    color: var(--lg-cta-text);
}

#jtl-nav-wrapper .main-search-wrapper .btn-secondary:hover,
#jtl-nav-wrapper .main-search-wrapper .btn-secondary:focus {
    background: var(--lg-gold-hover);
    border-color: var(--lg-gold-hover);
    color: var(--lg-cta-text);
}

#jtl-nav-wrapper .form-clear {
    color: var(--lg-text-muted);
}

/* Hauptnavigation */
#mainNavigation {
    background: var(--lg-header-bg);
}

#mainNavigation .navbar-nav > .nav-item > .nav-link,
#mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link {
    color: var(--lg-white);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    padding: 1rem 1.25rem;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link::before,
#mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link::before {
    display: none;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
#mainNavigation .navbar-nav > .nav-item > .nav-link:focus,
#mainNavigation .navbar-nav > .nav-item.active > .nav-link,
#mainNavigation .navbar-nav > .nav-item.show > .nav-link,
#mainNavigation .navbar-nav > .nav-item.hover > .nav-link,
#mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:hover,
#mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:focus,
#mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link,
#mainNavigation .nav-scrollbar-inner > .nav-item.show > .nav-link,
#mainNavigation .nav-scrollbar-inner > .nav-item.hover > .nav-link {
    color: var(--lg-gold);
    background: transparent;
    border-bottom-color: var(--lg-gold);
}

#mainNavigation .dropdown-full > .dropdown-menu,
#mainNavigation .dropdown-menu {
    background: var(--lg-white);
    border: 0;
    border-top: 3px solid var(--lg-gold);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    padding: 1.25rem 1.5rem;
}

#mainNavigation .dropdown-menu a,
#mainNavigation .dropdown-menu .nav-link,
#mainNavigation .dropdown-menu .dropdown-item,
#mainNavigation .categories-recursive-link {
    color: var(--lg-text);
}

#mainNavigation .dropdown-menu a:hover,
#mainNavigation .dropdown-menu a:focus,
#mainNavigation .dropdown-menu .nav-link:hover,
#mainNavigation .dropdown-menu .nav-link:focus,
#mainNavigation .dropdown-menu .dropdown-item:hover,
#mainNavigation .dropdown-menu .dropdown-item:focus,
#mainNavigation .categories-recursive-link:hover,
#mainNavigation .categories-recursive-link:focus {
    color: var(--lg-brand);
}

#mainNavigation .submenu-headline,
#mainNavigation .nav-mega-heading {
    color: var(--lg-brand);
    font-weight: 600;
}

/* Slider-Buehne */
.slider-wrapper,
#slider,
.nivoSlider,
.slick-slider {
    background: var(--lg-stage-black);
}

.slider-wrapper .slick-arrow,
.slider-wrapper .nivo-directionNav a {
    color: var(--lg-white);
}

.slider-wrapper .slick-arrow:hover,
.slider-wrapper .slick-arrow:focus,
.slider-wrapper .nivo-directionNav a:hover,
.slider-wrapper .nivo-directionNav a:focus {
    color: var(--lg-gold);
}

.slider-wrapper .slick-dots li button {
    border-color: var(--lg-white);
    background: var(--lg-white);
}

.slider-wrapper .slick-dots li.slick-active button {
    border-color: var(--lg-gold);
    background: var(--lg-gold);
}

.slider-wrapper .slick-dots:has(li:only-child),
.slider-wrapper .btn-pause:only-child {
    display: none;
}

#consent-manager {
    bottom: 1rem;
}

@media (min-width: 992px) {
    #jtl-nav-wrapper .hide-navbar > .navbar {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(360px, 520px) minmax(520px, 1fr);
        align-items: center;
        justify-content: stretch;
        column-gap: clamp(1rem, 2vw, 2.25rem);
        min-height: 122px;
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        justify-self: start;
        align-self: center;
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        text-align: left;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper,
    #jtl-nav-wrapper .logo-wrapper {
        width: auto;
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }

    #jtl-nav-wrapper .lg-header-benefits {
        align-items: center;
        justify-self: center;
        width: auto;
        max-width: 520px;
        justify-content: center;
        gap: 1.75rem;
        padding-right: .75rem;
        padding-left: .75rem;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        justify-self: end;
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }

    #jtl-nav-wrapper .main-search-wrapper #search,
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper {
        width: 100%;
        margin-right: 0;
    }

    #mainNavigation .nav-mobile-body {
        background: var(--lg-header-bg);
    }
}

@media (max-width: 991.98px) {
    #header-top-bar .lg-topbar-inner {
        justify-content: space-between;
        overflow: hidden;
    }

    #header-top-bar .lg-topbar-left .lg-topbar-service:not(:first-child),
    #header-top-bar #shop-nav > .nav-item:not(.account-icon-dropdown),
    #header-top-bar #shop-nav > li:not(.account-icon-dropdown) {
        display: none;
    }

    #header-top-bar .lg-topbar-left .nav-link,
    #header-top-bar #shop-nav .nav-link {
        padding: .55rem .55rem;
        font-size: .8125rem;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar {
        min-height: 86px;
        background: var(--lg-header-bg);
    }

    #jtl-nav-wrapper .navbar-toggler,
    #jtl-nav-wrapper .search-wrapper-dropdown > .nav-link,
    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link {
        color: var(--lg-white);
    }

    #jtl-nav-wrapper .navbar-brand img {
        height: 72px;
        max-height: 72px;
    }

    #mainNavigation,
    #mainNavigation .nav-mobile-header,
    #mainNavigation .nav-mobile-body {
        background: var(--lg-white);
        color: var(--lg-text);
    }

    #mainNavigation .nav-mobile-heading,
    #mainNavigation .nav-offcanvas-title {
        color: var(--lg-text);
    }

    #mainNavigation .navbar-nav > .nav-item > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link {
        color: var(--lg-text);
        border-bottom-color: var(--lg-border);
    }

    #mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
    #mainNavigation .navbar-nav > .nav-item > .nav-link:focus,
    #mainNavigation .navbar-nav > .nav-item.active > .nav-link,
    #mainNavigation .navbar-nav > .nav-item.show > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:hover,
    #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:focus,
    #mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link,
    #mainNavigation .nav-scrollbar-inner > .nav-item.show > .nav-link {
        color: var(--lg-brand);
        border-bottom-color: var(--lg-gold);
    }
}
