/* Scroll Timeline – Frontend (v8)
 *
 * Grundsatz ab v8: JEDE Groesse, Ausrichtung und Form haengt an einer
 * CSS-Variablen. Das Template gibt diese Variablen dreimal aus –
 * einmal als Basis (Desktop), einmal in einer Media Query fuer Tablet
 * und einmal fuer Mobil. Dadurch gilt jede Einstellung genau fuer das
 * Geraet, fuer das sie gesetzt wurde, und die Datei hier braucht keine
 * eigenen Breakpoints mehr.
 */

.tl-section{
	position:relative;
	background:var(--tl-bg,#000);
	padding:var(--tl-pad-y,60px) var(--tl-pad-x,clamp(12px,4vw,24px));
	overflow:hidden;
	box-sizing:border-box;
	--tl-amp:0px;
	--tl-overlap:0px;
	--tl-side:1;
}
/* Nur seitlich beschneiden – so wird kein Schatten und kein Glow oben
   oder unten abgeschnitten. */
@supports (overflow:clip){
	.tl-section{ overflow-x:clip; overflow-y:visible; }
}
.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%;
	/* Spur fuer die Linie im Ein-Spalten-Modus (mobil) */
	padding-left:var(--tl-lane,0px);
}

/* ---------- Welle ---------- */
.tl-wave{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
	overflow:visible;
	z-index:0;
	display:var(--tl-wave-d,block);
}
.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:1;
	display:var(--tl-dots-d,block);
}
.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:2; display:block; }

.tl-card{
	position:relative;
	container-type:inline-size;
	container-name:tlcard;
	width:var(--tl-card-real, var(--tl-card-w,560px));
	max-width:100%;
	margin-bottom:var(--tl-gap,110px);
}
.tl-card:last-child{ margin-bottom:0; }

/* Position setzt das Skript in Pixeln (--tl-ml-right / --tl-ml-left).
   Die clamp()-Werte sind nur der Startzustand, bis einmal gemessen wurde. */
.tl-card--right{
	--tl-side:1;
	margin-left:var(--tl-ml-right, clamp(0px, calc(50% + var(--tl-amp)), calc(100% - var(--tl-card-w,560px))));
}
.tl-card--left{
	--tl-side:-1;
	margin-left:var(--tl-ml-left, clamp(0px, calc(50% - var(--tl-amp) - var(--tl-card-w,560px)), calc(100% - var(--tl-card-w,560px))));
}

