/*
  Its-ck-anpassungen
 */
 
 .sub-categories .caption {
                width: 100%;
                display: flex;
}

.sub-categories .caption a {
                background: var(--primary);
                color: #fff;
                text-decoration: none;
                padding: 10px;
                width: 100%;
}

.sub-categories .caption a:hover {
                opacity: 80%;
}

.sub-categories {
                box-shadow: 0px 2px 7px 0px #DDD !important;
                padding: 10px;
}

.productbox-title .text-clamp-2 {
                text-decoration: none;
                color: var(--primary);
                font-weight: 600;
}

.productbox-title .text-clamp-2 {
                text-decoration: none;
                color: var(--primary);
                font-weight: 600;
}

.productbox-title .text-clamp-2:hover {
                color: var(--secondary);
}

#footer .box-content-wrapper a {
                text-decoration: none;
}

.item-slider-desc.text-clamp-2 span {
                color: var(--primary);
                text-decoration: none;
                font-weight: 600;
}

.item-slider-desc.text-clamp-2 span:hover {
                color: var(--secondary);
}

.product-wrapper.product-wrapper-product.text-center-util.slick-slide a {
                text-decoration: none;
}

.product-category.word-break a {
                color: var(--primary);
                text-decoration: none;
                font-weight: 600;
}

.product-category.word-break a:hover {
                color: var(--secondary);
}
 
 :root {
    --primary-color: #1479b8;
    --secondary-color: #f07d07;
}
 #header-top-bar .nav.topbar-main:last-child {
	display: ;
	padding-right: 53rem;
}
/* =====================================================
   Suchfeld-Optimierung – minimalistisch, abgerundet
   ===================================================== */

/* --- Layout-Fix: Typeahead + Input-Group inline halten --- */
#search .search-wrapper .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    border: none !important;
    border-radius: 50px !important;
    overflow: hidden;
    background-color: #f0f0f0 !important;
}

#search .search-wrapper .input-group .twitter-typeahead {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* --- Eingabefeld: grauer Hintergrund, abgerundet links --- */
#search .search-wrapper .input-group .twitter-typeahead .form-control.ac_input.tt-input,
#search .search-wrapper .input-group .twitter-typeahead .form-control.ac_input.tt-hint {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    padding-left: 1.25rem;
}

/* --- Such-Button: transparent, Icon dezent im Feld --- */
#search .search-wrapper .input-group .input-group-append {
    display: flex !important;
    margin-left: 0 !important;
}

#search .search-wrapper .input-group .input-group-append .btn.btn-secondary {
    background-color: transparent !important;
    border: none !important;
    color: #888 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.375rem 1rem;
}

#search .search-wrapper .input-group .input-group-append .btn.btn-secondary:hover {
    background-color: transparent !important;
    color: #555 !important;
}

/* --- Suchbereich: schmaler + rechts ausgerichtet --- */
#search {
    flex-grow: 0 !important;
    max-width: 50% !important;
    margin-left: auto !important;
}
#jtl-nav-wrapper > .menu-center-center {
    max-width: 100% !important;
    background-color: var(--primary-color);
    border-bottom: 5px solid var(--secondary-color);
}

/* -----------------------------------------------
   2. #mainNavigation hat overflow:hidden – das
   clippt jede Erweiterung nach unten.
   Auf visible setzen, damit die Items nahtlos
   bis zur Container-Border reichen.
   ----------------------------------------------- */
#mainNavigation,
#mainNavigation .navbar-nav {
    overflow: visible !important;
}

/* -----------------------------------------------
   3. Textfarbe der Nav-Links → weiß
   ----------------------------------------------- */
#mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link {
    color: #fff !important;
}

/* -----------------------------------------------
   4. Hover / Focus – Secondary-Hintergrund
   auf dem gesamten <li>, sodass Primary
   komplett verdeckt wird
   ----------------------------------------------- */
#mainNavigation .navbar-nav > .nav-scrollbar-item:hover {
    background-color: var(--secondary-color);
    box-shadow: 0 5px 0 0 var(--secondary-color);
}

#mainNavigation .navbar-nav > .nav-scrollbar-item:hover > .nav-link {
    color: #fff !important;
}

/* -----------------------------------------------
   5. Aktiver Zustand – Dropdown offen
   ----------------------------------------------- */
#mainNavigation .navbar-nav > .nav-scrollbar-item.show {
    background-color: var(--secondary-color);
    box-shadow: 0 5px 0 0 var(--secondary-color);
}

#mainNavigation .navbar-nav > .nav-scrollbar-item.show > .nav-link {
    color: #fff !important;
}

/* -----------------------------------------------
   6. Scroll-Pfeile links/rechts in weiß
   ----------------------------------------------- */
#mainNavigation .nav-scrollbar-arrow {
    color: #fff;
}

/* -----------------------------------------------
   7. Abstand unterhalb der Navigation (~2-3 rem)
   ----------------------------------------------- */
#jtl-nav-wrapper {
    margin-bottom: 2.5rem;
}
header .navbar-nav > .nav-item > .nav-link::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 0 6px;
	border-color: var(--secondary-color);
	border-style: solid;
	transition: width .4s;
	width: 0;
}
#jtl-nav-wrapper {
	/* margin-bottom: 2.5rem; */
	padding-bottom: 2.5rem;
}
#jtl-nav-wrapper {
    margin-bottom: 2.5rem;
    box-shadow: none !important;
}