/**
 * LEDTEK Sticky-Nav (.cat-stickynav)
 * Mindesthöhe reservieren – die Margin-Synchronisation (Unterkante fixieren)
 * macht das JS (stickynav.js), da CSS die eigene Höhe nicht als Margin
 * referenzieren kann.
 */
.cat-stickynav {
	min-height: 70px;
}
.cat-stickynav.elementor-sticky--effects{
	background:#333; 
	transition: background 0s ease;
	min-height: 40px;
	padding: 0px;
}


.cat-stickynav.elementor-sticky--effects:before{
    background-image: none !important;
}

.cat-stickynav.elementor-sticky--effects .elementor-item {
    font-size: 12px!important; 
    padding-top: 3px!important; 
    padding-bottom: 3px!important; 
    transition: all .3s ease!important;
}
.cat-stickynav .elementor-nav-menu--dropdown{
	background-color:transparent!important;
	border:0!important;
	box-shadow:none!important;
}
.cat-stickynav .elementor-nav-menu--dropdown .elementor-sub-item{
	background-color:#EDEDED !important;
	border-radius:100px !important;
	margin:4px !important;
	display:block !important;
}

@media (max-width: 768px) {
	.cat-stickynav .elementor-sticky--effects{
		background-color:#333;
	}
	.cat-stickynav.elementor-sticky--effects .elementor-element .elementor-widget-container{
	margin-bottom: 0px;
}
}



/* HANDY (≤767px): kompakte, horizontal wischbare EINE Zeile (spart eine Zeile
   Höhe – zählt doppelt, weil die Leiste sticky mitläuft). Die Wisch-Pfeile und
   das Mausrad-Horizontalscrollen kommen aus stickynav.js. */
@media (max-width: 1024px) {
	.cat-stickynav .elementor-nav-menu--main {
		position: relative;   /* Anker für die absolut positionierten Pfeile */
	}
	/* Kette auf min-width:0 zwingen, sonst bläht sich die Nav (Flex-Item mit
	   min-width:auto) auf Inhaltsbreite auf und überläuft die Seite, statt dass
	   die ul intern scrollt. */
	.cat-stickynav .elementor-widget-container,
	.cat-stickynav .elementor-nav-menu--main {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.cat-stickynav .elementor-nav-menu--main > ul.elementor-nav-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 6px;
		padding-left: 30px !important;    /* Platz, damit Items nicht unter den Pfeilen kleben */
		padding-right: 30px !important;
		scrollbar-width: none;            /* Firefox: Scrollbar aus */
	}
	.cat-stickynav .elementor-nav-menu--main > ul.elementor-nav-menu::-webkit-scrollbar {
		display: none;                    /* WebKit: Scrollbar aus */
	}
	.cat-stickynav .elementor-nav-menu--main > ul.elementor-nav-menu > li {
		flex: 0 0 auto !important;
		width: auto !important;
	}
	.cat-stickynav .elementor-nav-menu--main > ul.elementor-nav-menu > li > a {
		white-space: nowrap !important;
	}
}

/* Wisch-Pfeile (von stickynav.js erzeugt). Standard versteckt; JS setzt
   .is-visible NUR, solange in die jeweilige Richtung noch gescrollt werden kann.
   Verlauf in der Leisten-Hintergrundfarbe (#333), damit es sauber ausblendet. */
.cat-sn-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	z-index: 6;
	color: #fff;
	background: none;
	background-color: transparent !important;
	border-radius: 0 !important;
}
.cat-sn-arrow:hover {
	background-color: transparent !important;
}
.cat-stickynav .elementor-nav-menu--main
{
	padding-left: 34px;
	padding-right: 34px;
}
.cat-sn-arrow.is-visible { display: flex; }
.cat-sn-arrow--left  { left: 0;  }
.cat-sn-arrow--right { right: 0; }
.cat-sn-arrow svg { width: 18px; height: 18px; display: block; }

/* Touch: Elementors "pointer-background" (::before) bleibt beim Antippen als
   :hover kleben -> das zuvor angetippte Item bleibt weiß, obwohl längst ein
   anderes aktiv (lila) ist. Auf Geräten OHNE echtes Hover das Hover-Weiß
   unterdrücken – aber NICHT beim aktiven Item (sonst verschwände die lila
   Pille; verifiziert über :not(.elementor-item-active)). Das kurze Weiß beim
   Drücken bleibt über :active erhalten – das löst sich beim Loslassen und
   klebt daher nicht. Desktop (hover: hover) ist unberührt. */
@media (hover: none) {
	.cat-stickynav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover::before {
		opacity: 0 !important;
		color: white !important;
	}
	.cat-stickynav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):active::before {
		opacity: 1 !important;
		color: white !important;
	}
	.cat-stickynav .elementor-nav-menu a:hover {
		opacity: 1 !important;
		color: white !important;
	}
	.cat-stickynav .elementor-nav-menu:focus {
		opacity: 1 !important;
		background-color: transparent;
	}
}
.cat-stickynav .elementor-nav-menu--main .elementor-item:active{
	background-color: var(--e-global-color-primary);
}
.cat-stickynav .elementor-nav-menu--main .elementor-item:active::before{
	background-color: var(--e-global-color-primary);
}