/* ==========================================================================
   Zumstein Hero Slider – nach foto-zumstein.ch
   Fliessend: Alle Masse skalieren stufenlos mit der Breite des Widgets
   (Container Queries), statt an Breakpoints zu springen.
   Elementor-Controls setzen nur Zahlen (ohne Einheit) als CSS-Variablen.
   ========================================================================== */

:where(.elementor-widget-zumstein-hero-slider) {
	width: 100%;
}

.zhs {
	/* Eingabewerte (Desktop, in px – ohne Einheit) */
	--zhs-max-width: 1552;
	--zhs-pad-x: 20;
	--zhs-pad-top: 40;
	--zhs-gap: 20;
	--zhs-radius: 8;
	--zhs-nav-offset: -14;
	--zhs-content-pad: 60;

	/* Kleinste Werte (bei 375 px Breite) */
	--zhs-pad-x-min: 0;
	--zhs-pad-top-min: 0;
	--zhs-gap-min: 14;
	--zhs-radius-min: 0;
	--zhs-content-pad-min: 16;

	--zhs-ratio: 1920/703;
	--zhs-object-position: center center;
	--zhs-img-bg: #f6f6f6;

	--zhs-nav-size: 48px;
	--zhs-nav-icon: 24px;
	--zhs-nav-radius: 8px;
	--zhs-nav-bg: #fff;
	--zhs-nav-color: #1d1d1b;
	--zhs-nav-disabled-opacity: 0.25;

	--zhs-bullet-w: 32px;
	--zhs-bullet-h: 3px;
	--zhs-bullet-gap: 8px;
	--zhs-bullet-radius: 4px;
	--zhs-bullet-color: #c4c4cc;
	--zhs-bullet-active: #e00b52;
	--zhs-pag-bottom: 21px;
	--zhs-pag-mt-mobile: 24px;

	--zhs-content-h: flex-start;
	--zhs-content-v: center;
	--zhs-content-align: left;
	--zhs-content-max: 600px;
	--zhs-content-color: #1d1d1b;
	--zhs-overlay: transparent;
	--zhs-btn-bg: #e00b52;
	--zhs-btn-color: #fff;
	--zhs-btn-bg-hover: #b80943;

	container-type: inline-size;
	position: relative;
	width: 100%;
	color: #1d1d1b;
}

/* Feste Werte statt automatischer Skalierung */
.zhs.zhs--fixed {
	--zhs-pad-x-min: var(--zhs-pad-x);
	--zhs-pad-top-min: var(--zhs-pad-top);
	--zhs-gap-min: var(--zhs-gap);
	--zhs-radius-min: var(--zhs-radius);
	--zhs-content-pad-min: var(--zhs-content-pad);
}

.zhs *,
.zhs *::before,
.zhs *::after {
	box-sizing: border-box;
}

/* --- Wrapper: berechnet alle fliessenden Werte ----------------------------
   Formel: von MIN bei 375 px bis MAX ab 1024 px Widget-Breite, linear.     */
.zhs .zhs__wrapper {
	--_pad-x: clamp(
		calc(min(var(--zhs-pad-x-min), var(--zhs-pad-x)) * 1px),
		calc(min(var(--zhs-pad-x-min), var(--zhs-pad-x)) * 1px + (var(--zhs-pad-x) - min(var(--zhs-pad-x-min), var(--zhs-pad-x))) * (100cqi - 375px) / 649),
		calc(var(--zhs-pad-x) * 1px)
	);
	--_pad-top: clamp(
		calc(min(var(--zhs-pad-top-min), var(--zhs-pad-top)) * 1px),
		calc(min(var(--zhs-pad-top-min), var(--zhs-pad-top)) * 1px + (var(--zhs-pad-top) - min(var(--zhs-pad-top-min), var(--zhs-pad-top))) * (100cqi - 375px) / 649),
		calc(var(--zhs-pad-top) * 1px)
	);
	--_gap: clamp(
		calc(min(var(--zhs-gap-min), var(--zhs-gap)) * 1px),
		calc(min(var(--zhs-gap-min), var(--zhs-gap)) * 1px + (var(--zhs-gap) - min(var(--zhs-gap-min), var(--zhs-gap))) * (100cqi - 375px) / 649),
		calc(var(--zhs-gap) * 1px)
	);
	--_radius: clamp(
		calc(min(var(--zhs-radius-min), var(--zhs-radius)) * 1px),
		calc(min(var(--zhs-radius-min), var(--zhs-radius)) * 1px + (var(--zhs-radius) - min(var(--zhs-radius-min), var(--zhs-radius))) * (100cqi - 375px) / 649),
		calc(var(--zhs-radius) * 1px)
	);
	--_content-pad: clamp(
		calc(min(var(--zhs-content-pad-min), var(--zhs-content-pad)) * 1px),
		calc(min(var(--zhs-content-pad-min), var(--zhs-content-pad)) * 1px + (var(--zhs-content-pad) - min(var(--zhs-content-pad-min), var(--zhs-content-pad))) * (100cqi - 375px) / 649),
		calc(var(--zhs-content-pad) * 1px)
	);
	/* freier Platz neben dem Slider (nur bei sehr breiten Screens > 0) */
	--_space: max(0px, (100cqi - var(--zhs-max-width) * 1px - 2 * var(--_pad-x)) / 2);

	position: relative;
	max-width: calc(var(--zhs-max-width) * 1px + 2 * var(--_pad-x));
	margin: 0 auto;
}

