/* mtr-km-deps: basis, medien */
/* Hero-Video: füllt den Hero-Abschnitt als Hintergrund, darüber liegt ein dunkler Schleier für die Lesbarkeit.
   Gestaltung des Pause-Schalters: medien.css, hier nur seine Lage. */

.elementor-element.elementor-widget-mtr-hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.elementor-widget-mtr-hero-video > .elementor-widget-container {
	height: 100%;
}

.elementor-widget-mtr-hero-video .mtr-hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.elementor-widget-mtr-hero-video .mtr-hero-media video,
.elementor-widget-mtr-hero-video .mtr-hero-media .mtr-hero-media__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor-widget-mtr-hero-video .mtr-hero-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(12, 16, 20, .82) 0%, rgba(12, 16, 20, .55) 42%, rgba(12, 16, 20, .12) 78%, rgba(12, 16, 20, 0) 100%),
		linear-gradient(180deg, rgba(12, 16, 20, .55) 0%, rgba(12, 16, 20, .18) 26%, rgba(12, 16, 20, .55) 64%, rgba(12, 16, 20, .88) 100%);
}

/* Pause-Schalter und Editor-Plakette liegen über den Inhalten des Abschnitts, damit sie
   anklickbar sind. Dafür bildet das Modul in diesen Fällen keinen eigenen Stapelkontext.
   Video und Schleier bleiben unter den Inhalten. */
.elementor-element.elementor-widget-mtr-hero-video.mtr-hero-pause-yes,
.elementor-editor-active .elementor-element.elementor-widget-mtr-hero-video {
	z-index: auto;
}

/* Unten rechts, bündig mit der Inhaltsspalte des Hero (1180 px). Oben liegt auf der
   Seite die Kopfzeile über dem Abschnitt. */
.elementor-widget-mtr-hero-video .mtr-hero-media button.mtr-hero-media__pause {
	position: absolute;
	right: max(16px, calc((100% - 1180px) / 2));
	bottom: 24px;
	z-index: 3;
}

/* Plakette, nur im Editor ausgegeben: Ein Klick darauf wählt das Modul aus. */
.elementor-widget-mtr-hero-video .mtr-hero-media__plakette {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 3;
	padding: 6px 12px;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(15, 19, 23, .72);
	color: #fff;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	cursor: pointer;
}