.qtr-text-block {
	font-size:  var(--qtr-font-size, inherit);
	text-align: var(--qtr-text-align, inherit);
}

@media (max-width: 768px) {
	.qtr-text-block {
		font-size:  var(--qtr-font-size-mobile, var(--qtr-font-size, inherit));
		text-align: var(--qtr-text-align-mobile, var(--qtr-text-align, inherit));
	}

	/* Gesetzte Größe relativ zur Breite deckeln: lange Wörter in einer
	   Umrandung würden sonst die Seite verbreitern */
	.qtr-text-block[style*="--qtr-font-size"] {
		font-size: min(var(--qtr-font-size-mobile, var(--qtr-font-size)), 8vw);
	}

	.qtr-border {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	/* Unsichtbarer Startrahmen (scale 1.1) einer vollbreiten Umrandung
	   würde sonst über den Rand ragen und seitliches Scrollen erzeugen */
	.qtr-text-block {
		overflow-x: clip;
	}
}

/* Umrandungs-Spans */
.qtr-border {
	display: inline-block;
	position: relative;
	padding: 0.05em 0.4em;
	vertical-align: baseline;
}

.qtr-border--round  { border-radius: 50px; }
.qtr-border--square { border-radius: 3px;  }

/* Border als Pseudo-Element — animierbar unabhängig vom Text */
.qtr-border::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid currentColor;
	opacity: 0;
	transform: scale(1.1);
	transition:
		opacity       0.45s ease,
		transform     0.45s ease,
		border-radius 0.6s ease;
	pointer-events: none;
}

/* Startpositionen invertiert — round startet eckig, square startet rund */
.qtr-border--round::after  { border-radius: 3px;  }
.qtr-border--square::after { border-radius: 50px; }

/* Sichtbar-Zustand: Opacity/Scale für beide, border-radius tauscht */
.qtr-text-block.qtr-visible .qtr-border::after {
	opacity: 1;
	transform: scale(1);
}
.qtr-text-block.qtr-visible .qtr-border--round::after  { border-radius: 50px; }
.qtr-text-block.qtr-visible .qtr-border--square::after { border-radius: 3px;  }

/* Beim Hochscrollen: border-radius kehrt zu den Ausgangswerten zurück */
body.qtr-scrolling-up .qtr-text-block.qtr-visible .qtr-border--round::after  { border-radius: 3px;  }
body.qtr-scrolling-up .qtr-text-block.qtr-visible .qtr-border--square::after { border-radius: 50px; }

/* Stagger: jede Umrandung versetzt einblenden */
.qtr-text-block.qtr-visible .qtr-border:nth-of-type(1)::after { transition-delay: 0s;    }
.qtr-text-block.qtr-visible .qtr-border:nth-of-type(2)::after { transition-delay: 0.15s; }
.qtr-text-block.qtr-visible .qtr-border:nth-of-type(3)::after { transition-delay: 0.30s; }
.qtr-text-block.qtr-visible .qtr-border:nth-of-type(4)::after { transition-delay: 0.45s; }
.qtr-text-block.qtr-visible .qtr-border:nth-of-type(5)::after { transition-delay: 0.60s; }