/* Tandem — Feature-Bereich
   Der Hintergrund bleibt weiß; Farbe steckt ausschließlich in den Zeichnungen. */

.tandem-feature {
	position: relative;
	overflow: hidden;
    background-color: #f6d1d1;
	color: var(--tf-ink, #0C0C0C);
	min-height: var(--tf-h, 78vh);
	display: flex;
	align-items: center;
	justify-content: center;

	/* Die Section rutscht um die Header-Höhe nach oben und liegt damit unter
	   ihm — der Header bleibt sichtbar und bedienbar, die Fläche beginnt aber
	   ganz oben am Seitenanfang. --tf-overlap setzt der Shortcode. */
	margin-top: calc(-1 * var(--tf-overlap, 0px));
	padding: calc(clamp(30px, 6vw, 70px) + var(--tf-overlap, 0px))
	         clamp(18px, 5vw, 90px)
	         clamp(18px, 3vw, 40px);

	/* vertikales Scrollen über der Section muss möglich bleiben */
	touch-action: pan-y;
}

.tandem-feature__field {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tandem-feature__bit {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
	cursor: grab;
	touch-action: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-position: center;
	        mask-position: center;
	transition: color .4s ease;
}

.tandem-feature__bit:active {
	cursor: grabbing;
}

.tandem-feature__content {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
}

.tandem-feature__word {
	pointer-events: none;
	margin: 0;
	width: 100%;
	font-family: var( --tf-font, inherit );
	font-size: var( --tf-size, inherit );
	font-weight: normal;
	color: #d95a3b;
}

.tandem-feature__hint {
	position: absolute;
	z-index: 2;
	top: clamp(18px, 3vw, 34px);
	left: clamp(18px, 5vw, 90px);
	margin: 0;
	pointer-events: none;
	font-size: .66rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tandem-feature__bit {
		transition: none;
	}
}