/*
 * MM Slider – Styles.
 * Alle visuellen Werte kommen aus Elementor-Controls (CSS-Variablen bzw.
 * direkte Selektoren). Elementor schreibt sie auf {{WRAPPER}}, also auf den
 * Elternknoten von .mm-slider. Deshalb dürfen die Variablen hier NICHT auf
 * .mm-slider 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().
 */

.mm-slider {
	position: relative;
}

.mm-slider.mm-slider--full-width {
	/*
	 * Der Slider-Kasten reicht auf BEIDEN Seiten bis zum Bildschirmrand.
	 * Weil .swiper "overflow: hidden" trägt, ist dieser Kasten zugleich das
	 * Sichtfenster: Endete er links an der Containerkante, würde eine Folie
	 * beim Blättern dort abgeschnitten statt zum Rand hinauszulaufen.
	 *
	 * Die Karten beginnen trotzdem an der Containerkante – das erledigt
	 * slider.js über slidesOffsetBefore/After, nicht dieses Stylesheet.
	 *
	 * Die drei Variablen misst slider.js (abhängig von umgebendem Layout).
	 * Ohne JS greifen die Fallbacks und der Slider verhält sich wie ein
	 * normaler Block in Containerbreite plus Ausbruch nach rechts.
	 */
	width: var(--mm-viewport-breite, 100vw);
	max-width: none;
	margin-left: calc(-1 * var(--mm-full-bleed-left, 0px));
	margin-right: calc(-1 * var(--mm-full-bleed-right, 0px));
}

.mm-slider.swiper {
	background: var(--mm-track-bg, transparent);
}

.mm-slider__card {
	position: relative;
	/* Der Radius formt hier nur Rahmen und Schatten. Beschnitten wird im
	   Link darunter; ein overflow: hidden an dieser Stelle brächte in Safari
	   den Saum an den Ecken zurück (siehe .mm-slider__link). */
	border-radius: var(--mm-radius, 16px);
	height: auto;
}

/* Doppelte Klasse: Das Kit färbt jedes <a> mit der Akzentfarbe
   (.elementor-kit-N a, 0-1-1) – "color: inherit" mit einfacher Klasse
   verliert dagegen, und alle Texte in der Karte würden rot erben. */
.mm-slider .mm-slider__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	/* Hier wird die Karte abgerundet, und zwar so, dass Kartenhintergrund,
	   Bild und Overlay als eine Fläche beschnitten werden. Beschneidet man
	   sie einzeln (overflow: hidden mit border-radius), glättet jede Schicht
	   ihre Kante für sich, und an den Ecken scheint das Helle darunter als
	   Saum durch den dunklen Verlauf. Die Maske blendet nichts aus, sie
	   zwingt Chrome, die Schichten zuerst zusammenzusetzen; clip-path rundet
	   danach ab, und Safari braucht genau diese Form. Keins von beiden
	   reicht allein: Chrome setzt clip-path ohne Maske wieder Schicht für
	   Schicht um, Safari ignoriert die Maske beim Beschneiden. */
	background: var(--mm-card-bg, #e5e5e5);
	-webkit-mask-image: linear-gradient(#000, #000);
	mask-image: linear-gradient(#000, #000);
	clip-path: inset(0 round var(--mm-radius, 16px));
}

.mm-slider__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mm-ratio, 4/5);
	overflow: hidden;
}

/* Das Kit rundet global jedes Bild (.elementor-kit-N img { border-radius })
   – im Slider klippt aber die Karte, das Bild selbst bleibt eckig. */
.mm-slider .mm-slider__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform var(--mm-media-transition, 400ms) ease;
}

.mm-slider__card:hover .mm-slider__media img {
	transform: scale(var(--mm-media-zoom, 1));
}

/* Hover ändert am Overlay nur diese drei Variablen, der Verlauf selbst
   bleibt derselbe. Einen Verlauf kann der Browser nicht überblenden und
   eine gewöhnliche Variable auch nicht; registrierte Variablen mit Typ
   dagegen schon. Die Startwerte entsprechen den Fallbacks im var(). */
@property --mm-ov-c1 {
	syntax: "<color>";
	inherits: true;
	initial-value: rgba(0, 0, 0, 0.75);
}

@property --mm-ov-c2 {
	syntax: "<color>";
	inherits: true;
	initial-value: rgba(0, 0, 0, 0);
}

@property --mm-ov-stop {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 60%;
}

.mm-slider__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, var(--mm-ov-c1, rgba(0, 0, 0, 0.75)) 0%, var(--mm-ov-c2, rgba(0, 0, 0, 0)) var(--mm-ov-stop, 60%));
	transition-property: --mm-ov-c1, --mm-ov-c2, --mm-ov-stop;
	transition-duration: var(--mm-ov-transition, 400ms);
	transition-timing-function: ease;
}

