/* Container und Reset */
.rs-timeline-wrapper {
	--current-marker-size: var(--rs-tl-marker-size);
	width: 100%;
	max-width: 1000px;
	margin: 50px auto;
	position: relative;
	font-family: var(--rs-tl-font);
	box-sizing: border-box;
}

.rs-timeline-wrapper * {
	box-sizing: border-box;
}

/* Die mittlere Linie (Track) */
.rs-timeline-track {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--rs-tl-inactive);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

/* Fortschrittslinie */
.rs-timeline-progress {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--rs-tl-active);
	height: 0; 
	transition: height 0.2s ease-out;
}

/* Listen Container */
.rs-timeline-list {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Einzelne Station */
.rs-timeline-station {
	width: 50%;
	position: relative;
	padding: 0 50px;
	margin-bottom: var(--rs-tl-spacing);
}

.rs-timeline-station:last-child {
	margin-bottom: 0 !important;
}

/* Ausrichtung Mixed */
.rs-timeline-wrapper[data-align="mixed"] .rs-station-left {
	align-self: flex-start;
}

.rs-timeline-wrapper[data-align="mixed"] .rs-station-right {
	align-self: flex-end;
}

/* Marker (Kreis auf der Linie) */
.rs-timeline-marker {
	position: absolute;
	top: 20px;
	width: var(--current-marker-size);
	height: var(--current-marker-size);
	background: #fcfcfc; 
	border: 2px solid var(--rs-tl-inactive);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
	z-index: 3;
}

.rs-station-left .rs-timeline-marker { right: calc(var(--current-marker-size) / -2); }
.rs-station-right .rs-timeline-marker { left: calc(var(--current-marker-size) / -2); }

/* SVG Icon im Marker */
.rs-marker-chevron {
	width: calc(var(--current-marker-size) * 0.5);
	height: calc(var(--current-marker-size) * 0.5);
	stroke: var(--rs-tl-inactive);
	fill: none;
	transition: all 0.4s ease;
}

.rs-timeline-station.rs-active .rs-timeline-marker {
	background: var(--rs-tl-active);
	border-color: var(--rs-tl-active);
}

.rs-timeline-station.rs-active .rs-marker-chevron {
	stroke: #fff;
}

/* Content Box */
.rs-timeline-content {
	background: var(--rs-tl-box-bg);
	border: var(--rs-tl-box-border-width) solid var(--rs-tl-box-border);
	border-radius: var(--rs-tl-radius);
	padding: var(--rs-tl-padding);
	position: relative;
	width: 100%;
	text-align: left !important;
}

/* FIX: Box-Schatten Kräftigerer, tieferer Schatten nach Vorlage "Original Schatten" */
.rs-timeline-wrapper[data-shadow="yes"] .rs-timeline-content {
	/* X-Versatz | Y-Versatz | Weichzeichner | Spread (Ausbreitung) | Farbe */
	box-shadow: 0 25px 25px -15px rgba(0,0,0,0.3);
}
.rs-timeline-wrapper[data-shadow="no"] .rs-timeline-content {
	box-shadow: none !important;
}

/* Animationen */
.rs-timeline-wrapper[data-animation="fade-up"] .rs-timeline-content {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out, background 0.3s ease, border 0.3s ease;
}
.rs-timeline-wrapper[data-animation="fade-up"] .rs-timeline-station.rs-active .rs-timeline-content {
	opacity: 1;
	transform: translateY(0);
}

.rs-timeline-wrapper[data-animation="fade"] .rs-timeline-content {
	opacity: 0;
	transition: opacity 0.6s ease-out, background 0.3s ease, border 0.3s ease;
}
.rs-timeline-wrapper[data-animation="fade"] .rs-timeline-station.rs-active .rs-timeline-content {
	opacity: 1;
}

.rs-timeline-wrapper[data-animation="none"] .rs-timeline-content {
	opacity: 1;
	transform: none;
	transition: background 0.3s ease, border 0.3s ease;
}

/* Pointer */
.rs-timeline-content::before {
	content: '';
	position: absolute;
	top: 28px;
	width: 0;
	height: 0;
	border-style: solid;
}
.rs-station-left .rs-timeline-content::before {
	right: -10px;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent var(--rs-tl-box-border);
}
.rs-station-right .rs-timeline-content::before {
	left: -10px;
	border-width: 10px 10px 10px 0;
	border-color: transparent var(--rs-tl-box-border) transparent transparent;
}

.rs-timeline-wrapper[data-arrow="no"] .rs-timeline-content::before {
	display: none !important;
}

/* Step Text (Desktop) */
.rs-timeline-step-desktop {
	position: absolute;
	top: 30px;
	font-weight: 700;
	font-size: var(--rs-tl-step-size);
	color: var(--rs-tl-step-color);
	text-align: left !important;
}
.rs-station-left .rs-timeline-step-desktop { right: -120px; }
.rs-station-right .rs-timeline-step-desktop { left: -120px; }

/* Step Text (Mobile & Left/Right Layout) */
.rs-timeline-step-mobile {
	display: none;
	font-weight: 700;
	font-size: var(--rs-tl-step-size);
	color: var(--rs-tl-step-color);
	margin-bottom: 5px;
	text-align: left !important;
}

/* Header (Icon + Titel) */
.rs-timeline-content-header {
	display: flex;
	gap: 20px;
	align-items: center !important; 
	margin-bottom: 15px;
}

.rs-timeline-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--rs-tl-icon-color);
}

