/*
 * Carousel-Verhalten für .kb-carousel – das Grid-Layout (Desktop) kommt aus Elementor.
 *
 * Tablet/Mobil (≤1140px): immer Carousel.
 * Desktop: nur wenn mehr Karten als Spalten vorhanden sind – dann setzt carousel.js
 * die Klasse "is-carousel". Spaltenzahl über --kb-carousel-columns (Standard 3).
 * Variante .kb-carousel--single: immer genau 1 Karte sichtbar (z. B. Interviews).
 * Variante .kb-carousel--mobile-only: Desktop und Tablet bleiben Grid, Carousel nur ≤767px.
 * Punktfarben über --kb-dot-color / --kb-dot-active (z. B. für dunkle Hintergründe).
 * Variante .kb-carousel--nav: statt Punkten eine Leiste mit Zähler "01 / 15",
 * Fortschrittsbalken und Pfeilen (Farben über --kb-nav-* / --kb-arrow-*).
 * Die Pfeile sitzen auf Desktop/Tablet in einem leeren .kb-carousel-arrows-Element
 * im Kopf der Sektion (gleicher Container), auf Mobil in der Leiste. Die erste
 * sichtbare Karte bekommt die Klasse is-active.
 *
 * Im Elementor-Editor steckt jede Karte in einem Wrapper mit display:contents
 * ([data-atomic]) samt Bearbeitungs-Overlay – daher die doppelten Kind-Selektoren.
 */

.kb-carousel {
	--kb-carousel-columns: 3;
}

.kb-carousel-dots {
	display: none;
}

/* ---------- Carousel-Grundlayout ---------- */

.elementor .kb-carousel.kb-carousel.is-carousel {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.elementor .kb-carousel.is-carousel::-webkit-scrollbar {
	display: none;
}

/* Karten gleich hoch – height:100% der Karten würde das Stretchen verhindern */
.elementor .kb-carousel.kb-carousel.is-carousel > .elementor-element:not([data-atomic]),
.elementor .kb-carousel.kb-carousel.is-carousel > [data-atomic] > :not(.elementor-element-overlay),
.elementor .kb-carousel.kb-carousel.is-carousel > .kb-carousel__item {
	flex: 0 0 calc((100% - (var(--kb-carousel-columns) - 1) * var(--kb-carousel-gap, 24px)) / var(--kb-carousel-columns));
	align-self: stretch;
	height: auto;
	min-width: 0;
	scroll-snap-align: start;
}

/* Abstand zum Carousel kommt über das gap des Eltern-Containers */
.kb-carousel.is-carousel + .kb-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0;
}

.kb-carousel.is-carousel + .kb-carousel-dots[hidden] {
	display: none;
}

/* Sichtbarer Punkt 8px, Klickfläche 24×24px (WCAG 2.5.8) – der Punkt sitzt als ::before mittig */
.kb-carousel-dots button {
	all: unset;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
}

.kb-carousel-dots button::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--kb-dot-color, var(--color-eyebrow-border, rgba(30, 57, 84, .25)));
	transition: background-color .2s ease;
}

