/**
 * MM Scrolltext – Styles.
 *
 * Zweispaltiger Abschnitt (links Icon + Titel, rechts Text) in zwei Modi:
 * fixiert (beim Scrollen gepinnt) oder Überblendmodus (kein Scrolleffekt,
 * zeitgesteuerter Wechsel plus Punktreihe darunter). Alle Schritte liegen
 * im selben Grid-Feld übereinander – dadurch behält die Bühne automatisch
 * die Höhe des höchsten Schrittes und beim Wechsel springt nichts.
 *
 * Sämtliche gestaltbaren Werte laufen über CSS-Variablen, die das PHP-Widget
 * per Elementor-Selektoren auf {{WRAPPER}} setzt – also auf dem Elternknoten
 * von .mm-scrolltext. Deshalb dürfen die Variablen hier NICHT auf
 * .mm-scrolltext definiert werden: Bei Custom Properties gewinnt nicht die
 * Spezifität, sondern das nähere Element im Baum, und die Control-Werte wären
 * wirkungslos. Die Standardwerte stehen als Fallback im jeweiligen var().
 */

/* Elementor setzt global `html { scroll-behavior: smooth }` (custom-frontend.css,
   innerhalb von prefers-reduced-motion: no-preference). GSAP ScrollTrigger setzt
   beim Pinnen und Einrasten Scrollpositionen programmatisch – der Browser
   animiert diese Sprünge dann weich und die Fixierung verrutscht sichtbar
   gegenüber dem umgebenden Inhalt. Deshalb weiches Scrollen genau auf den
   Seiten abschalten, auf denen dieses Widget vorkommt.
   Spezifität 0-1-1 gegen Elementors 0-0-1 – die Regel gewinnt, auch aus der
   Media-Query heraus. Bewusst nur für den fixierten Modus: Ohne Pin setzt
   nichts programmatisch die Scrollposition, dann darf weiches Scrollen
   auf der Seite bleiben. */
html:has(.mm-scrolltext[data-fixieren="1"]) {
	scroll-behavior: auto;
}

.mm-scrolltext {
	position: relative;
	background: var(--mm-st-bg, transparent);
}

.mm-scrolltext__inner {
	min-height: var(--mm-st-hoehe, 100vh);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6vh var(--mm-st-innenabstand, 8vw);
}

.mm-scrolltext__stage {
	display: grid;
	width: 100%;
}

.mm-scrolltext__step {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: var(--mm-st-links-breite, 30%) 1fr;
	gap: var(--mm-st-spalten-abstand, 5rem);
	align-items: var(--mm-st-vertikal, center);
	margin: 0;
}

/* Seiten getauscht: Text links, Icon + Titel rechts. */
.mm-scrolltext--gedreht .mm-scrolltext__step {
	grid-template-columns: 1fr var(--mm-st-links-breite, 30%);
}

.mm-scrolltext--gedreht .mm-scrolltext__links {
	order: 2;
}

.mm-scrolltext--gedreht .mm-scrolltext__rechts {
	order: 1;
}

/* --- Linke Spalte: Icon + Titel ---------------------------------------- */
.mm-scrolltext__links {
	will-change: transform, opacity;
}

