/*
	Scroll-Tabs (be-on!)
*/

.beon-st {
	--beon-st-offset: 120px;
	--beon-st-step: 60;
	--beon-st-duration: 400ms;
	--beon-st-nav-width: 30%;
	--beon-st-gap: 100px;
	--beon-st-item-gap: 24px;
	--beon-st-item-indent: 18px;
	--beon-st-line-width: 2px;
	--beon-st-line-color: #DCDCDC;
	--beon-st-fill-color: #535050;
	--beon-st-title-color: #CFCFCF;
	--beon-st-title-active-color: #535050;
	--beon-st-stack-gap: 48px;
	--beon-st-bar-bg: transparent;
	--beon-st-bar-bg-sticky: #FBFBF9;
	--beon-st-bar-padding: 12px;
	position: relative;
}

.beon-st-sticky {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--beon-st-gap);
}

.beon-st--pinned .beon-st-sticky {
	position: sticky;
	top: var(--beon-st-offset);
}

/* Navigation */

.beon-st-nav {
	position: relative;
	flex: 0 0 var(--beon-st-nav-width);
	max-width: var(--beon-st-nav-width);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--beon-st-item-gap);
	padding-left: var(--beon-st-item-indent);
}

.beon-st-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--beon-st-line-width);
	background-color: var(--beon-st-line-color);
}

.beon-st-line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: var(--beon-st-fill-color);
	transition: height 150ms linear;
}

/* Reset gegen die globalen Button-Stile aus dem Elementor-Kit */
.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item,
.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item:hover,
.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item:focus {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
	color: var(--beon-st-title-color);
	transition: color var(--beon-st-duration) ease;
}

.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item.is-reached,
.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item:hover {
	color: var(--beon-st-title-active-color);
}

.elementor-widget-beon-scroll-tabs .beon-st .beon-st-nav-item:focus-visible {
	outline: 2px solid var(--beon-st-fill-color);
	outline-offset: 4px;
}

/* Inhalte */

.beon-st-panels {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
}

.beon-st-panels > .elementor-element {
	grid-area: 1 / 1;
}

/* Bis das Script geladen ist, nur den ersten Tab zeigen */
.beon-st:not(.beon-st--pinned):not(.beon-st--stacked):not(.beon-st--editor) .beon-st-panels > .elementor-element ~ .elementor-element {
	visibility: hidden;
}

.beon-st--pinned .beon-st-panels > .elementor-element {
	opacity: 0;
	visibility: hidden;
	transform: translateY(24px);
	transition: opacity var(--beon-st-duration) ease, transform var(--beon-st-duration) ease, visibility 0s linear var(--beon-st-duration);
}

.beon-st--pinned .beon-st-panels > .elementor-element.beon-st-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.beon-st-mobile-title {
	display: none;
}

/* Untereinander (Mobil) */

.beon-st--stacked .beon-st-sticky {
	flex-direction: column;
}

.beon-st--stacked:not(.beon-st--bar) .beon-st-nav {
	display: none;
}

.beon-st--stacked .beon-st-panels {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.beon-st--stacked:not(.beon-st--bar) .beon-st-mobile-title {
	display: block;
	color: var(--beon-st-title-active-color);
}

/* Untereinander mit fixierter, horizontal scrollbarer Leiste */

.beon-st--bar .beon-st-sticky {
	gap: 24px;
}

.beon-st--bar .beon-st-nav {
	position: sticky;
	top: var(--beon-st-offset);
	z-index: 10;
	flex: none;
	width: 100%;
	max-width: none;
	flex-direction: row;
	align-items: stretch;
	gap: var(--beon-st-item-gap);
	padding: var(--beon-st-bar-padding) 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	background-color: var(--beon-st-bar-bg);
	border-bottom: var(--beon-st-line-width) solid var(--beon-st-line-color);
	transition: background-color var(--beon-st-duration) ease, box-shadow var(--beon-st-duration) ease;
}

.beon-st--bar .beon-st-nav.is-stuck {
	background-color: var(--beon-st-bar-bg-sticky);
}

/*
	Fixierte Leiste in voller Fensterbreite: Hintergrund und Linie werden per
	border-image seitlich nach außen verlängert. Das verändert weder das Layout
	noch erzeugt es horizontales Scrollen und wird vom overflow der Leiste nicht beschnitten.
*/
.beon-st-bar-full-yes .beon-st--bar .beon-st-nav.is-stuck {
	background-color: transparent;
	border-image: linear-gradient(to top, var(--beon-st-line-color) var(--beon-st-line-width), var(--beon-st-bar-bg-sticky) var(--beon-st-line-width)) 0 fill / 0 / 0 100vmax;
}

.beon-st--bar .beon-st-nav::-webkit-scrollbar {
	display: none;
}

.beon-st--bar .beon-st-line {
	display: none;
}

.elementor-widget-beon-scroll-tabs .beon-st--bar .beon-st-nav-item,
.elementor-widget-beon-scroll-tabs .beon-st--bar .beon-st-nav-item:hover,
.elementor-widget-beon-scroll-tabs .beon-st--bar .beon-st-nav-item:focus {
	flex: none;
	white-space: nowrap;
	padding-bottom: 6px;
	border-bottom: var(--beon-st-line-width) solid transparent;
}

.elementor-widget-beon-scroll-tabs .beon-st--bar .beon-st-nav-item.is-reached {
	color: var(--beon-st-title-color);
}

.elementor-widget-beon-scroll-tabs .beon-st--bar .beon-st-nav-item.is-active {
	color: var(--beon-st-title-active-color);
	border-bottom-color: var(--beon-st-fill-color);
}

.beon-st--stacked .beon-st-panels > .elementor-element:not(:last-child) {
	margin-bottom: calc(var(--beon-st-stack-gap) - 16px);
}

/* Editor: alle Tabs untereinander, Navigation bleibt sichtbar */

.beon-st--editor .beon-st-panels {
	display: flex;
	flex-direction: column;
	gap: var(--beon-st-stack-gap);
}

@media (prefers-reduced-motion: reduce) {
	.beon-st {
		--beon-st-duration: 0ms;
	}

	.beon-st--pinned .beon-st-panels > .elementor-element {
		transform: none;
	}
}