/**
 * MWS Typography Effects
 */

.mws-ew-te {
	--mws-ew-te-color: #15151d;
	--mws-ew-te-target: #4338ca;
	--mws-ew-te-mark: #4338ca;
	--mws-ew-te-stroke: 2.5;
	--mws-ew-te-offset-y: 0px;
	--mws-ew-te-mark-h: 0px;
	--mws-ew-te-icon-size: 28px;
	--mws-ew-te-accent-scale: 1;
	--mws-ew-te-duration: 0.85;
	--mws-ew-te-stagger: 0.1;
	--mws-ew-te-delay: 0;
	--mws-ew-te-hold: 1.5;
	--mws-ew-te-sweep: #4338ca;
	--mws-ew-te-sweep-text: #ffffff;
	--mws-ew-te-marker: #ffd23f;
	--mws-ew-te-grad-a: #4338ca;
	--mws-ew-te-grad-b: #a78bfa;
	--mws-ew-te-grad-c: #6d5ef8;

	position: relative;
	width: 100%;
	color: var(--mws-ew-te-color);
	box-sizing: border-box;
}

.mws-ew-te *,
.mws-ew-te *::before,
.mws-ew-te *::after {
	box-sizing: border-box;
}

.mws-ew-te__text {
	margin: 0;
	font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.5rem);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: inherit;
	/* Prevent long words (e.g. German compounds) from overflowing the section. */
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.mws-ew-te--title .mws-ew-te__text {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.4rem);
	font-weight: 700;
	line-height: 1.25;
}

.mws-ew-te__before,
.mws-ew-te__after {
	color: inherit;
}

.mws-ew-te__target {
	position: relative;
	z-index: 1;
	font-weight: 700;
	color: var(--mws-ew-te-target);
}

/* ---------- Stage (line-safe overlays) ---------- */
.mws-ew-te__stage {
	position: relative;
	display: block;
	width: 100%;
}

.mws-ew-te__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.mws-ew-te__line-svg {
	position: absolute;
	overflow: visible;
}

.mws-ew-te__ink {
	fill: none;
	stroke: var(--mws-ew-te-mark);
	stroke-width: var(--mws-ew-te-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.mws-ew-te__line-block {
	position: absolute;
	transform-origin: left center;
	transform: scaleX(0);
	border-radius: 4px;
}

.mws-ew-te__line-block:dir(rtl),
:is([dir="rtl"], .rtl) .mws-ew-te__line-block {
	transform-origin: right center;
}

.mws-ew-te__sweep-block {
	background: var(--mws-ew-te-sweep);
	z-index: 0;
}

.mws-ew-te__marker-block {
	background: var(--mws-ew-te-marker);
	mix-blend-mode: multiply;
	z-index: 0;
}

.mws-ew-te--sweep .mws-ew-te__target.is-swept {
	color: var(--mws-ew-te-sweep-text);
}

/* ---------- Accent (circle / verified) ---------- */
.mws-ew-te__accent {
	position: relative;
	display: inline-block;
	padding: 0.08em 0.18em;
	color: var(--mws-ew-te-target);
	font-weight: 700;
}

.mws-ew-te__accent .mws-ew-te__target {
	position: relative;
	z-index: 1;
}

.mws-ew-te__accent-svg {
	position: absolute;
	inset: calc(-0.55em * var(--mws-ew-te-accent-scale)) calc(-0.7em * var(--mws-ew-te-accent-scale));
	width: calc(100% + (1.4em * var(--mws-ew-te-accent-scale)));
	height: calc(100% + (1.1em * var(--mws-ew-te-accent-scale)));
	pointer-events: none;
	overflow: visible;
	z-index: 0;
}

/* ---------- Inline decorative icons ---------- */
.mws-ew-te__inline-icon {
	display: inline-block;
	width: var(--mws-ew-te-icon-size);
	height: auto;
	max-height: calc(var(--mws-ew-te-icon-size) * 1.35);
	vertical-align: middle;
	margin: 0 0.15em;
	overflow: visible;
	transform: rotate(-8deg);
	transform-origin: center;
}

.mws-ew-te--flash .mws-ew-te__inline-icon {
	transform: rotate(0deg);
}

/* ---------- Title split helpers ---------- */
.mws-ew-te__split {
	display: inline;
}

.mws-ew-te__word,
.mws-ew-te__char,
.mws-ew-te__line {
	display: inline-block;
	overflow-wrap: break-word;
	word-break: break-word;
}

.mws-ew-te.is-playing .mws-ew-te__word,
.mws-ew-te.is-playing .mws-ew-te__char,
.mws-ew-te.is-playing .mws-ew-te__line,
.mws-ew-te.is-playing .mws-ew-te__rotator-inner {
	will-change: transform, opacity, filter;
}

.mws-ew-te__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.mws-ew-te__mask--line {
	display: block;
	width: 100%;
	overflow: hidden;
}

/* ---------- Rotator ---------- */
/* Inline flow so text-align works; no flex (flex broke alignment). */
.mws-ew-te--rotator .mws-ew-te__text {
	display: block;
}

.mws-ew-te--rotator .mws-ew-te__before,
.mws-ew-te--rotator .mws-ew-te__after {
	display: inline;
}

.mws-ew-te__rotator {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: baseline;
	/* Keep multi-word phrases (e.g. "geprüfte Occasionen") on one line inside the slot. */
	white-space: nowrap;
	line-height: inherit;
	color: var(--mws-ew-te-target);
	font-weight: 700;
	margin-inline: 0.28em;
	max-width: 100%;
	box-sizing: border-box;
}

.mws-ew-te__rotator-inner {
	display: inline-block;
	white-space: nowrap;
	line-height: inherit;
	vertical-align: baseline;
}

.mws-ew-te__rotator--flip {
	perspective: 500px;
}

.mws-ew-te__rotator--flip .mws-ew-te__rotator-inner {
	transform-style: preserve-3d;
}

.mws-ew-te__tw {
	display: inline-flex;
	align-items: baseline;
	color: var(--mws-ew-te-target);
	font-weight: 700;
}

.mws-ew-te__tw-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-inline-start: 2px;
	background: var(--mws-ew-te-target);
	transform: translateY(2px);
	animation: mws-ew-te-blink 1s steps(1, end) infinite;
}

.mws-ew-te.is-offscreen .mws-ew-te__tw-cursor {
	animation-play-state: paused;
}

@keyframes mws-ew-te-blink {
	50% {
		opacity: 0;
	}
}

/* ---------- Gradient highlight ---------- */
.mws-ew-te__gradient,
.mws-ew-te--gradient .mws-ew-te__target {
	font-weight: 800;
	background-image: linear-gradient(
		90deg,
		var(--mws-ew-te-grad-a) 0%,
		var(--mws-ew-te-grad-c) 25%,
		var(--mws-ew-te-grad-b) 50%,
		var(--mws-ew-te-grad-c) 75%,
		var(--mws-ew-te-grad-a) 100%
	);
	background-size: 220% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mws-ew-te.is-looping .mws-ew-te__gradient,
.mws-ew-te.is-looping.mws-ew-te--gradient .mws-ew-te__target {
	will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
	.mws-ew-te__tw-cursor {
		animation: none;
	}

	.mws-ew-te__word,
	.mws-ew-te__char,
	.mws-ew-te__line,
	.mws-ew-te__rotator-inner {
		will-change: auto;
	}
}