.mm-scrolltext__icon {
	display: block;
	width: var(--mm-st-icon-groesse, 56px);
	height: var(--mm-st-icon-groesse, 56px);
	margin-bottom: var(--mm-st-icon-abstand, 1.5rem);
	color: var(--mm-st-icon-farbe, #e2001a);
	font-size: var(--mm-st-icon-groesse, 56px);
	line-height: 1;
}

.mm-scrolltext__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Konturvariante: Icon-Bibliothek-SVGs als Linien-Icons darstellen. */
.mm-scrolltext--icon-kontur .mm-scrolltext__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--mm-st-icon-strichstaerke, 1.5);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mm-scrolltext__icon i {
	display: block;
	color: var(--mm-st-icon-farbe, #e2001a);
	font-size: inherit;
	line-height: 1;
}

.mm-scrolltext__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Basis-Typografie entspricht den Vorgaben der Typografie-Gruppe im Editor.
   Die doppelte Klasse ist Absicht: So gewinnt der Widget-Look gegen die
   globale Überschriften-Typografie des Elementor-Kits (.elementor-kit-x h3),
   verliert aber weiterhin gegen die Typografie-Gruppe des Widgets selbst –
   deren CSS (.elementor-widget-mm-scrolltext …) wird pro Seite später
   eingebunden und setzt sich damit über die Quellreihenfolge durch. */
.mm-scrolltext .mm-scrolltext__titel {
	margin: 0;
	color: var(--mm-st-titel-farbe, #1a1a1a);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	hyphens: auto;
}

/* --- Rechte Spalte: wechselnder Inhalt ---------------------------------- */
.mm-scrolltext__rechts {
	will-change: transform, opacity;
}

.mm-scrolltext .mm-scrolltext__text {
	max-width: var(--mm-st-text-max-breite, 52ch);
	color: var(--mm-st-text-farbe, #4a4a4a);
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.75;
}

.mm-scrolltext__text > :first-child {
	margin-top: 0;
}

.mm-scrolltext__text > :last-child {
	margin-bottom: 0;
}

/* --- Überblendmodus: kein Scrolleffekt ---------------------------------- */
/* Ohne Pin gibt es keinen Grund, eine Bildschirmhöhe zu belegen – der
   Abschnitt wird so hoch wie sein höchster Schritt plus Punktreihe. Das
   Höhe-Control ist in diesem Modus entsprechend ausgeblendet. */
.mm-scrolltext--ueberblenden .mm-scrolltext__inner {
	min-height: 0;
}

/* Überblendet wird der ganze Schritt auf einmal, nicht seine beiden Spalten
   einzeln: eine reine Deckkraft-Überblendung, ohne Versatz. */
.mm-scrolltext--ueberblenden .mm-scrolltext__step {
	will-change: opacity;
}

/* --- Punktreihe --------------------------------------------------------- */
.mm-scrolltext__punkte {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mm-st-punkte-ausrichtung, center);
	gap: var(--mm-st-punkte-luecke, 14px);
	margin-top: var(--mm-st-punkte-abstand-oben, 40px);
}

/* Doppelte Klasse ist Absicht – dasselbe Muster wie beim Info-Schalter der
   MM Flipkarten: Ein Punkt ist ein <button>, und darauf zielen zwei fremde
   Regeln mit mindestens gleicher Spezifität. Das Theme-Reset (`button`,
   0-1-0) gibt Polsterung, 1px-Rahmen und Radius, der Elementor-Kit
   (`.elementor-kit-N button`, 0-1-1) Rahmen in der Akzentfarbe, Radius und
   transparenten Hintergrund. Eine einfache Klasse (0-1-0) verliert gegen
   beide: Aus dem 10px-Punkt wird dann ein 34×24px großer, leerer Kasten mit
   rotem Rahmen – und weil auch der aktive Punkt so aussieht, ist die
   Punktreihe nicht mehr zu lesen. Deshalb hier mit 0-2-0 und vollständig
   zurücksetzen, statt nur die eigenen Eigenschaften zu setzen. */
.mm-scrolltext .mm-scrolltext__punkt {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: var(--mm-st-punkt-groesse, 10px);
	height: var(--mm-st-punkt-groesse, 10px);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: var(--mm-st-punkt-rahmen-staerke, 0px) solid var(--mm-st-punkt-rahmen-farbe, rgba(26, 26, 26, 0.35));
	border-radius: var(--mm-st-punkt-radius, 50px);
	background: var(--mm-st-punkt-farbe, rgba(26, 26, 26, 0.25));
	box-shadow: none;
	color: inherit;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background-color var(--mm-st-punkt-uebergang, 250ms) ease,
		border-color var(--mm-st-punkt-uebergang, 250ms) ease,
		width var(--mm-st-punkt-uebergang, 250ms) ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Vergrößerte Klickfläche, ohne die sichtbare Größe oder den eingestellten
   Abstand zu verfälschen – ein Punkt von 10px wäre sonst kaum zu treffen. */
.mm-scrolltext .mm-scrolltext__punkt::after {
	content: '';
	position: absolute;
	inset: -8px;
}

.mm-scrolltext .mm-scrolltext__punkt:hover {
	background: var(--mm-st-punkt-farbe-hover, rgba(26, 26, 26, 0.5));
	border-color: var(--mm-st-punkt-rahmen-farbe-hover, rgba(26, 26, 26, 0.6));
}

.mm-scrolltext .mm-scrolltext__punkt:focus-visible {
	outline: 2px solid var(--mm-st-punkt-farbe-aktiv, #e2001a);
	outline-offset: 4px;
}

.mm-scrolltext .mm-scrolltext__punkt--aktiv,
.mm-scrolltext .mm-scrolltext__punkt--aktiv:hover {
	width: var(--mm-st-punkt-aktiv-breite, 10px);
	background: var(--mm-st-punkt-farbe-aktiv, #e2001a);
	border-color: var(--mm-st-punkt-rahmen-farbe-aktiv, #e2001a);
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.mm-scrolltext .mm-scrolltext__punkt {
		transition: none;
	}
}

/* --- Ohne JS / vor der Initialisierung ---------------------------------- */
/* Bis scrolltext.js übernimmt, bleibt nur der erste Schritt sichtbar –
   sonst blitzen beim Laden alle Schritte übereinander auf. */
.mm-scrolltext:not([data-mm-initialized]) .mm-scrolltext__step:not(:first-child) {
	visibility: hidden;
}

/* --- Editor & statischer Fallback --------------------------------------- */
/* Im Elementor-Editor sowie unterhalb des Breakpoints stehen alle
   Schritte untereinander und sind vollständig sichtbar/bearbeitbar. */
.mm-scrolltext--statisch .mm-scrolltext__inner {
	min-height: 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.mm-scrolltext--statisch .mm-scrolltext__stage {
	gap: 3.5rem;
}

.mm-scrolltext--statisch .mm-scrolltext__step {
	grid-area: auto;
}

.mm-scrolltext--statisch .mm-scrolltext__step,
.mm-scrolltext--statisch .mm-scrolltext__links,
.mm-scrolltext--statisch .mm-scrolltext__rechts {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

/* In der statischen Darstellung stehen ohnehin alle Schritte untereinander –
   dann gibt es nichts umzuschalten und die Punktreihe entfällt. */
.mm-scrolltext--statisch .mm-scrolltext__punkte {
	display: none;
}

/* Unterhalb des eingestellten Breakpoints setzt scrolltext.js zusätzlich
   "--mobil" – dadurch folgt der einspaltige Umbruch dem Control-Wert und
   nicht der fest verdrahteten Media-Query weiter unten.
   Der Spaltenabstand wird hier absichtlich direkt gesetzt und nicht über
   --mm-st-spalten-abstand: einspaltig ist er der Abstand zwischen zwei
   gestapelten Zeilen, für den der Desktop-Wert regelmäßig zu groß ist. Als
   Variable am Wurzelelement würde er außerdem den Control schlagen. */
.mm-scrolltext--mobil .mm-scrolltext__step,
.mm-scrolltext--gedreht.mm-scrolltext--mobil .mm-scrolltext__step {
	grid-template-columns: 1fr;
	align-items: start;
	gap: 1.5rem;
}

.mm-scrolltext--gedreht.mm-scrolltext--mobil .mm-scrolltext__links,
.mm-scrolltext--gedreht.mm-scrolltext--mobil .mm-scrolltext__rechts {
	order: 0;
}

/* --- Mobil ohne JavaScript: alles untereinander ------------------------- */
/* Reiner Fallback bis scrolltext.js übernimmt. Danach entscheiden die
   Klassen --statisch / --mobil, die das Skript nach dem eingestellten
   Breakpoint setzt; im Überblendmodus läuft der Wechsel auch auf schmalen
   Bildschirmen weiter, dort dürfen die Schritte deshalb nicht dauerhaft
   untereinander stehen. */
@media (max-width: 767px) {
	.mm-scrolltext:not([data-mm-initialized]) .mm-scrolltext__step {
		gap: 1.5rem;
	}

	.mm-scrolltext:not([data-mm-initialized]) .mm-scrolltext__inner {
		min-height: 0;
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.mm-scrolltext:not([data-mm-initialized]) .mm-scrolltext__stage {
		gap: 3.5rem;
	}

	.mm-scrolltext:not([data-mm-initialized]) .mm-scrolltext__step,
	.mm-scrolltext--gedreht:not([data-mm-initialized]) .mm-scrolltext__step {
		grid-area: auto;
		grid-template-columns: 1fr;
		align-items: start;
	}

	.mm-scrolltext--gedreht:not([data-mm-initialized]) .mm-scrolltext__links,
	.mm-scrolltext--gedreht:not([data-mm-initialized]) .mm-scrolltext__rechts {
		order: 0;
	}

	/* Im Überblendmodus bleibt es auch hier beim ersten Schritt: Das Skript
	   legt die Schritte gleich wieder übereinander, alles andere wäre ein
	   sichtbarer Sprung beim Laden. */
	.mm-scrolltext:not([data-mm-initialized]):not(.mm-scrolltext--ueberblenden) .mm-scrolltext__step:not(:first-child) {
		visibility: visible;
	}
}