/* [agwp_flow] – WordPress -> Technik -> SEO -> GEO */

.agwp-flow { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 14px); margin-top: 56px; }

.agwp-flow__item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.agwp-flow__icon {
	width: clamp(56px, 8vw, 96px);
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 10px 36px var(--agwp-glow);
	animation: agwp-pulse 3s infinite;
}
.agwp-flow__icon img { display: block; width: 100%; height: 100%; }
#top .agwp-flow .agwp-flow__label { font-weight: 700; font-size: clamp(13px, 1.3vw, 16px); color: var(--agwp-ink); }

#top .agwp-flow .agwp-flow__link { flex: 1; min-width: 28px; position: relative; height: 40px; margin-bottom: 34px; }
.agwp-flow__wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agwp-flow__line { fill: none; stroke: rgba(120, 130, 255, .35); stroke-width: 2; }
.agwp-flow__dash {
	fill: none;
	stroke: var(--agwp-acc);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 14 26;
	animation: agwp-flow 1.2s linear infinite;
}
#top .agwp-flow .agwp-flow__link:nth-child(4) .agwp-flow__dash { animation-delay: -.3s; }
#top .agwp-flow .agwp-flow__link:nth-child(6) .agwp-flow__dash { animation-delay: -.6s; }

#top .agwp-flow .agwp-flow__node {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--agwp-acc);
	box-shadow: 0 0 12px var(--agwp-acc);
}
/* 2. Verbindung: "+" / 3. Verbindung: "+" im Kreis (wie Vorlage) */
#top .agwp-flow .agwp-flow__link:nth-child(4) .agwp-flow__node,
#top .agwp-flow .agwp-flow__link:nth-child(6) .agwp-flow__node {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	box-shadow: none;
	color: #B8A4F0;
	font: 700 20px/1 var(--agwp-font-body);
}
#top .agwp-flow .agwp-flow__link:nth-child(4) .agwp-flow__node::before,
#top .agwp-flow .agwp-flow__link:nth-child(6) .agwp-flow__node::before { content: "+"; }
#top .agwp-flow .agwp-flow__link:nth-child(6) .agwp-flow__node {
	background: var(--agwp-acc);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	box-shadow: 0 0 16px var(--agwp-glow);
}

html[data-theme="dark"] .agwp-flow__line { stroke: rgba(160, 110, 255, .45); }
html[data-theme="dark"] .agwp-flow__dash { stroke: #A77BFF; }
html[data-theme="dark"] #top .agwp-flow .agwp-flow__link:nth-child(4) .agwp-flow__node { color: #C9A8FF; }
html[data-theme="dark"] #top .agwp-flow .agwp-flow__link:nth-child(6) .agwp-flow__node { background: #7955FF; }

@keyframes agwp-flow { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
