/* Scroll Timeline – Frontend */

.tl-section{
	position:relative;
	background:var(--tl-bg,#000);
	padding:var(--tl-pad-y,60px) 16px;
	overflow:hidden;
	box-sizing:border-box;
	--tl-amp:180px;
	--tl-overlap:0px;
}
.tl-section *,
.tl-section *::before,
.tl-section *::after{ box-sizing:border-box; }

.tl-wrap{
	position:relative;
	max-width:var(--tl-wrap-max,1400px);
	margin:0 auto;
	width:100%;
}

/* ---------- Welle ---------- */
.tl-wave{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
	overflow:visible;
	z-index:0;
}
.tl-wave__track{
	stroke:var(--tl-line-c1,#e8ff00);
	stroke-width:var(--tl-line-w,3px);
	opacity:.14;
}
.tl-wave__glow{
	stroke:var(--tl-glow-c,transparent);
	stroke-width:calc(var(--tl-line-w,3px) + 4px);
	filter:blur(calc(var(--tl-glow-sz,14px) / 2));
	opacity:.85;
}
.tl-wave__fill{
	stroke:var(--tl-line-c1,#e8ff00);
	stroke-width:var(--tl-line-w,3px);
}

/* ---------- Punkte ---------- */
.tl-dots{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.tl-dot{
	position:absolute;
	width:var(--tl-dot-sz,16px);
	height:var(--tl-dot-sz,16px);
	margin:calc(var(--tl-dot-sz,16px) / -2) 0 0 calc(var(--tl-dot-sz,16px) / -2);
	border-radius:50%;
	background:var(--tl-dot-bg,#e8ff00);
	box-shadow:0 0 var(--tl-glow-sz,14px) var(--tl-glow-c,transparent);
	opacity:0;
	transform:scale(.4);
	transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.tl-dot.is-on{ opacity:1; transform:scale(1); }

/* ---------- Karten ---------- */
.tl-items{ position:relative; z-index:1; display:block; }

.tl-card{
	position:relative;
	width:var(--tl-card-w,560px);
	margin-bottom:var(--tl-gap,110px);
	will-change:transform,opacity;
}
.tl-card:last-child{ margin-bottom:0; }

.tl-card--right{
	margin-left:calc(50% + var(--tl-amp) - var(--tl-overlap));
	max-width:calc(50% - var(--tl-amp) + var(--tl-overlap) - 8px);
}
.tl-card--left{
	margin-left:calc(50% - var(--tl-amp) - var(--tl-card-w,560px) + var(--tl-overlap));
	max-width:calc(50% - var(--tl-amp) + var(--tl-overlap) - 8px);
}
.tl-card--left .tl-card__inner{ margin-left:auto; }

.tl-card__inner{
	display:flex;
	gap:22px;
	align-items:flex-start;
	background:var(--tl-card-bg,#242424);
	border:var(--tl-border-w,1px) solid var(--tl-border-c,rgba(232,255,0,.5));
	border-radius:var(--tl-radius,20px);
	padding:var(--tl-card-pad,26px);
	box-shadow:var(--tl-card-glow,none);
	width:100%;
	max-width:var(--tl-card-w,560px);
}

.tl-card__media{ flex:0 0 auto; }
.tl-card__media--img{
	width:min(var(--tl-img-sz,190px), 40%);
	aspect-ratio:1/1;
	border-radius:var(--tl-img-radius,10px);
	overflow:hidden;
}
.tl-card__media--img img{
	width:100%; height:100%;
	object-fit:var(--tl-img-fit,cover);
	display:block;
}
.tl-card__media--icon{
	width:var(--tl-img-sz,190px);
	height:var(--tl-img-sz,190px);
	max-width:38%;
	display:flex; align-items:center; justify-content:center;
}
.tl-card__media--icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.tl-icon__mask{
	display:block; width:100%; height:100%;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}

.tl-card__body{ flex:1 1 auto; min-width:0; }

.tl-section .tl-card .tl-card__title{
	font-family:var(--tl-font, inherit) !important;
	font-size:var(--tl-title-sz,30px) !important;
	font-weight:var(--tl-title-fw,800) !important;
	line-height:var(--tl-title-lh,1.2) !important;
	letter-spacing:var(--tl-title-ls,0px) !important;
	color:var(--tl-title-c,#fff) !important;
	margin:0 0 12px !important;
	padding:0 !important;
}
.tl-section .tl-card .tl-card__text,
.tl-section .tl-card .tl-card__text p{
	font-family:var(--tl-font, inherit) !important;
	font-size:var(--tl-text-sz,17px) !important;
	font-weight:var(--tl-text-fw,400) !important;
	line-height:var(--tl-text-lh,1.6) !important;
	color:var(--tl-text-c,#d5d5d5) !important;
	margin:0 0 4px !important;
}
.tl-section.tl-upper .tl-card__title{ text-transform:uppercase !important; }

/* Bullet-Liste */
.tl-card__bullets{
	list-style:none !important;
	margin:16px 0 0 !important;
	padding:0 !important;
}
.tl-card__bullets li{
	display:flex;
	align-items:center;
	gap:12px;
	margin:0 0 10px !important;
	padding:0 !important;
	font-family:var(--tl-font, inherit) !important;
	font-size:var(--tl-bullet-sz,16px) !important;
	color:var(--tl-bullet-c,#fff) !important;
	line-height:1.4;
}
.tl-card__bullets li:last-child{ margin-bottom:0 !important; }
.tl-bullet__ico{
	flex:0 0 auto;
	width:calc(var(--tl-bullet-sz,16px) + 6px);
	height:calc(var(--tl-bullet-sz,16px) + 6px);
	object-fit:contain;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
.tl-bullet__ico--mask{
	background-color:var(--tl-check-c,#fff);
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}
.tl-bullet__ico--check{
	color:var(--tl-check-c,#fff);
	font-size:calc(var(--tl-bullet-sz,16px) + 4px);
	line-height:1;
	font-weight:700;
}

.tl-card__link{
	display:inline-block;
	margin-top:14px;
	color:var(--tl-line-c1,#e8ff00) !important;
	text-decoration:none;
	font-weight:700;
	border-bottom:1px solid currentColor;
}

/* Ausrichtung */
.tl-align-left  .tl-card__body{ text-align:left; }
.tl-align-center .tl-card__body{ text-align:center; }
.tl-align-center .tl-card__bullets li{ justify-content:center; }
.tl-align-right .tl-card__body{ text-align:right; }
.tl-align-right .tl-card__bullets li{ flex-direction:row-reverse; }
.tl-align-auto .tl-card--left .tl-card__body{ text-align:left; }
.tl-align-auto .tl-card--right .tl-card__body{ text-align:left; }

/* ---------- Einblend-Animationen ---------- */
.tl-section:not(.tl-anim-none) .tl-card{
	opacity:0;
	transition:opacity var(--tl-dur,700ms) ease, transform var(--tl-dur,700ms) cubic-bezier(.22,.9,.28,1);
}
.tl-anim-slide .tl-card--right{ transform:translateX(var(--tl-dist,60px)); }
.tl-anim-slide .tl-card--left{ transform:translateX(calc(var(--tl-dist,60px) * -1)); }
.tl-anim-zoom .tl-card{ transform:scale(.9); }
.tl-anim-flip .tl-card{ transform:perspective(900px) rotateY(12deg); transform-origin:center; }
.tl-anim-fade .tl-card{ transform:translateY(calc(var(--tl-dist,60px) / 2)); }

.tl-section:not(.tl-anim-none) .tl-card.is-visible{
	opacity:1;
	transform:none;
}

/* ---------- Mobil ---------- */
.tl-section.is-mobile .tl-wrap{ padding-left:calc(var(--tl-mobile-x,26px) + 22px); }
.tl-section.is-mobile .tl-card,
.tl-section.is-mobile .tl-card--left,
.tl-section.is-mobile .tl-card--right{
	margin-left:0;
	width:100%;
	max-width:100%;
}
.tl-section.is-mobile .tl-card__inner{
	max-width:100%;
	flex-direction:column;
	align-items:flex-start;
	gap:16px;
	padding:calc(var(--tl-card-pad,26px) * .8);
}
.tl-section.is-mobile .tl-card__media--img{ width:min(var(--tl-img-sz,190px), 60vw); }
.tl-section.is-mobile .tl-card__media--icon{
	width:min(var(--tl-img-sz,190px), 34vw);
	height:min(var(--tl-img-sz,190px), 34vw);
	max-width:none;
}
.tl-section.is-mobile .tl-card__title{
	font-size:var(--tl-m-title-sz,22px) !important;
}
.tl-section.is-mobile .tl-card__text,
.tl-section.is-mobile .tl-card__text p{
	font-size:var(--tl-m-text-sz,15px) !important;
}
.tl-section.is-mobile .tl-card__body{ text-align:left !important; }
.tl-section.is-mobile .tl-card__bullets li{ flex-direction:row; justify-content:flex-start; }
.tl-section.is-mobile.tl-anim-slide .tl-card--left,
.tl-section.is-mobile.tl-anim-slide .tl-card--right{
	transform:translateX(calc(var(--tl-dist,60px) / 2));
}
.tl-section.is-mobile .tl-card.is-visible{ transform:none; }
.tl-section.is-mobile.tl-wave-off .tl-wrap{ padding-left:0; }

@media (prefers-reduced-motion:reduce){
	.tl-section.tl-reduced .tl-card{ opacity:1 !important; transform:none !important; transition:none !important; }
	.tl-section.tl-reduced .tl-dot{ opacity:1 !important; transform:scale(1) !important; transition:none !important; }
}