.tl-card__inner{
	display:flex;
	flex-direction:var(--tl-dir,row);
	gap:var(--tl-block-gap,16px);
	align-items:stretch;
	background:var(--tl-card-bg,#1b2437);
	border:var(--tl-border-w,1px) solid var(--tl-border-c,rgba(255,255,255,.08));
	border-radius:var(--tl-radius,24px);
	padding:var(--tl-inner-pad, 22px);
	width:100%;
	max-width:100%;
	overflow:hidden;
	box-shadow:var(--tl-card-shadow,none), var(--tl-card-glow,none);
	transition:transform .35s cubic-bezier(.22,.9,.28,1), box-shadow .35s ease;
}

/* Bildspalte */
.tl-card__mediacol{
	flex:0 0 auto;
	order:var(--tl-media-order,0);
	width:var(--tl-media-w, min(var(--tl-img-w,300px), 45%));
	max-width:100%;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:var(--tl-block-gap,16px);
}

/* Inhaltsspalte */
.tl-card__body{
	flex:1 1 auto;
	order:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:var(--tl-block-gap,16px);
	justify-content:center;
	padding:var(--tl-body-pad,0px);
	text-align:var(--tl-align,left);
}
.tl-card__body > .tl-block{ margin:0 !important; }

/* ---------- Block: Bild ----------
   Wichtig: die Originalmaße des Bildes (--tl-img-nat / --tl-img-nw /
   --tl-img-nh) stehen am Bildblock, nicht am Abschnitt. Sie dürfen deshalb
   NICHT in einer Variablen des Abschnitts stecken – dort würden sie ins
   Leere zeigen. Sie stehen darum hier als Ersatzwert direkt in der Regel.
   Das Template schaltet sie an, indem es die Abschnitts-Variable auf
   "initial" setzt: dann greift genau dieser Ersatzwert. */
.tl-block--image{
	position:relative;
	width:100%;
	max-width:var(--tl-imgb-maxw, min(100%, var(--tl-img-nw, 100%)));
	max-height:min( var(--tl-imgb-maxh, 100000px), var(--tl-imgb-nocap, var(--tl-img-nh, 100000px)) );
	min-height:var(--tl-imgb-minh,0px);
	height:var(--tl-img-h-item, var(--tl-imgb-h,auto));
	aspect-ratio:var(--tl-imgb-ar, var(--tl-img-nat, auto));
	flex:var(--tl-imgb-flex, 0 0 auto);
	border-radius:var(--tl-img-radius-eff, var(--tl-img-radius,18px));
	overflow:hidden;
}
.tl-block--image img{
	width:100%;
	height:var(--tl-imgb-imgh,100%);
	object-fit:var(--tl-img-fit,cover);
	display:block;
}
/* Hochformat wird eingepasst statt beschnitten, sobald es gestapelt ist */
.tl-block--image.is-portrait img{ object-fit:var(--tl-img-fit-portrait, var(--tl-img-fit,cover)); }
.tl-block--image::after{
	content:"";
	position:absolute; inset:0;
	border-radius:inherit;
	pointer-events:none;
	background:var(--tl-img-overlay,none);
}
/* Ausrichtung, wenn das Bild schmaler ist als seine Spalte */
.tl-card__mediacol > .tl-block--image,
.tl-card__body > .tl-block--image{
	margin-left:var(--tl-ba-ml,0);
	margin-right:var(--tl-ba-mr,0);
}

/* ---------- Block: Icon-Badge ---------- */
.tl-block--icon{
	flex:0 0 auto;
	width:min(var(--tl-icon-sz,46px), 100%);
	height:var(--tl-icon-sz,46px);
	/* Der Innenabstand waechst nie ueber das Icon hinaus */
	padding:min(var(--tl-icon-pad,0px), calc(var(--tl-icon-sz,46px) * .28));
	display:flex; align-items:center; justify-content:center;
	overflow:hidden;
}
.tl-card__body > .tl-block--icon,
.tl-card__mediacol > .tl-block--icon{
	margin-left:var(--tl-ba-ml,0);
	margin-right:var(--tl-ba-mr,0);
}
.tl-block--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;
}

/* ---------- Kopfzeile: Icon + Label + Überschrift ---------- */
.tl-card__header{
	display:flex;
	flex-direction:var(--tl-head-dir,row);
	align-items:var(--tl-head-align,center);
	justify-content:var(--tl-ba-just,flex-start);
	gap:var(--tl-head-gap,14px);
}
.tl-card__headtext{
	min-width:0;
	flex:1 1 auto;
	display:flex; flex-direction:column; gap:4px;
}

/* ---------- Block: Label ---------- */
.tl-section .tl-card .tl-card__eyebrow{
	font-family:var(--tl-font, inherit) !important;
	font-size:var(--tl-eyebrow-sz,13px) !important;
	font-weight:var(--tl-eyebrow-fw,700) !important;
	letter-spacing:var(--tl-eyebrow-ls,1.4px) !important;
	color:var(--tl-eyebrow-c,#22c55e) !important;
	text-transform:var(--tl-eyebrow-tt,none) !important;
	line-height:1.2 !important;
	margin:0 !important;
	padding:0 !important;
}

/* ---------- Block: Überschrift & Text ---------- */
.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;
	text-transform:var(--tl-title-tt,none) !important;
	margin:0 !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,#94a3b8) !important;
	margin:0 !important;
}
.tl-section .tl-card .tl-card__text p + p{ margin-top:.6em !important; }