.kb-carousel-dots button:hover::before {
	background-color: var(--color-accent-dark, #deb600);
}

.kb-carousel-dots button[aria-current="true"]::before {
	background-color: var(--kb-dot-active, var(--color-blue, #0c436b));
}

.kb-carousel-dots button:focus-visible {
	outline: 2px solid var(--color-blue, #0c436b);
	outline-offset: 2px;
}

/* Variante: immer 1 Karte (höhere Spezifität schlägt die Breakpoint-Werte) */
.kb-carousel.kb-carousel--single {
	--kb-carousel-columns: 1;
}

/* ---------- Breakpoints ---------- */

/* Tablet: immer Carousel, 2 Karten sichtbar (außer .kb-carousel--mobile-only) */
@media (max-width: 1140px) {
	.kb-carousel {
		--kb-carousel-columns: 2;
	}

	.elementor .kb-carousel.kb-carousel:not(.kb-carousel--mobile-only) {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.elementor .kb-carousel::-webkit-scrollbar {
		display: none;
	}

	.elementor .kb-carousel.kb-carousel:not(.kb-carousel--mobile-only) > .elementor-element:not([data-atomic]),
	.elementor .kb-carousel.kb-carousel:not(.kb-carousel--mobile-only) > [data-atomic] > :not(.elementor-element-overlay),
	.elementor .kb-carousel.kb-carousel:not(.kb-carousel--mobile-only) > .kb-carousel__item {
		flex: 0 0 calc((100% - (var(--kb-carousel-columns) - 1) * var(--kb-carousel-gap, 16px)) / var(--kb-carousel-columns));
		align-self: stretch;
		height: auto;
		min-width: 0;
		scroll-snap-align: start;
	}

	.kb-carousel:not(.kb-carousel--mobile-only) + .kb-carousel-dots {
		display: flex;
		justify-content: center;
		gap: 0;
	}

	.kb-carousel:not(.kb-carousel--mobile-only) + .kb-carousel-dots[hidden] {
		display: none;
	}
}

/* Mobil: 1 Karte sichtbar */
@media (max-width: 767px) {
	.kb-carousel {
		--kb-carousel-columns: 1;
	}
}

/*
 * Variante .kb-carousel--peek: die nächste Karte ragt angeschnitten herein,
 * die Leiste läuft rechts bis an den Bildschirmrand (über den Container-Gutter).
 */
@media (max-width: 1140px) {
	.kb-carousel--peek {
		--kb-carousel-columns: 2.25;
	}

	.elementor .kb-carousel.kb-carousel--peek {
		/* Elementor setzt auf .e-con width:100% – daher Breite explizit erweitern */
		width: calc(100% + var(--kb-container-gutter-tablet, 16px));
		margin-inline-end: calc(-1 * var(--kb-container-gutter-tablet, 16px));
	}
}

@media (max-width: 767px) {
	.kb-carousel--peek {
		--kb-carousel-columns: 1.25;
	}

	.elementor .kb-carousel.kb-carousel--peek {
		/* Elementor setzt auf .e-con width:100% – daher Breite explizit erweitern */
		width: calc(100% + var(--kb-container-gutter-mobile, 16px));
		margin-inline-end: calc(-1 * var(--kb-container-gutter-mobile, 16px));
	}
}

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

/* ---------- Variante .kb-carousel--nav: Zähler, Fortschritt, Pfeile ---------- */

.kb-carousel-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	min-width: 0;
}

.kb-carousel-nav[hidden] {
	display: none;
}

.kb-carousel-nav__count {
	margin: 0;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	color: var(--kb-nav-text-muted, var(--color-text-muted, #5b5e62));
}

.kb-carousel-nav__count strong {
	font-weight: 700;
	font-size: 18px;
	color: var(--kb-nav-text, var(--color-blue, #0c436b));
}

.kb-carousel-nav__bar {
	flex: 1 1 auto;
	height: 3px;
	border-radius: 2px;
	overflow: hidden;
	background-color: var(--kb-nav-track, rgba(30, 57, 84, .2));
}

.kb-carousel-nav__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background-color: var(--kb-nav-fill, var(--color-accent-dark, #deb600));
	transition: width .3s ease;
}

.elementor .kb-carousel-arrows.kb-carousel-arrows {
	/* Elementor gibt Containern width:100% – der Pfeil-Platzhalter soll nur so breit wie die Pfeile sein
	   und darf neben einer umbrechenden Headline nicht schrumpfen (sonst werden die Kreise oval) */
	width: auto;
	min-width: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}

.kb-carousel-arrows[hidden] {
	display: none;
}

.elementor button.kb-carousel-arrow {
	all: unset;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--kb-arrow-border, var(--color-blue, #0c436b));
	color: var(--kb-arrow-color, var(--color-blue, #0c436b));
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.elementor button.kb-carousel-arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

.elementor button.kb-carousel-arrow--next {
	border-color: var(--kb-arrow-next-bg, var(--color-blue, #0c436b));
	background-color: var(--kb-arrow-next-bg, var(--color-blue, #0c436b));
	color: var(--kb-arrow-next-color, #ffffff);
}

.elementor button.kb-carousel-arrow[aria-disabled="true"] {
	opacity: .45;
	cursor: default;
}

.elementor button.kb-carousel-arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--color-accent-dark, #deb600);
	background-color: var(--color-accent-dark, #deb600);
	color: var(--color-blue, #0c436b);
}

.elementor button.kb-carousel-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.kb-carousel-nav {
		gap: 20px;
	}

	.kb-carousel-nav__bar {
		margin-inline-end: auto;
	}

	.elementor button.kb-carousel-arrow {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-carousel-nav__fill,
	.elementor button.kb-carousel-arrow {
		transition: none;
	}
}