/* Scroll-Fill-Statement – Klasse "agwp-fill" am Textblock
   Ohne JS (oder bei verzoegertem JS) ist der Text normal lesbar. */

#top .agwp-fill,
#top .agwp-fill :is(p, h1, h2, h3, h4) {
	font-family: var(--agwp-font-head);
	font-size: var(--agwp-fs-display);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
	color: var(--agwp-ink);
	max-width: 1150px;
	margin: 0;
	text-wrap: balance;
}

/* Wird erst aktiv, wenn fill.js die Klasse setzt */
#top .agwp-fill.is-fill-on .agwp-fill__text {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image:
		linear-gradient(var(--agwp-ink), var(--agwp-ink)),
		linear-gradient(color-mix(in oklab, var(--agwp-ink) 16%, transparent), color-mix(in oklab, var(--agwp-ink) 16%, transparent));
	background-repeat: no-repeat;
	background-size: var(--p, 0%) 100%, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	#top .agwp-fill.is-fill-on .agwp-fill__text { background-size: 100% 100%, 100% 100%; }
}