/* ── Waldner-Icons ───────────────────────────────────────────────────────────
   Linien-Icons aus dem Waldner-ResourceSpace (Serie „Icon Hohenloher“,
   Feedback Lisa 06.10.: „unsere Icon-Sprache“). Die Originale sind dunkle PNGs
   mit transparentem Grund; als Maske übernehmen sie die Textfarbe und laufen
   so auf hellem Grund blau und auf blauem Grund hellblau. */
.w-icon {
	display: inline-block;
	flex: none;
	width: 3rem;
	height: 3rem;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.w-icon--takt { -webkit-mask-image: url("../../icons/waldner/takt.png"); mask-image: url("../../icons/waldner/takt.png"); }
.w-icon--dosierung { -webkit-mask-image: url("../../icons/waldner/dosierung.png"); mask-image: url("../../icons/waldner/dosierung.png"); }
.w-icon--formate { -webkit-mask-image: url("../../icons/waldner/formate.png"); mask-image: url("../../icons/waldner/formate.png"); }
.w-icon--liefersicherheit { -webkit-mask-image: url("../../icons/waldner/liefersicherheit.png"); mask-image: url("../../icons/waldner/liefersicherheit.png"); }
.w-icon--planung { -webkit-mask-image: url("../../icons/waldner/planung.png"); mask-image: url("../../icons/waldner/planung.png"); }
.w-icon--inbetriebnahme { -webkit-mask-image: url("../../icons/waldner/inbetriebnahme.png"); mask-image: url("../../icons/waldner/inbetriebnahme.png"); }
.w-icon--schulung { -webkit-mask-image: url("../../icons/waldner/schulung.png"); mask-image: url("../../icons/waldner/schulung.png"); }
.w-icon--ferndiagnose { -webkit-mask-image: url("../../icons/waldner/ferndiagnose.png"); mask-image: url("../../icons/waldner/ferndiagnose.png"); }
.w-icon--service { -webkit-mask-image: url("../../icons/waldner/service.png"); mask-image: url("../../icons/waldner/service.png"); }

/* Die ältere Serie (Ressourcen 33xx) hat mehr Weißraum um die Linie als die
   neuere (49xx). Leicht vergrößert stehen beide optisch gleich groß da. */
.w-icon--dosierung,
.w-icon--planung,
.w-icon--ferndiagnose {
	-webkit-mask-size: 130%;
	mask-size: 130%;
}

/* ── Icon-Streifen ohne Zahlen ───────────────────────────────────────────────
   Variante des Kennzahlen-Streifens für Inhalte ohne Messwert, wie auf der
   Fly-One-Seite: blaue Fläche, hellblaue Icons, Label in Versalien und darunter
   eine Subline. Die Subline darf zwei Zeilen haben; die Spalten bleiben gleich
   breit, die Labels stehen auf einer Linie. */
.icon-strip {
	background: var(--c-primary);
	color: var(--c-white);
	padding-block: 4rem;
}

.icon-strip__title {
	margin: 0 0 3rem;
	font-size: var(--fs-section);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: var(--c-white);
}

.icon-strip__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.icon-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.icon-strip__icon {
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1.25rem;
	color: var(--c-sky);
}

.icon-strip__label {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--c-white);
	hyphens: auto;
}

/* Weiß mit 0.9 Deckkraft auf --c-primary: über 5:1 */
.icon-strip__sub {
	margin: 0;
	max-width: 14rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgb(var(--c-white-rgb) / 0.9);
}

@media (max-width: 64rem) {
	.icon-strip__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 48rem) {
	.icon-strip {
		padding-block: 3rem;
	}

	.icon-strip__title {
		margin-bottom: 2rem;
		font-size: var(--fs-h2);
	}

	.icon-strip__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Bewegung ────────────────────────────────────────────────────────────────
   Wie die Icon-Banner auf waldner.de (Fly One, Feedback Lisa 14.10.): Die
   Einträge gleiten nacheinander hoch, sobald der Streifen ins Bild kommt
   (Klassen aus icon-reveal.js), Dauer, Kurve und Versatz wie im Original.
   Beim Scrollen fächern die Icons leicht auf; mittig im Bild stehen sie auf
   einer Linie. Ohne Unterstützung für scroll-getriebene Animationen oder mit
   „Bewegung reduzieren“ bleibt alles statisch. */
[data-reveal] .stat,
[data-reveal] .icon-strip__item {
	transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal].is-armed:not(.is-revealed) .stat,
[data-reveal].is-armed:not(.is-revealed) .icon-strip__item {
	opacity: 0;
	transform: translateY(1.125rem) scale(0.98);
}

[data-reveal] .stat:nth-child(2),
[data-reveal] .icon-strip__item:nth-child(2) { transition-delay: 150ms; }
[data-reveal] .stat:nth-child(3),
[data-reveal] .icon-strip__item:nth-child(3) { transition-delay: 300ms; }
[data-reveal] .stat:nth-child(4),
[data-reveal] .icon-strip__item:nth-child(4) { transition-delay: 450ms; }
[data-reveal] .icon-strip__item:nth-child(5) { transition-delay: 600ms; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 64.0625rem) {
		[data-reveal] .w-icon {
			animation: w-icon-drift linear both;
			animation-timeline: view();
		}

		[data-reveal] :nth-child(1) > .w-icon { --drift: -1.25rem; }
		[data-reveal] :nth-child(2) > .w-icon { --drift: -0.625rem; }
		[data-reveal] :nth-child(3) > .w-icon { --drift: 0rem; }
		[data-reveal] :nth-child(4) > .w-icon { --drift: 0.625rem; }
		[data-reveal] :nth-child(5) > .w-icon { --drift: 1.25rem; }

		/* Bei vier Kennzahlen symmetrisch um die Mitte */
		[data-reveal] .stat:nth-child(1) > .w-icon { --drift: -0.9375rem; }
		[data-reveal] .stat:nth-child(2) > .w-icon { --drift: -0.3125rem; }
		[data-reveal] .stat:nth-child(3) > .w-icon { --drift: 0.3125rem; }
		[data-reveal] .stat:nth-child(4) > .w-icon { --drift: 0.9375rem; }
	}
}

@keyframes w-icon-drift {
	from { translate: 0 calc(var(--drift, 0rem) * -1); }
	to { translate: 0 var(--drift, 0rem); }
}