/* CDM Scroll Timeline – Frontend
 *
 * Aufbau: .cst > .cst__wrap (Bezugsrahmen fuer die SVG)
 *               > .cst__svg  (Linie + Punkte, absolut, exakt so gross wie .cst__wrap)
 *               > .cst__list > .cst__item > .cst__card
 *
 * Bewusst OHNE Container Queries (container-type/cqi): Safari/WebKit berechnet
 * damit in Flex-Containern (Elementor) eine viel zu grosse Hoehe – das ergab den
 * riesigen Leerraum unter der Timeline auf iPhones. Einspaltig/schmal schaltet
 * das Skript per Klasse (.cst--stacked, .cst__card--narrow), ohne Skript greift
 * eine Media Query.
 *
 * Die Hoehe der Timeline ergibt sich ausschliesslich aus den Karten. Nichts ist
 * absolut positioniert, was ueber den Bereich hinausragen oder zusaetzlichen
 * Scrollweg erzeugen koennte, und es gibt keine Hoehen in vh.
 */

.cst{
	position:relative;
	box-sizing:border-box;
	width:100%;
	margin:0;
	padding:var(--cst-pad-y,60px) clamp(10px, 3vw, 16px);
	background:var(--cst-bg,#111f37);
	font-family:var(--cst-font,inherit);
	overflow:hidden;
	overflow:clip;
	overflow-clip-margin:0px;
}
.cst *,.cst *::before,.cst *::after{ box-sizing:border-box; }

.cst__wrap{
	position:relative;
	max-width:var(--cst-max,1400px);
	margin:0 auto;
}

/* ---------- Linie ---------- */
.cst__svg{
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	overflow:visible;
	pointer-events:none;
	z-index:0;
}
.cst__svg path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cst__track{ stroke:var(--cst-line); stroke-width:var(--cst-line-w,3px); opacity:.16; }
.cst__glowpath{ stroke:var(--cst-glow); }
.cst__fill{ stroke:var(--cst-line); stroke-width:var(--cst-line-w,3px); }
.cst__dot{
	fill:var(--cst-dot);
	opacity:0;
	transform:scale(.3);
	transform-box:fill-box;
	transform-origin:center;
	transition:opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.cst__dot.is-on{ opacity:1; transform:none; }

/* ---------- Liste ---------- */
.cst .cst__list{
	position:static;
	display:flex;
	flex-direction:column;
	gap:var(--cst-gap,110px);
	margin:0; padding:0;
	list-style:none;
}
.cst .cst__item{
	position:static;
	margin:0; padding:0;
	list-style:none;
}
.cst .cst__item::before,.cst .cst__item::marker{ content:none; }

/* ---------- Karte: Position ----------
   Abwechselnd rechts/links am Wellenscheitel, nie ausserhalb des Bereichs. */
.cst__card{
	position:relative;
	z-index:1;
	width:min(var(--cst-card-w,660px), 100%);
	margin:0;
	padding:var(--cst-card-pad,26px);
	background:var(--cst-card-bg,#111f37);
	border:var(--cst-border-w,1px) solid var(--cst-border,#25a037);
	border-radius:var(--cst-radius,20px);
	box-shadow:var(--cst-shadow,none);
	transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, opacity var(--cst-duration,700ms) ease;
}
.cst__item--r .cst__card{
	margin-left:clamp(0px, 50% + min(var(--cst-amp,130px), 50% - 40px), 100% - min(var(--cst-card-w,660px), 100%));
}
.cst__item--l .cst__card{
	margin-left:max(0px, 50% - min(var(--cst-amp,130px), 50% - 40px) - min(var(--cst-card-w,660px), 100%));
}
@media (hover:hover){
	.cst--hover .cst__card.is-in:hover{ transform:translateY(-4px); }
}

/* ---------- Karte: Inhalt ---------- */
.cst__grid{
	display:flex;
	flex-direction:var(--cst-dir,row);
	align-items:stretch;
	gap:var(--cst-block-gap,16px);
}
/* Anordnung, Bildbreite usw. kommen je Geraet aus den Variablen */
.cst__media{
	flex:var(--cst-media-flex, 0 0 42%);
	width:var(--cst-media-w, auto);
	min-width:0;
	align-self:var(--cst-media-self, center);
}
.cst__body{
	flex:var(--cst-body-flex, 1 1 0);
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:var(--cst-block-gap,16px);
}

/* Bild: standardmaessig immer vollstaendig, im Originalformat */
.cst .cst__img{
	display:block;
	width:var(--cst-img-width,100%);
	height:auto;
	max-width:100%;
	max-height:var(--cst-img-maxh,none);
	margin:0 auto;
	padding:0;
	border:0;
	border-radius:var(--cst-img-radius,10px);
	box-shadow:none;
	object-fit:contain;
}

/* Optional: auf festes Seitenverhaeltnis zuschneiden */
.cst.cst--img-crop .cst__img{
	width:100%;
	aspect-ratio:var(--cst-img-ratio,4/3);
	object-fit:cover;
}

/* Kopfzeile */
.cst__head{ display:flex; flex-direction:var(--cst-head-dir,row); align-items:var(--cst-head-align,center); gap:12px 14px; min-width:0; }
.cst__headtext{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; }

.cst__icon{
	flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	width:var(--cst-icon-size,46px);
	height:var(--cst-icon-size,46px);
	padding:calc(var(--cst-icon-size,46px) * .2);
	border-radius:var(--cst-icon-radius,10px);
	background:var(--cst-icon-bg);
	color:var(--cst-icon);
	overflow:hidden;
	line-height:1;
}
.cst .cst__icon .cst__i{
	display:block;
	width:auto; height:auto;
	font-size:calc(var(--cst-icon-size,46px) * .56);
	line-height:1;
	color:inherit;
}
.cst .cst__i.dashicons{ width:1em; height:1em; }
.cst .cst__i::before{ line-height:1; }
.cst__mask{
	display:block; width:100%; height:100%;
	background:currentColor;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}
.cst .cst__iimg{ display:block; width:100%; height:100%; max-width:none; object-fit:contain; border:0; }

/* Typografie */
.cst .cst__label{
	margin:0; padding:0;
	font-family:inherit;
	font-size:var(--cst-label-size,12px);
	font-weight:700;
	letter-spacing:.08em;
	line-height:1.3;
	color:var(--cst-label);
}
.cst--label-upper .cst__label{ text-transform:uppercase; }
.cst .cst__title{
	margin:0; padding:0;
	font-family:inherit;
	font-size:var(--cst-title-size,26px);
	font-weight:var(--cst-title-weight,700);
	line-height:1.18;
	letter-spacing:0;
	text-transform:none;
	color:var(--cst-title);
	overflow-wrap:break-word;
}
.cst .cst__text,
.cst .cst__text p{
	margin:0; padding:0;
	font-family:inherit;
	font-size:var(--cst-text-size,17px);
	line-height:var(--cst-lh,1.6);
	color:var(--cst-text);
	overflow-wrap:break-word;
}
.cst .cst__text p + p{ margin-top:.65em; }
.cst .cst__text a{ color:var(--cst-link); }

/* Liste */
.cst .cst__bullets{
	display:flex; flex-direction:column; gap:10px;
	margin:0; padding:0;
	list-style:none;
}
.cst .cst__bullets li{
	display:flex; align-items:flex-start; gap:12px;
	margin:0; padding:0;
	list-style:none;
	font-family:inherit;
	font-size:var(--cst-bullet-size,16px);
	line-height:1.4;
	color:var(--cst-bullet-text);
}
.cst .cst__bullets li::before,.cst .cst__bullets li::marker{ content:none; }
.cst__bicon{
	flex:0 0 auto;
	display:flex; align-items:center; justify-content:center;
	width:var(--cst-bullet-icon,20px);
	height:var(--cst-bullet-icon,20px);
	margin-top:calc((1.4em - var(--cst-bullet-icon,20px)) / 2);
	color:var(--cst-bullet);
	line-height:1;
}
.cst__bicon .cst__i{ font-size:var(--cst-bullet-icon,20px); width:auto; height:auto; line-height:1; color:inherit; }
.cst__bicon .cst__i.dashicons{ width:1em; height:1em; }
.cst__btext{ min-width:0; overflow-wrap:break-word; }
.cst__check{
	position:relative;
	display:block; width:100%; height:100%;
	border:2px solid currentColor;
	border-radius:50%;
}
.cst__check::after{
	content:"";
	position:absolute;
	left:34%; top:18%;
	width:28%; height:48%;
	border:solid currentColor;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}

.cst .cst__more{ margin:0; }
.cst .cst__link{
	color:var(--cst-link);
	font-weight:700;
	text-decoration:none;
	border-bottom:1px solid currentColor;
	overflow-wrap:anywhere;
}

/* Sehr schmale Karte: etwas engere Kopfzeile (Klasse setzt das Skript) */
.cst .cst__card--tiny .cst__head{ gap:8px 10px; }
.cst .cst__card--tiny .cst__headtext{ min-width:0; }
/* Schmale Textspalte: lange Woerter (z. B. "Langzeitbetreuung") trennen statt ueberlaufen */
.cst .cst__card--narrow .cst__title,
.cst .cst__card--narrow .cst__text,
.cst .cst__card--narrow .cst__btext{ -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere; }

/* ---------- Einblenden ----------
   Karten sind sichtbar, solange das Skript nicht nachweislich laeuft.
   Einmal eingeblendet bleiben sie sichtbar – auch beim Zurueckscrollen. */
.cst--js:not(.cst--reveal-none) .cst__card:not(.is-in){ opacity:0; }
.cst--js.cst--reveal-fade-up .cst__card:not(.is-in){ transform:translateY(28px); }
.cst--js.cst--reveal-zoom .cst__card:not(.is-in){ transform:scale(.94); }
.cst--js.cst--reveal-slide .cst__item--r .cst__card:not(.is-in){ transform:translateX(48px); }
.cst--js.cst--reveal-slide .cst__item--l .cst__card:not(.is-in){ transform:translateX(-48px); }
.cst__card.is-instant{ transition:none; }

@media (prefers-reduced-motion:reduce){
	.cst .cst__card{ opacity:1 !important; transform:none !important; transition:none !important; }
	.cst__dot{ transition:none; }
}