/* MoSeven + · Scroll Farbtext */

/* Volle Breite, damit Elementor die Höhe auf Mobil (Flexbox mit Umbruch) richtig misst. */
.elementor-element.elementor-widget-moseven-scroll-color-text {
	width: 100%;
}

.msp-st {
	--msp-st-a: #5c5c5c;
	--msp-st-b: #ffffff;
	--msp-st-feather: 12;
	--msp-st-p: 0%;
	position: relative;
	width: 100%;
}

.msp-st__text {
	color: var(--msp-st-a);
}

.msp-st .msp-st__text > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------- Farbwechsel als Fläche
   Der Hintergrund des Textblocks ist ein Verlauf B → A und wird auf die Buchstaben
   zugeschnitten. Das Skript schiebt die Grenze (--msp-st-p) mit dem Scrollen. */
.msp-st--ltr { --msp-st-dir: to right; }
.msp-st--rtl { --msp-st-dir: to left; }
.msp-st--ttb { --msp-st-dir: to bottom; }
.msp-st--btt { --msp-st-dir: to top; }

.msp-st--ltr .msp-st__text,
.msp-st--rtl .msp-st__text,
.msp-st--ttb .msp-st__text,
.msp-st--btt .msp-st__text {
	background-image: linear-gradient(
		var(--msp-st-dir),
		var(--msp-st-b) calc(var(--msp-st-p) - var(--msp-st-feather) * 0.5%),
		var(--msp-st-a) calc(var(--msp-st-p) + var(--msp-st-feather) * 0.5%)
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Auch Links, Fettschrift usw. zeigen den Verlauf (Theme-Farben werden überdeckt). */
.msp-st--anim .msp-st__text * {
	-webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------- Zeile für Zeile
   Jeder Absatz bekommt einen Inline-Wrapper. Sein Hintergrund läuft über alle Zeilen
   hinweg wie ein langer Streifen; dessen Breite (--msp-st-pn, 0–100) wächst mit dem Scrollen. */
.msp-st--lines .msp-st__run {
	--msp-st-pn: 0;
	--msp-st-fpx: calc(var(--msp-st-feather) * 4px);
	background-image:
		linear-gradient(90deg, var(--msp-st-b) 0, var(--msp-st-b) calc(100% - var(--msp-st-fpx)), transparent 100%),
		linear-gradient(var(--msp-st-a), var(--msp-st-a));
	background-repeat: no-repeat;
	background-size:
		calc(var(--msp-st-pn) * 1% + var(--msp-st-pn) * var(--msp-st-fpx) / 100) 100%,
		100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}

/* ------------------------------------------------------ Proportional skalieren
   Der Text wird in der Referenzbreite gesetzt und als Ganzes auf die tatsächliche Breite
   gezoomt. Dadurch bleiben die Zeilenumbrüche auf jedem Gerät gleich. */
.msp-st--fluid.is-fit .msp-st__fit {
	/* --msp-st-fitw: schmalerer Satzbereich, sobald die Mindestgröße greift */
	width: var(--msp-st-fitw, var(--msp-st-ref, 1140px));
	max-width: none;
	zoom: var(--msp-st-zoom, 1);
}

.msp-st--fluid.is-fit.is-capped .msp-st__fit {
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	/* Ohne Animation direkt in Farbe B. */
	.msp-st--anim .msp-st__text,
	.msp-st--lines .msp-st__run {
		--msp-st-p: 200%;
		--msp-st-pn: 100;
	}
}

/* ======================================================== Hervorhebungen
   Das Skript legt um jede Textstelle ein <span class="msp-hl msp-hl--{effekt}">.
   .is-on = Auslöser erreicht (Effekt läuft bzw. ist fertig).
   Farben, Dauer, Verzögerung kommen als Variablen aus den Widget-Einstellungen.

   Hinweis zum Farbwechsel: Dort ist der Text durchsichtig und zeigt den Verlauf des
   Elternelements. Alles, was eine Fläche über die Buchstaben legt (Textmarker), oder
   die Textfarbe selbst ändert, setzt deshalb eine eigene Textfarbe. */
.msp-hl {
	--msp-hl-color: #f26b1f;
	--msp-hl-dur: 0.8s;
	--msp-hl-delay: 0s;
	--msp-hl-w: 4px;
	--msp-hl-offset: 0.05em;
	--msp-hl-mh: 100%;
	--msp-hl-n: 2;
	--msp-hl-ease: cubic-bezier(0.65, 0, 0.35, 1);
	/* Bewusst nicht positioniert: Positionierte Elemente nimmt der Browser beim Zuschneiden
	   des Farbverlaufs auf die Buchstaben nicht mit, der Text wäre dann unsichtbar. */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Fett, Links, einzelne Buchstaben usw. innerhalb der Stelle übernehmen deren Textfarbe
   (beim Farbwechsel wären sie sonst durchsichtig). */
.msp-st .msp-hl.is-on * {
	-webkit-text-fill-color: inherit;
}

/* Linien und Marker als Hintergrund: läuft auch über Zeilenumbrüche sauber mit. */
.msp-hl--underline,
.msp-hl--strike,
.msp-hl--marker {
	background-image: linear-gradient(var(--msp-hl-color), var(--msp-hl-color));
	background-repeat: no-repeat;
	background-size: 0% var(--msp-hl-w);
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
	transition: background-size var(--msp-hl-dur) var(--msp-hl-ease) 0s;
}

.msp-hl--underline {
	background-position: 0 calc(100% + var(--msp-hl-offset));
	padding-bottom: max(0px, var(--msp-hl-offset));
}

.msp-hl--strike {
	background-position: 0 58%;
}

.msp-hl--marker {
	background-position: 0 100%;
	background-size: 0% var(--msp-hl-mh);
	padding: 0 0.12em;
	margin: 0 -0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.msp-hl--underline.is-on,
.msp-hl--strike.is-on {
	background-size: 100% var(--msp-hl-w);
	transition-delay: var(--msp-hl-delay);
}

.msp-hl--marker.is-on {
	background-size: 100% var(--msp-hl-mh);
	transition-delay: var(--msp-hl-delay);
}

/* Beim Farbwechsel läge die Markerfläche über den durchsichtigen Buchstaben:
   eigene Textfarbe (Farbe B), solange keine Textfarbe gewählt ist. */
:where(.msp-st--anim) .msp-hl--marker.is-on {
	-webkit-text-fill-color: var(--msp-st-b);
	transition:
		background-size var(--msp-hl-dur) var(--msp-hl-ease) var(--msp-hl-delay),
		-webkit-text-fill-color 0.2s linear var(--msp-hl-delay);
}

/* Gewählte Textfarbe weich einblenden (die Farbe selbst setzt Elementor pro Eintrag). */
.msp-hl--underline.is-on,
.msp-hl--strike.is-on,
.msp-hl--circle.is-on {
	transition:
		background-size var(--msp-hl-dur) var(--msp-hl-ease) var(--msp-hl-delay),
		color 0.3s linear var(--msp-hl-delay),
		-webkit-text-fill-color 0.3s linear var(--msp-hl-delay);
}

/* ------------------------------------------------------------- Umkreisen
   Text und Kreis liegen in derselben Rasterzelle übereinander (statt absolut positioniert). */
.msp-hl--circle {
	display: inline-grid;
	white-space: nowrap;
	vertical-align: baseline;
}

.msp-hl--circle > .msp-hl__txt,
.msp-hl--circle > .msp-hl__circle {
	grid-area: 1 / 1;
}

.msp-hl__circle {
	align-self: stretch;
	justify-self: stretch;
	width: auto;
	height: auto;
	margin: -0.2em -0.3em -0.16em;
	overflow: visible;
	pointer-events: none;
	/* Eigene Größe ignorieren, sonst würde das SVG die Zeile erhöhen. */
	contain: size;
}

.msp-hl__circle path {
	fill: none;
	stroke: var(--msp-hl-color);
	stroke-width: var(--msp-hl-w);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	/* Ausgeblendet, sonst zeigt das runde Linienende vor dem Start einen Punkt. */
	stroke-opacity: 0;
	transition: stroke-dashoffset var(--msp-hl-dur) var(--msp-hl-ease) 0s, stroke-opacity 0s linear 0s;
}

.msp-hl--circle.is-on .msp-hl__circle path {
	stroke-dashoffset: 0;
	stroke-opacity: 1;
	transition-delay: var(--msp-hl-delay), var(--msp-hl-delay);
}

/* --------------------------------------------------------- Farbe wechseln */
.msp-hl--color {
	transition: color var(--msp-hl-dur) ease 0s, -webkit-text-fill-color var(--msp-hl-dur) ease 0s;
}

.msp-hl--color.is-on,
.msp-hl--flash.is-on,
.msp-hl--neon.is-on,
.msp-hl--wave.is-on {
	color: var(--msp-hl-color);
	-webkit-text-fill-color: var(--msp-hl-color);
}

.msp-hl--color.is-on {
	transition-delay: var(--msp-hl-delay);
}

/* -------------------------------------------------------------- Aufblitzen */
.msp-hl--flash.is-on {
	animation: msp-hl-flash var(--msp-hl-dur) ease-out var(--msp-hl-delay) var(--msp-hl-n) both;
}

.msp-hl--flash.is-on.is-alt {
	animation-name: msp-hl-flash-b;
}

@keyframes msp-hl-flash {
	0%   { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: none; }
	18%  { -webkit-text-fill-color: #fff; text-shadow: 0 0 0.12em #fff, 0 0 0.45em var(--msp-hl-color), 0 0 1em var(--msp-hl-color); }
	45%  { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: 0 0 0.25em var(--msp-hl-color); }
	100% { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: none; }
}

@keyframes msp-hl-flash-b {
	0%   { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: none; }
	18%  { -webkit-text-fill-color: #fff; text-shadow: 0 0 0.12em #fff, 0 0 0.45em var(--msp-hl-color), 0 0 1em var(--msp-hl-color); }
	45%  { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: 0 0 0.25em var(--msp-hl-color); }
	100% { -webkit-text-fill-color: var(--msp-hl-color); text-shadow: none; }
}

/* ----------------------------------------------------------- Neon an
   Flackert wie eine Leuchtröhre beim Einschalten und leuchtet dann. In den dunklen
   Momenten scheint die normale Textfarbe durch. */
.msp-hl--neon.is-on {
	text-shadow: 0 0 0.06em rgba(255, 255, 255, 0.6), 0 0 0.25em var(--msp-hl-color), 0 0 0.7em var(--msp-hl-color);
	animation: msp-hl-neon var(--msp-hl-dur) linear var(--msp-hl-delay) 1 both;
}

.msp-hl--neon.is-on.is-alt {
	animation-name: msp-hl-neon-b;
}

@keyframes msp-hl-neon {
	0%, 9%, 14%, 27%, 33% { opacity: 0.15; text-shadow: none; }
	5%, 12%, 22%, 30%, 40%, 100% { opacity: 1; text-shadow: 0 0 0.06em rgba(255, 255, 255, 0.6), 0 0 0.25em var(--msp-hl-color), 0 0 0.7em var(--msp-hl-color); }
}

@keyframes msp-hl-neon-b {
	0%, 9%, 14%, 27%, 33% { opacity: 0.15; text-shadow: none; }
	5%, 12%, 22%, 30%, 40%, 100% { opacity: 1; text-shadow: 0 0 0.06em rgba(255, 255, 255, 0.6), 0 0 0.25em var(--msp-hl-color), 0 0 0.7em var(--msp-hl-color); }
}

/* ---------------------------------------------------- Buchstaben springen */
.msp-hl--wave.is-on .msp-hl__ch {
	/* Erst beim Springen positionieren, dann hat der Buchstabe schon seine eigene Farbe. */
	position: relative;
	animation: msp-hl-wave var(--msp-hl-dur) cubic-bezier(0.3, 0, 0.3, 1) calc(var(--msp-hl-delay) + var(--i, 0) * 0.045s) 1 both;
}

.msp-hl--wave.is-on.is-alt .msp-hl__ch {
	animation-name: msp-hl-wave-b;
}

@keyframes msp-hl-wave {
	0%, 100% { top: 0; }
	35%      { top: -0.32em; }
	60%      { top: 0.04em; }
}

@keyframes msp-hl-wave-b {
	0%, 100% { top: 0; }
	35%      { top: -0.32em; }
	60%      { top: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
	/* Endzustand ohne Bewegung zeigen. */
	.msp-hl,
	.msp-hl .msp-hl__circle path {
		transition: none !important;
	}
	.msp-hl.is-on,
	.msp-hl.is-on .msp-hl__ch {
		animation: none !important;
	}
}