.rs-timeline-box-icon svg {
	width: var(--rs-tl-icon-size);
	height: var(--rs-tl-icon-size);
	fill: currentColor;
	display: block;
}
.rs-timeline-box-icon svg[stroke="currentColor"] { fill: none !important; }

.rs-timeline-box-icon img {
	width: var(--rs-tl-icon-size);
	height: var(--rs-tl-icon-size);
	object-fit: contain;
	display: block;
}

.rs-timeline-title-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	text-align: left !important;
}

.rs-timeline-title {
	margin: 0 !important; 
	padding: 0 !important;
	font-family: var(--rs-tl-title-font) !important;
	font-size: var(--rs-tl-title-size) !important;
	font-weight: var(--rs-tl-title-weight) !important;
	color: var(--rs-tl-title-color) !important;
	line-height: 1.2 !important; 
	text-align: left !important;
}

.rs-timeline-body p {
	margin: 0 !important;
	color: var(--rs-tl-text-color) !important;
	font-weight: var(--rs-tl-text-weight) !important;
	line-height: 1.3 !important;
	font-size: var(--rs-tl-text-size) !important;
	text-align: left !important;
}

/* -----------------------------------
   Responsive Layout & Smart Scaling
-------------------------------------- */

@media (max-width: 980px) {
	.rs-timeline-track { left: 20px !important; transform: none !important; }
	.rs-timeline-station {
		width: 100% !important;
		padding: 0 0 0 60px !important;
		align-self: flex-start !important;
		margin-bottom: calc(var(--rs-tl-spacing) * 0.8) !important;
	}
	.rs-timeline-content { padding: calc(var(--rs-tl-padding) * 0.85) !important; }
	
	.rs-timeline-content-header {
		flex-wrap: wrap !important;
		gap: 5px 15px !important; 
		margin-bottom: 8px !important; 
	}
	.rs-timeline-title-wrap { display: contents !important; }
	
	.rs-timeline-step-mobile {
		display: block !important;
		flex: 1 !important; 
		margin-bottom: 0 !important;
		font-size: var(--rs-tl-step-size-t) !important;
	}
	.rs-timeline-title {
		width: 100% !important; 
		margin: 0 !important; 
		font-size: var(--rs-tl-title-size-t) !important;
	}
	.rs-timeline-body p { font-size: var(--rs-tl-text-size-t) !important; }
	
	/* Marker auf die 20px-Linie ausrichten */
	.rs-timeline-marker { 
		left: calc(20px - (var(--current-marker-size) / 2)) !important; 
		right: auto !important; 
		transform: none !important; 
	}
	
	.rs-station-left .rs-timeline-content::before,
	.rs-station-right .rs-timeline-content::before {
		left: -10px !important;
		right: auto !important;
		border-width: 10px 10px 10px 0 !important;
		border-color: transparent var(--rs-tl-box-border) transparent transparent !important;
	}
	.rs-timeline-step-desktop { display: none !important; }
}

@media (max-width: 480px) {
	.rs-timeline-wrapper {
		--current-marker-size: calc(var(--rs-tl-marker-size) * 0.85); /* 15% kleinere Marker */
	}
	
	.rs-timeline-station { margin-bottom: calc(var(--rs-tl-spacing) * 0.6) !important; }
	.rs-timeline-content { padding: calc(var(--rs-tl-padding) * 0.7) !important; }
	.rs-timeline-box-icon svg,
	.rs-timeline-box-icon img {
		width: calc(var(--rs-tl-icon-size) * 0.8) !important;
		height: calc(var(--rs-tl-icon-size) * 0.8) !important;
	}
	
	.rs-timeline-step-mobile { font-size: var(--rs-tl-step-size-m) !important; }
	.rs-timeline-title { font-size: var(--rs-tl-title-size-m) !important; }
	.rs-timeline-body p { font-size: var(--rs-tl-text-size-m) !important; }
}

/* Links- & Rechtsbündiges Desktop Layout (981px+) */
@media (min-width: 981px) {
	.rs-timeline-wrapper[data-align="left"],
	.rs-timeline-wrapper[data-align="right"] {
		max-width: 600px !important; 
	}
	
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-station,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-station {
		width: 100% !important;
	}

	.rs-timeline-wrapper[data-align="left"] .rs-timeline-step-desktop,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-step-desktop {
		display: none !important;
	}
	
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-step-mobile,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-step-mobile {
		display: block !important;
		font-size: var(--rs-tl-step-size);
	}
	
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-content-header,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-content-header {
		flex-wrap: wrap !important;
		gap: 5px 15px !important;
	}
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-title-wrap,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-title-wrap {
		display: contents !important;
	}
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-title,
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-title {
		width: 100% !important;
	}

	/* Tracker-Positionen für Rechts */
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-track {
		left: auto;
		right: 20px;
		transform: none;
	}
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-station {
		padding: 0 60px 0 0;
		align-self: flex-end !important;
	}
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-marker {
		right: calc(20px - (var(--current-marker-size) / 2)) !important;
		left: auto !important;
	}
	.rs-timeline-wrapper[data-align="right"] .rs-timeline-content::before {
		right: -10px;
		left: auto;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent var(--rs-tl-box-border);
	}
	
	/* Tracker-Positionen für Links */
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-track {
		left: 20px;
		transform: none;
	}
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-station {
		padding: 0 0 0 60px;
		align-self: flex-start !important;
	}
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-marker {
		left: calc(20px - (var(--current-marker-size) / 2)) !important;
		right: auto !important;
	}
	.rs-timeline-wrapper[data-align="left"] .rs-timeline-content::before {
		left: -10px;
		right: auto;
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--rs-tl-box-border) transparent transparent;
	}
}