/**
 * Chronik Timeline Carousel
 * Horizontale Timeline mit Punkten über den Slides
 *
 * Verwendung: Füge die CSS-Klasse "chronik-timeline" zum Carousel-Widget hinzu
 */

/* ============================================
   PREVENT HORIZONTAL SCROLL
   Verhindert horizontales Scrollen durch die erweiterte Timeline-Linie
   ============================================ */

body,
#content,
.page-content {
	overflow-x: hidden;
}

/* ============================================
   TIMELINE CONTAINER
   ============================================ */

.chronik-timeline.elementor-widget {
	position: relative;
	/* 50px Abstand zwischen Linie und Slides */
	padding-top: 80px !important;
}

/* ============================================
   TIMELINE NAVIGATION WRAPPER
   ============================================ */

.chronik-timeline-nav {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	height: 42px; /* Höhe für den aktiven Rahmen */
	z-index: 100;
}

/* Timeline-Linie - Basis */
.chronik-timeline-nav .timeline-line {
	position: absolute;
	top: 50%;
	height: 1px;
	background-color: rgb(255, 255, 255);
	transform: translateY(-50%);
	/* Sanfter Übergang beim Wechsel */
	transition: left 0.5s ease, right 0.5s ease;
	/* Standard: beide Seiten im Container */
	left: 0;
	right: 0;
}

/* Am Anfang (Slide 1): links im Container, rechts erweitert */
.chronik-timeline-nav.at-start .timeline-line {
	left: 0;
	right: calc(-50vw + 50%);
}

/* In der Mitte: beide Seiten erweitert */
.chronik-timeline-nav.at-middle .timeline-line {
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
}

/* Am Ende (letzter Slide): links erweitert, rechts im Container */
.chronik-timeline-nav.at-end .timeline-line {
	left: calc(-50vw + 50%);
	right: 0;
}

/* Punkte Container */
.chronik-timeline-nav .timeline-dots {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0;
	transform: translateY(-50%);
}

/* Einzelner Punkt Wrapper */
.chronik-timeline-nav .timeline-dot-wrapper {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	/* Initial versteckt bis JS geladen */
	opacity: 0;
	visibility: hidden;
	/* Sanftes Ein-/Ausblenden */
	transition: opacity 0.3s ease;
}

/* Punkte erst anzeigen wenn Timeline initialisiert ist */
.chronik-timeline-nav.initialized .timeline-dot-wrapper {
	/* Wird per JS gesteuert */
}

/* Der Punkt selbst - 18x18px */
.chronik-timeline-nav .timeline-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #ffffff;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	/* Sanfte Animation */
	transition: transform 0.3s ease;
}

/* Aktiver Punkt - 18x18px mit animiertem Rahmen */
.chronik-timeline-nav .timeline-dot.active {
	background-color: #ffffff;
}

/* Radar-Animation für den aktiven Punkt */
.chronik-timeline-nav .timeline-dot.active::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: radar-pulse 2.5s ease-in-out infinite;
}

/* Radar Pulse Animation - pulsiert rein und raus */
@keyframes radar-pulse {
	0%, 100% {
		width: 18px;
		height: 18px;
		opacity: 1;
	}
	50% {
		width: 42px;
		height: 42px;
		opacity: 0.2;
	}
}

/* Hover auf inaktive Punkte */
.chronik-timeline-nav .timeline-dot:not(.active):hover {
	transform: scale(1.1);
}

/* ============================================
   SWIPER PAGINATION VERSTECKEN
   Wir nutzen unsere eigene Navigation
   ============================================ */

.chronik-timeline .swiper-pagination {
	display: none !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.chronik-timeline.elementor-widget {
		padding-top: 70px !important;
	}

	.chronik-timeline-nav {
		top: 18px;
		height: 36px;
	}

	.chronik-timeline-nav .timeline-dot {
		width: 14px;
		height: 14px;
	}

	.chronik-timeline-nav .timeline-dot.active::before {
		width: 14px;
		height: 14px;
		animation: radar-pulse-tablet 2.5s ease-in-out infinite;
	}

	@keyframes radar-pulse-tablet {
		0%, 100% {
			width: 14px;
			height: 14px;
			opacity: 1;
		}
		50% {
			width: 36px;
			height: 36px;
			opacity: 0.2;
		}
	}
}

@media (max-width: 767px) {
	.chronik-timeline.elementor-widget {
		padding-top: 60px !important;
	}

	.chronik-timeline-nav {
		top: 16px;
		height: 30px;
	}

	.chronik-timeline-nav .timeline-dot {
		width: 12px;
		height: 12px;
	}

	.chronik-timeline-nav .timeline-dot.active::before {
		width: 12px;
		height: 12px;
		animation: radar-pulse-mobile 2.5s ease-in-out infinite;
	}

	@keyframes radar-pulse-mobile {
		0%, 100% {
			width: 12px;
			height: 12px;
			opacity: 1;
		}
		50% {
			width: 30px;
			height: 30px;
			opacity: 0.2;
		}
	}

	/* Auf Mobile die Linie nicht erweitern */
	.chronik-timeline-nav .timeline-line {
		right: 0;
		min-width: 100%;
	}
}