/* --- Slides (Scroll-Snap-Track) ----------------------------------------- */
.zhs .zhs__slides {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: var(--_pad-top) var(--_pad-x) 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--_pad-x);
	scroll-padding-right: var(--_pad-x);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.zhs .zhs__slides::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	.zhs .zhs__slides {
		scroll-behavior: smooth;
	}
}

.zhs .zhs__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0 var(--_gap) 0 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.zhs .zhs__slide::before,
.zhs .zhs__slide::marker {
	content: none;
}

.zhs .zhs__slide:last-child {
	margin-right: 0;
}

.zhs .zhs__link {
	display: block;
	color: inherit;
	text-decoration: none;
	outline-offset: 2px;
}

.zhs a.zhs__link {
	cursor: pointer;
}

.zhs a.zhs__link:focus-visible {
	outline: 2px solid var(--zhs-bullet-active);
}

/* --- Bild ---------------------------------------------------------------- */
.zhs .zhs__figure {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--_radius);
}

.zhs .zhs__picture {
	display: block;
	aspect-ratio: var(--zhs-ratio);
}

.zhs .zhs__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--zhs-slide-object-position, var(--zhs-object-position));
	background-color: var(--zhs-img-bg);
	transition: opacity 0.2s;
}

.zhs .zhs__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--zhs-slide-overlay, var(--zhs-overlay));
}

/* --- Text-Overlay (optional) ------------------------------------------- */
.zhs .zhs__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: var(--zhs-content-h);
	justify-content: var(--zhs-content-v);
	padding: var(--_content-pad) calc(var(--_content-pad) * 1.2);
	text-align: var(--zhs-content-align);
	color: var(--zhs-slide-color, var(--zhs-content-color));
	pointer-events: none;
}

.zhs .zhs__content-inner {
	max-width: var(--zhs-content-max);
	pointer-events: auto;
}

/* Schriftgrössen skalieren mit der Widget-Breite */
.zhs .zhs__heading {
	margin: 0 0 0.35em;
	padding: 0;
	color: inherit;
	font-size: clamp(20px, 3.4cqi, 52px);
	font-weight: 700;
	line-height: 1.1;
}

.zhs .zhs__text {
	margin: 0 0 1.1em;
	color: inherit;
	font-size: clamp(13px, 1.3cqi, 20px);
	line-height: 1.4;
}

.zhs .zhs__button {
	display: inline-block;
	padding: 0.75em 1.5em;
	border-radius: 8px;
	background: var(--zhs-btn-bg);
	color: var(--zhs-btn-color);
	font-size: clamp(13px, 1.1cqi, 16px);
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s;
}

.zhs a.zhs__link:hover .zhs__button {
	background: var(--zhs-btn-bg-hover);
}

/* --- Navigation-Pfeile --------------------------------------------------
   Position fliessend: innen am Bildrand; wenn neben dem Slider Platz ist,
   gleiten sie nach aussen (wie Original auf grossen Screens).            */