.mm-slider__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--mm-content-gap, 0.5em);
	z-index: 2;
}

.mm-slider__row {
	display: flex;
	align-items: var(--mm-row-align, center);
	justify-content: space-between;
	gap: var(--mm-arrow-gap, 16px);
}

/* Doppelte Klasse ist Absicht: Die globale Kit-Typografie (.elementor-kit-N h3,
   Spezifität 0-1-1) schlägt sonst diese Basiswerte. Gegen die Typografie-Gruppe
   des Widgets selbst verliert die Regel weiterhin – genau so gewollt. */
.mm-slider .mm-slider__title {
	margin: 0;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	display: flex;
	flex-direction: column;
	justify-content: var(--mm-title-justify, flex-start);
	min-height: calc(var(--mm-title-lines, 2) * 1.25em);
	/* 1lh folgt der Zeilenhöhe aus der Typografie-Gruppe; ältere Browser
	   bleiben bei der Zeile darüber. */
	min-height: calc(var(--mm-title-lines, 2) * 1lh);
}

/* Das Kürzen auf die Zeilenanzahl sitzt am inneren span, weil line-clamp
   ein -webkit-box verlangt und das h3 als Flexbox den kurzen Titel an den
   unteren Rand des reservierten Platzes schieben können muss. */
.mm-slider__title-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mm-title-lines, 2);
	overflow: hidden;
}

/* Doppelte Klasse aus demselben Grund wie beim Titel: Die Kit-Typografie
   für p soll die Basiswerte nicht überschreiben. */
.mm-slider .mm-slider__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	transition: color 0.25s ease;
}

/* Pfeil in der Ecke: steht neben dem letzten Block der Karte, der Block
   selbst bekommt die restliche Breite und bricht vor dem Pfeil um. */
.mm-slider__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mm-arrow-gap, 16px);
}

.mm-slider__foot > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.mm-slider__arrow {
	flex: 0 0 auto;
	width: var(--mm-arrow-size, 28px);
	height: var(--mm-arrow-size, 28px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--mm-arrow-radius, 50%);
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.mm-slider__card:hover .mm-slider__arrow {
	transform: translateX(var(--mm-arrow-hover-translate, 0px)) rotate(var(--mm-arrow-hover-rotate, 0deg));
}

/* Die Icon-Größe hat ein eigenes Control (--mm-arrow-icon-size). Bleibt es
   leer, gelten die bisherigen Faktoren – und die sind für die beiden
   Icon-Arten verschieden: Bei einem SVG ist die Höhe die sichtbare Größe,
   bei einem Icon-Font-Glyph steht die Schriftgröße für die em-Box, deren
   Zeichen deutlich kleiner ausfällt. Ein gesetztes Control gilt für beide. */
.mm-slider__arrow svg,
.mm-slider__arrow i {
	width: auto;
	height: var(--mm-arrow-icon-size, calc(var(--mm-arrow-size, 28px) * 0.6));
	font-size: var(--mm-arrow-icon-size, var(--mm-arrow-size, 28px));
}

.mm-slider__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-tag-gap, 8px);
}

.mm-slider__tags--schwebend {
	position: absolute;
	z-index: 2;
}

.mm-slider__tags--oben-links {
	top: var(--mm-tags-offset, 16px);
	left: var(--mm-tags-offset, 16px);
}

.mm-slider__tags--oben-rechts {
	top: var(--mm-tags-offset, 16px);
	right: var(--mm-tags-offset, 16px);
}

.mm-slider__tags--unten-links {
	bottom: var(--mm-tags-offset, 16px);
	left: var(--mm-tags-offset, 16px);
}

.mm-slider__tags--unten-rechts {
	bottom: var(--mm-tags-offset, 16px);
	right: var(--mm-tags-offset, 16px);
}

.mm-slider__tag {
	display: inline-flex;
	align-items: center;
	border-radius: var(--mm-tag-radius, 999px);
	background: var(--mm-tag-bg, rgba(255, 255, 255, 0.92));
	color: var(--mm-tag-color, #111111);
	line-height: 1;
	white-space: nowrap;
}

.mm-slider__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--mm-nav-inset, 10px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 3;
}

.mm-slider:hover .mm-slider__nav,
.mm-slider:focus-within .mm-slider__nav {
	opacity: 1;
}

/* Der Kasten ragt bei voller Breite links in den Bleed hinein – die
   Navigationsleiste soll dort nicht mitwandern, sonst stünde der
   Zurück-Pfeil am Bildschirmrand statt an der Kante der ersten Karte.
   Rechts bleibt sie bewusst am Bildschirmrand; wer sie auch dort an die
   Containerkante holen will, schaltet "Pfeile im Container" ein. */
.mm-slider--full-width .mm-slider__nav {
	left: var(--mm-full-bleed-left, 0px);
	right: 0;
}

