/* [agwp_steps] – Arbeitsweise als Zeitstrahl
   steps.js setzt --p (0–1) je nach Scrollposition. Jeder Schritt berechnet daraus seinen eigenen
   Fortschritt --q. Ohne JS gilt --p: 1 = Endzustand (Linie voll, Nummern gefuellt). */

#top .agwp-steps {
	--agwp-steps-gap: clamp(20px, 3vw, 32px);
	position: relative;
	padding-top: 34px;
	--p: 1;
}
#top .agwp-steps .agwp-steps__item { --q: clamp(0, calc(var(--p) * var(--n, 4) - var(--i, 0)), 1); }
/* Schiene */
#top .agwp-steps::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--agwp-line);
}
/* Fuellung */
#top .agwp-steps .agwp-steps__line {
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%);
	transform-origin: left center;
	transform: scaleX(var(--p));
}

#top .agwp-steps .agwp-steps__list {
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: var(--agwp-steps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
#top .agwp-steps .agwp-steps__item {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
#top .agwp-steps .agwp-steps__item:hover { transform: translateY(-4px); }

/* Knoten auf der Linie */
#top .agwp-steps .agwp-steps__node {
	position: absolute;
	top: -34px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--agwp-acc) calc(var(--q) * 100%), var(--agwp-bg));
	border: 2px solid color-mix(in oklab, var(--agwp-acc) calc(var(--q) * 100%), var(--agwp-line));
	box-shadow: 0 0 0 calc(var(--q) * 5px) var(--agwp-glow);
}
#top .agwp-steps .agwp-steps__item:hover .agwp-steps__node { animation: agwp-pulse 1.6s infinite; }

/* Nummer: Kontur + Verlaufsfuellung */
#top .agwp-steps .agwp-steps__num {
	display: inline-block;
	margin-bottom: 18px;
	font-family: var(--agwp-font-head);
	font-size: clamp(3rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--agwp-accink);
	background-image: linear-gradient(90deg, #2464D8 0%, #1DA8EB 60%, #67D9E9 100%);
	background-repeat: no-repeat;
	background-size: calc(var(--q) * 100%) 100%;
	-webkit-background-clip: text;
	background-clip: text;
}

#top .agwp-steps .agwp-steps__title {
	margin: 0 0 10px;
	font-family: var(--agwp-font-head);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.015em;
	color: var(--agwp-ink);
}
#top .agwp-steps .agwp-steps__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--agwp-ink2); text-wrap: pretty; }

/* Dauer / Ergebnis */
#top .agwp-steps .agwp-steps__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px dashed var(--agwp-line);
}
#top .agwp-steps .agwp-steps__meta > div { display: flex; gap: 10px; align-items: baseline; }
#top .agwp-steps .agwp-steps__meta dt {
	flex: none;
	min-width: 68px;
	margin: 0;
	font: 500 .6875rem/1.4 var(--agwp-font-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--agwp-ink2);
}
#top .agwp-steps .agwp-steps__meta dd { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--agwp-ink); }

/* ---- Tablet: 2 Spalten, ohne durchgehende Linie; Nummern fuellen sich pro Schritt ---- */
@media (min-width: 601px) and (max-width: 989px) {
	#top .agwp-steps { padding-top: 0; }
	#top .agwp-steps::before,
	#top .agwp-steps .agwp-steps__line,
	#top .agwp-steps .agwp-steps__node { display: none; }
	#top .agwp-steps .agwp-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
	#top .agwp-steps .agwp-steps__item { border-top: 2px solid var(--agwp-acc); padding-top: 22px; }
}

/* ---- Handy: senkrechter Zeitstrahl links ---- */
@media (max-width: 600px) {
	#top .agwp-steps { padding: 0 0 0 30px; }
	#top .agwp-steps::before,
	#top .agwp-steps .agwp-steps__line { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
	#top .agwp-steps .agwp-steps__line { transform-origin: center top; transform: scaleY(var(--p)); background: linear-gradient(180deg, #2464D8 0%, #1DA8EB 55%, #67D9E9 100%); }
	#top .agwp-steps .agwp-steps__list { grid-template-columns: 1fr; row-gap: 36px; }
	#top .agwp-steps .agwp-steps__node { top: 10px; left: -30px; }
	#top .agwp-steps .agwp-steps__num { margin-bottom: 10px; }
	#top .agwp-steps .agwp-steps__item:hover { transform: none; }

}