.zhs button.zhs__nav {
	--_nav-pos: max(
		calc(var(--_pad-x) + var(--zhs-nav-offset) * 1px - min(10px, var(--_space))),
		calc(6px - var(--_space))
	);

	display: none;
	position: absolute;
	top: 50%;
	z-index: 9;
	align-items: center;
	justify-content: center;
	width: var(--zhs-nav-size);
	height: var(--zhs-nav-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--zhs-nav-radius);
	background: var(--zhs-nav-bg);
	color: var(--zhs-nav-color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transform: translate3d(0, -50%, 0);
	transition: opacity 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
	line-height: 0;
	text-decoration: none;
}

.zhs .zhs__nav--prev {
	left: var(--_nav-pos);
}

.zhs .zhs__nav--next {
	right: var(--_nav-pos);
}

.zhs button.zhs__nav:hover,
.zhs button.zhs__nav:focus {
	background: var(--zhs-nav-bg-hover, var(--zhs-nav-bg));
	color: var(--zhs-nav-color-hover, var(--zhs-nav-color));
}

.zhs button.zhs__nav:not([disabled]):hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.zhs button.zhs__nav:focus-visible {
	outline: 2px solid var(--zhs-bullet-active);
	outline-offset: 2px;
}

.zhs button.zhs__nav[disabled] {
	cursor: not-allowed;
	opacity: var(--zhs-nav-disabled-opacity);
}

.zhs button.zhs__nav[disabled] svg {
	filter: grayscale(1);
}

.zhs .zhs__nav-icon {
	display: block;
	width: var(--zhs-nav-icon);
	height: var(--zhs-nav-icon);
	fill: transparent;
}

/* Original: Pfeile nur auf Geräten mit Maus */
@media (hover: hover) and (pointer: fine) {
	.zhs.zhs--arrows-pointer button.zhs__nav {
		display: flex;
	}
}

.zhs.zhs--arrows-always button.zhs__nav {
	display: flex;
}

/* --- Pagination ---------------------------------------------------------- */
.zhs .zhs__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--zhs-pag-bottom);
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--zhs-bullet-gap);
	margin: 0;
	padding: 0 var(--_pad-x);
	pointer-events: none;
}

.zhs button.zhs__bullet {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var(--zhs-bullet-w);
	height: var(--zhs-bullet-h);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--zhs-bullet-radius);
	background: var(--zhs-bullet-color);
	box-shadow: none;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
	pointer-events: auto;
	transition: 0.15s;
}

/* grössere Klickfläche, ohne die Optik zu verändern */
.zhs button.zhs__bullet::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.zhs button.zhs__bullet:hover,
.zhs button.zhs__bullet:focus {
	background: var(--zhs-bullet-color);
}

.zhs button.zhs__bullet.is-current,
.zhs button.zhs__bullet.is-current:hover,
.zhs button.zhs__bullet.is-current:focus {
	background: var(--zhs-bullet-active);
}

.zhs button.zhs__bullet:focus-visible {
	outline: 2px solid var(--zhs-bullet-active);
	outline-offset: 3px;
}

/* --- Pagination unter dem Bild: immer (Option) ---------------------------- */
.zhs.zhs--pag-below .zhs__pagination {
	position: static;
	margin-top: var(--zhs-pag-mt-mobile);
}

/* --- Schmale Widgets (< 768 px): Pagination unter dem Bild – wie Original */
@container (max-width: 767px) {
	/* schmal wird gewischt – Pfeile würden das kleine Bild verdecken */
	.zhs.zhs--arrows-pointer button.zhs__nav {
		display: none;
	}

	.zhs.zhs--pag-auto .zhs__pagination {
		position: static;
		gap: 0;
		margin-top: var(--zhs-pag-mt-mobile);
		padding: 0 14px;
	}

	.zhs.zhs--pag-auto button.zhs__bullet {
		flex: 1 1 auto;
		width: auto;
		border-radius: 0;
	}

	.zhs.zhs--pag-auto button.zhs__bullet:first-child {
		border-radius: var(--zhs-bullet-radius) 0 0 var(--zhs-bullet-radius);
	}

	.zhs.zhs--pag-auto button.zhs__bullet:last-child {
		border-radius: 0 var(--zhs-bullet-radius) var(--zhs-bullet-radius) 0;
	}

	.zhs.zhs--pag-auto button.zhs__bullet:only-child {
		border-radius: var(--zhs-bullet-radius);
	}
}