/* --- Pfeile an der Containerkante halten (optional) --------------------
   Bei voller Breite ragt der Slider nach rechts über den Elementor-Container
   hinaus; die Navigation liegt dann am Bildschirmrand statt am Container.
   Die Leiste startet dank der Regel oben bereits an der linken Containerkante,
   deshalb genügt es, sie auf die gemessene Containerbreite zu begrenzen.
   Ohne volle Breite ist die Containerbreite gleich der Sliderbreite – die
   Option ändert dort nichts. */
.mm-slider--nav-im-container .mm-slider__nav {
	right: auto;
	width: var(--mm-container-breite, 100%);
	max-width: 100%;
	/* Nicht auf Elementors globales border-box verlassen: Sonst käme das
	   seitliche Padding der Leiste zur Containerbreite hinzu und der rechte
	   Pfeil stünde genau um den Randabstand zu weit außen. */
	box-sizing: border-box;
}

/* Doppelte Klasse ist Absicht: Das Elementor-Kit stylt jeden <button>
   (.elementor-kit-N button, 0-1-1) mit Rahmen, Radius, Innenabstand,
   Hintergrund und Schrift. Eine einfache Klasse verliert dagegen – der
   Navigationsknopf bekäme dann Kit-Rahmen und 10/15px Padding und wäre
   deutlich größer als --mm-nav-size. Deshalb hier vollständig und mit
   0-2-0 zurücksetzen; die Controls des Widgets (0-2-0, später geladen)
   stechen diese Werte weiterhin. */
.mm-slider .mm-slider__nav-btn {
	pointer-events: auto;
	width: var(--mm-nav-size, 44px);
	height: var(--mm-nav-size, 44px);
	min-width: 0;
	min-height: 0;
	border-radius: var(--mm-nav-radius, 50%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Das Kit gibt button:hover/:focus einen Akzent-Hintergrund – hier neutral
   halten, damit ohne gesetzte Hover-Controls nichts aufblitzt. Die Farbe
   bleibt bewusst unangetastet: Sie kommt aus den Hover-Controls des Widgets,
   die bei gleicher Spezifität später geladen werden und damit gewinnen. */
.mm-slider .mm-slider__nav-btn:hover,
.mm-slider .mm-slider__nav-btn:focus {
	background: none;
	box-shadow: none;
}

/* Wie beim Eckpfeil: eigenes Control, sonst die bisherigen Faktoren. */
.mm-slider__nav-btn svg,
.mm-slider__nav-btn i {
	width: auto;
	height: var(--mm-nav-icon-size, calc(var(--mm-nav-size, 44px) * 0.4));
	font-size: var(--mm-nav-icon-size, var(--mm-nav-size, 44px));
}

/* --- Pfeile folgen dem Farb-Control ------------------------------------
   Icon-Fonts erben "color" von selbst, Bibliotheks-SVGs tragen meist
   fill="currentColor". Ein hochgeladenes SVG bringt dagegen eigene Farben
   mit (fill="#000000" oder stroke="#000000") – als Präsentationsattribut
   am Pfad schlägt das jedes geerbte fill vom <svg>. Deshalb hier die
   Pfade selbst adressieren.

   Bewusst nur Elemente, die bereits eine Farbe deklarieren: fill="none"
   bleibt unangetastet, sonst würden Linien-Icons plötzlich ausgefüllt. */
.mm-slider .mm-slider__nav-btn svg,
.mm-slider .mm-slider__arrow svg {
	fill: currentColor;
}

.mm-slider .mm-slider__nav-btn svg [fill]:not([fill="none"]),
.mm-slider .mm-slider__arrow svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.mm-slider .mm-slider__nav-btn svg [stroke]:not([stroke="none"]),
.mm-slider .mm-slider__arrow svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.mm-slider__nav-btn.swiper-button-disabled {
	opacity: var(--mm-nav-disabled-opacity, 0.35);
	cursor: default;
	pointer-events: none;
}

/* Passen alle Folien ins Sichtfenster, sperrt Swiper den Slider und hängt
   swiper-button-lock an beide Knöpfe. Swipers eigenes display:none (0-1-0)
   verliert gegen das display:flex oben (0-2-0), deshalb hier nachgezogen. */
.mm-slider .mm-slider__nav-btn.swiper-button-lock {
	display: none;
}

/*
 * Hinweis zur Responsivität: Sichtbare Karten, Abstand und Padding bei
 * voller Breite werden NICHT per CSS-Breakpoint geregelt, sondern von
 * slider.js als Swiper-`breakpoints`-Konfiguration gesetzt (siehe
 * buildSwiperConfig()). Swiper setzt dafür inline Styles/Transforms auf
 * .swiper-wrapper und .swiper-slide direkt.
 */