/* ---------- Block: Icon-Liste ---------- */
.tl-card__bullets{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
	display:grid;
	grid-template-columns:repeat(var(--tl-bullet-cols,1), minmax(0,1fr));
	gap:calc(var(--tl-bullet-gy,12px) / 2) 24px;
}
.tl-card__bullets li{
	display:flex;
	align-items:center;
	justify-content:var(--tl-bullet-just,flex-start);
	flex-direction:var(--tl-bullet-dir,row);
	gap:12px;
	margin:0 !important;
	padding:0 0 calc(var(--tl-bullet-gy,12px) / 2) !important;
	border-bottom:var(--tl-bullet-line,none);
	font-family:var(--tl-font, inherit) !important;
	font-size:var(--tl-bullet-sz,16px) !important;
	color:var(--tl-bullet-c,#e2e8f0) !important;
	line-height:1.4;
}
.tl-card__bullets li:last-child{ padding-bottom:0 !important; border-bottom:none; }
.tl-bullet__ico{
	flex:0 0 auto;
	width:var(--tl-bullet-isz,20px);
	height:var(--tl-bullet-isz,20px);
	padding:var(--tl-bullet-pad,0px);
	background-color:var(--tl-bullet-bg,transparent);
	border-radius:var(--tl-bullet-rad,50%);
	object-fit:contain;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:content-box;
}
.tl-bullet__ico--mask{
	background-color:var(--tl-check-c,#22c55e);
	-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,#22c55e);
	font-size:calc(var(--tl-bullet-isz,20px) * .8);
	line-height:1;
	font-weight:700;
	border:2px solid currentColor;
	border-radius:var(--tl-bullet-rad,50%);
	box-sizing:border-box;
}

/* ---------- Block: Link ---------- */
.tl-card__link{
	display:inline-block;
	color:var(--tl-line-c1,#22c55e) !important;
	text-decoration:none;
	font-weight:700;
	border-bottom:1px solid currentColor;
}

/* ---------- Einblend-Animationen ----------
   WICHTIG: Karten sind grundsaetzlich sichtbar. Der unsichtbare
   Startzustand wird ausschliesslich ueber [data-stpl-anim] gesetzt, und
   dieses Attribut vergibt das Skript erst, wenn es die Beobachtung jeder
   einzelnen Karte nachweislich eingerichtet hat.

   Damit kann keine Karte mehr unsichtbar Platz belegen, wenn das
   JavaScript gar nicht laeuft, abbricht – oder wenn der Browser es
   waehrend des Scrollens einfriert. Genau das macht Safari auf dem
   iPhone waehrend eines Wischers: requestAnimationFrame und setInterval
   stehen still, bis der Schwung zu Ende ist. Frueher blieb genau dann
   ein bildschirmgrosser leerer Bereich stehen.

   Der Effekt selbst steckt in Variablen und kann pro Geraet ein anderer
   sein (z. B. mobil ganz ohne Bewegung). */
.tl-card{
	transition:opacity var(--tl-dur,700ms) ease, transform var(--tl-dur,700ms) cubic-bezier(.22,.9,.28,1);
}
.tl-section[data-stpl-anim] .tl-card:not(.is-visible){
	opacity:var(--tl-anim-op0,0);
	transform:
		translate3d(
			calc(var(--tl-dist,60px) * var(--tl-side,1) * var(--tl-anim-x,0)),
			calc(var(--tl-dist,60px) * var(--tl-anim-y,0)),
			0)
		scale(var(--tl-anim-sc,1))
		perspective(900px)
		rotateY(var(--tl-anim-ry,0deg));
	will-change:transform,opacity;
}

@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; }
	.tl-card-hover .tl-card__inner{ transition:none; }
	.tl-card-hover .tl-card__inner:hover{ transform:none; }
}

/* ---------- Font-Icons (Dashicons / Font Awesome / Elementor) ---------- */
.tl-block--icon .tl-ico{
	display:flex; align-items:center; justify-content:center;
	width:100%; height:100%;
	font-size:calc(var(--tl-icon-sz,46px) * .58);
	line-height:1;
	color:inherit;
}
.tl-block--icon .tl-ico.dashicons{
	width:auto; height:auto;
	font-size:calc(var(--tl-icon-sz,46px) * .58) !important;
	line-height:1 !important;
}

/* Icon direkt vor dem Label */
.tl-card__eyebrow{
	display:flex;
	align-items:center;
	justify-content:var(--tl-bullet-just,flex-start);
	flex-direction:var(--tl-bullet-dir,row);
	gap:8px;
}
.tl-eyebrow__ico{
	flex:0 0 auto;
	width:var(--tl-eb-icon-sz,16px);
	height:var(--tl-eb-icon-sz,16px);
	display:inline-flex; align-items:center; justify-content:center;
}
.tl-eyebrow__ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.tl-eyebrow__ico .tl-icon__mask{ width:100%; height:100%; }
.tl-eyebrow__ico .tl-ico{
	font-size:var(--tl-eb-icon-sz,16px) !important;
	width:auto !important; height:auto !important; line-height:1 !important;
}

/* Listen-Icons als Schrift-Icon */
.tl-bullet__ico--font{
	color:var(--tl-check-c,#22c55e);
	font-size:var(--tl-bullet-isz,20px) !important;
	width:var(--tl-bullet-isz,20px); height:var(--tl-bullet-isz,20px);
	line-height:1 !important;
	display:inline-flex; align-items:center; justify-content:center;
}
.tl-bullet__ico--font.dashicons{ width:auto; height:auto; }

/* ---------- Karten-Feinschliff ---------- */
.tl-card-sheen .tl-card__inner{ position:relative; }
.tl-card-sheen .tl-card__inner::after{
	content:"";
	position:absolute; inset:0;
	border-radius:inherit;
	pointer-events:none;
	background:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 42%);
}
.tl-card-hover .tl-card__inner:hover{
	transform:translateY(-4px);
	box-shadow:var(--tl-card-shadow,none), 0 18px 46px -12px rgba(0,0,0,.5);
}
/* Auf Touch-Geraeten gibt es kein echtes Hover – dort nie anheben */
@media (hover:none){
	.tl-card-hover .tl-card__inner:hover{ transform:none; }
}

/* ---------- Nichts darf aus seiner Box laufen ---------- */
.tl-section img,
.tl-section video,
.tl-section svg:not(.tl-wave){ max-width:100%; }
.tl-section .tl-block{ min-width:0; max-width:100%; }

.tl-section .tl-card .tl-card__title,
.tl-section .tl-card .tl-card__text,
.tl-section .tl-card .tl-card__text p,
.tl-section .tl-card .tl-card__eyebrow,
.tl-section .tl-card .tl-card__eyebrow span,
.tl-section .tl-card .tl-card__bullets li,
.tl-section .tl-card .tl-card__bullets li span,
.tl-section .tl-card .tl-card__link{
	overflow-wrap:anywhere;
	word-break:normal;
	min-width:0;
}

/* ---------- Sicherheitsnetz nach echter Kartenbreite ----------
   Greift zusaetzlich zu den Geraetewerten, damit auch in einer schmalen
   Spalte, einem Popup oder einem Slider nichts abgeschnitten wird. */
@container tlcard (max-width: 460px){
	.tl-card__header{ gap:10px; }
	.tl-block--icon{
		width:min(var(--tl-icon-sz,46px), 26cqw);
		height:min(var(--tl-icon-sz,46px), 26cqw);
	}
	.tl-bullet__ico{
		width:min(var(--tl-bullet-isz,20px), 7cqw);
		height:min(var(--tl-bullet-isz,20px), 7cqw);
	}
}
@container tlcard (max-width: 300px){
	.tl-card__header{ flex-wrap:wrap; }
	.tl-card__headtext{ flex:1 1 100%; }
	.tl-card__bullets{ grid-template-columns:minmax(0,1fr); gap:calc(var(--tl-bullet-gy,12px) / 2) 12px; }
}
@supports (width: 1cqw){
	.tl-section .tl-card .tl-card__title{ font-size:min(var(--tl-title-sz,30px), 13cqw) !important; }
	.tl-section .tl-card .tl-card__text,
	.tl-section .tl-card .tl-card__text p{ font-size:min(var(--tl-text-sz,17px), 8cqw) !important; }
	.tl-section .tl-card .tl-card__eyebrow{ font-size:min(var(--tl-eyebrow-sz,13px), 7cqw) !important; }
	.tl-section .tl-card .tl-card__bullets li{ font-size:min(var(--tl-bullet-sz,16px), 8cqw) !important; }
}