/* KT Kurven-Timeline */
.ktct {
	--ktct-line-w: 4px;
	--ktct-line-color: #fff;
	--ktct-glow-color: transparent;
	--ktct-glow-size: 0px;
	--ktct-node-size: 52px;
	--ktct-dot-size: 26px;
	--ktct-ring-w: 2px;
	--ktct-halo-size: 86px;
	--ktct-halo-color: rgba(214, 52, 127, 0.2);
	--ktct-active-dot: 38px;
	--ktct-hover-scale: 1.12;
	--ktct-dur: 0.3s;
	--ktct-pulse: 2.4s;
	--ktct-label-w: 360px;
	--ktct-stack-gap: 36px;
	--ktct-stack-col: 90px;
	position: relative;
	box-sizing: border-box;
	background: linear-gradient(180deg, #EFEBDD 0%, #D8E5DC 100%);
}

.ktct *,
.ktct *::before,
.ktct *::after {
	box-sizing: border-box;
}

.ktct-canvas {
	position: relative;
	width: 100%;
	height: 580px;
}

/* ---------- Linie ---------- */
.ktct-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.ktct-stop-1 { stop-color: #fff; stop-opacity: .35; }
.ktct-stop-2 { stop-color: #fff; stop-opacity: 1; }

.ktct-path {
	fill: none;
	stroke-width: var(--ktct-line-w);
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 var(--ktct-glow-size) var(--ktct-glow-color));
}

.ktct-arrow {
	fill: #fff;
	stroke: #fff;
	stroke-width: 0;
	stroke-linejoin: round;
	transition: opacity .4s ease;
}

.ktct-arrow--chevron {
	fill: none !important;
	stroke-width: var(--ktct-line-w);
	stroke-linecap: round;
}

.ktct-anchor {
	position: absolute;
	width: 0;
	height: 0;
	left: 0;
	top: 10%;
	pointer-events: none;
}
.ktct-anchor--end { left: 93.8%; top: 3.5%; }

/* ---------- Begleittext ---------- */
.ktct-headline {
	position: absolute;
	left: 50%;
	top: 12%;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: 90%;
	margin: 0;
	text-align: center;
	z-index: 1;
}

/* ---------- Schritte ---------- */
.ktct-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ktct-item {
	position: absolute;
	width: 0;
	height: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
}

.ktct-item:hover { z-index: 2; }

.ktct-link,
.ktct-link:hover,
.ktct-link:focus {
	color: inherit;
	text-decoration: none;
}

.ktct-node {
	--s: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--ktct-node-size);
	height: var(--ktct-node-size);
	border: var(--ktct-ring-w) solid #D6347F;
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%) scale(var(--s));
	transition: transform var(--ktct-dur) ease, background-color var(--ktct-dur) ease,
		border-color var(--ktct-dur) ease, box-shadow var(--ktct-dur) ease;
}

.ktct-item:hover .ktct-node,
.ktct-item:focus-within .ktct-node {
	--s: var(--ktct-hover-scale);
}

.ktct-dot {
	width: var(--ktct-dot-size);
	height: var(--ktct-dot-size);
	border-radius: 50%;
	background: #D6347F;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--ktct-dur) ease, color var(--ktct-dur) ease,
		width var(--ktct-dur) ease, height var(--ktct-dur) ease;
}

.ktct-dot i { font-size: 1em; }
.ktct-dot svg { width: 1em; height: 1em; fill: currentColor; }
.ktct-dot-text { font-weight: 600; }

.ktct-marker--none .ktct-dot { display: none; }

/* Aktiver Schritt */
.ktct-item--active .ktct-node {
	width: var(--ktct-halo-size);
	height: var(--ktct-halo-size);
	border-width: 0;
	background: var(--ktct-halo-color);
}

.ktct-item--active .ktct-dot {
	width: var(--ktct-active-dot);
	height: var(--ktct-active-dot);
	background: #EC3388;
}

.ktct--pulse .ktct-item--active .ktct-node::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--ktct-halo-color);
	animation: ktct-pulse var(--ktct-pulse) ease-out infinite;
	pointer-events: none;
	z-index: -1;
}

@keyframes ktct-pulse {
	0%   { transform: scale(1);   opacity: .9; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Texte ---------- */
.ktct-label {
	position: absolute;
	display: block;
	width: var(--ktct-label-w);
	text-align: center;
	transition: background-color var(--ktct-dur) ease;
}

.ktct-label--below {
	top: var(--ktct-offset);
	left: 0;
	transform: translateX(calc(-50% + var(--ktct-shift)));
}

.ktct-label--above {
	bottom: var(--ktct-offset);
	left: 0;
	transform: translateX(calc(-50% + var(--ktct-shift)));
}

.ktct-label--right {
	left: var(--ktct-offset);
	top: 0;
	text-align: left;
	transform: translateY(calc(-50% + var(--ktct-shift)));
}

.ktct-label--left {
	right: var(--ktct-offset);
	top: 0;
	text-align: right;
	transform: translateY(calc(-50% + var(--ktct-shift)));
}

/* Offset wird pro Item gesetzt und vererbt sich auf das Label */
.ktct-item { --ktct-offset: 100px; --ktct-shift: 0px; }

.ktct-title {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	line-height: 1.2;
	color: #2D4A66;
	transition: color var(--ktct-dur) ease;
}

.ktct-item--active .ktct-title { color: #D6347F; }

.ktct-subtitle {
	display: block;
	color: #6E8597;
	transition: color var(--ktct-dur) ease;
}

/* ---------- Einblend-Animation ---------- */
.ktct--anim .ktct-item {
	opacity: 0;
	translate: 0 14px;
	transition: opacity .6s ease, translate .6s ease;
}

.ktct--anim .ktct-item.is-visible {
	opacity: 1;
	translate: 0 0;
}

.ktct--anim .ktct-headline {
	opacity: 0;
	transition: opacity .8s ease;
}

.ktct--anim.is-inview .ktct-headline { opacity: 1; }

/* ---------- Vertikale Liste (Mobil) ---------- */
.ktct--stacked .ktct-canvas {
	height: auto !important;
}

.ktct--stacked .ktct-svg,
.ktct--stacked .ktct-anchor {
	display: none;
}

.ktct--stacked .ktct-headline {
	position: static;
	transform: none;
	width: auto;
	max-width: none !important;
	margin-bottom: var(--ktct-stack-gap);
}

.ktct--stacked .ktct-items {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ktct-stack-gap);
}

.ktct--stacked .ktct-items::before {
	content: "";
	position: absolute;
	left: calc(var(--ktct-stack-col) / 2);
	top: 0;
	bottom: 0;
	width: var(--ktct-line-w);
	transform: translateX(-50%);
	background: var(--ktct-line-color);
	border-radius: 99px;
}

.ktct--stacked .ktct-item {
	position: relative;
	left: auto !important;
	top: auto !important;
	width: auto;
	height: auto;
}

.ktct--stacked .ktct-item > .ktct-link,
.ktct--stacked .ktct-item {
	display: grid;
	grid-template-columns: var(--ktct-stack-col) 1fr;
	align-items: center;
}

.ktct--stacked .ktct-item > .ktct-link { grid-column: 1 / -1; }

.ktct--stacked .ktct-node {
	position: relative;
	left: auto;
	top: auto;
	justify-self: center;
	transform: scale(var(--s));
}

.ktct--stacked .ktct-label {
	position: static;
	width: auto;
	transform: none !important;
	text-align: left !important;
}

@media (prefers-reduced-motion: reduce) {
	.ktct *,
	.ktct *::after {
		animation: none !important;
		transition: none !important;
	}
	.ktct--anim .ktct-item,
	.ktct--anim .ktct-headline {
		opacity: 1;
		translate: 0 0;
	}
}

/* Standard-Innenabstand in der vertikalen Ansicht (per Elementor überschreibbar) */
.ktct.ktct--stacked { padding: 32px 20px; }
