/* mtr-km-deps: basis */
/*
 * Gemeinsame Gestaltung der Video-Module: runde Schalter für Ton, Großansicht und
 * Anhalten (auch die Pfeile des Reel-Regals) sowie das Overlay der Großansicht.
 *
 * Das Elementor-Kit gestaltet jedes <button> global, auch in :hover und :focus.
 * Die Schalter-Regeln sind deshalb spezifischer (Modulklasse + Hülle + button),
 * damit sie in jedem Zustand greifen.
 */

:is(.elementor-widget-mtr-reel-regal .mtr-shelf-wrap, .elementor-widget-mtr-stimmen .mtr-voices, .elementor-widget-mtr-hero-video .mtr-hero-media) .mtr-reel__tools {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

:is(.elementor-widget-mtr-reel-regal .mtr-shelf-wrap, .elementor-widget-mtr-stimmen .mtr-voices, .elementor-widget-mtr-hero-video .mtr-hero-media) button.mtr-reel__btn {
	position: relative;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(15, 19, 23, .55);
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background .2s ease, border-color .2s ease;
}

:is(.elementor-widget-mtr-reel-regal .mtr-shelf-wrap, .elementor-widget-mtr-stimmen .mtr-voices, .elementor-widget-mtr-hero-video .mtr-hero-media) button.mtr-reel__btn:hover,
:is(.elementor-widget-mtr-reel-regal .mtr-shelf-wrap, .elementor-widget-mtr-stimmen .mtr-voices, .elementor-widget-mtr-hero-video .mtr-hero-media) button.mtr-reel__btn:focus-visible {
	background: var(--mtr-red);
	border-color: var(--mtr-red);
	color: #fff;
}

:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* Ton- und Pause-Schalter: das Symbol wechselt mit einer kurzen Überblendung. */
:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn .ic-on,
:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn .ic-off {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	transition: opacity .13s linear, transform .24s cubic-bezier(.22, .61, .36, 1);
	transition-delay: .13s;
}

:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn .ic-off {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.75);
	transition-delay: 0s;
}

:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn[aria-pressed="true"] .ic-on {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.75);
	transition-delay: 0s;
}

:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn[aria-pressed="true"] .ic-off {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition-delay: .13s;
}

/* Hinweis im Editor, wenn einem Clip oder einer Stimme das Video fehlt. */
:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen) .mtr-reel__hinweis {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 1;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(15, 19, 23, .72);
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 600;
}

/* Overlay der Großansicht (wird von medien.js an das Ende von body gehängt).
   Der Kasten übernimmt das Seitenverhältnis des Videos (--mtr-modal-r = Breite durch
   Höhe, setzt medien.js), Hochkant-Clips bleiben hochkant. Er liegt über Kopf (999),
   Sticky-Leiste und Elementor-Popups. */
body > .mtr-modal {
	--mtr-modal-r: 1.7778;
	--mtr-modal-vh: 1vh;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(31, 36, 41, .94);
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

@supports (height: 1dvh) {
	body > .mtr-modal {
		--mtr-modal-vh: 1dvh;
	}
}

body > .mtr-modal.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s ease, visibility 0s linear 0s;
}

/* Hochkant: höchstens 88 % der Fensterhöhe, rechts bleibt Platz für den Schließen-Knopf. */
body > .mtr-modal .mtr-modal__stage {
	position: relative;
	width: min(calc(100vw - 112px), calc(88 * var(--mtr-modal-vh) * var(--mtr-modal-r)));
}

/* Querformat: höchstens 92 % der Breite, oben bleibt Platz für den Schließen-Knopf. */
body > .mtr-modal.mtr-modal--quer .mtr-modal__stage {
	width: min(92vw, calc(88 * var(--mtr-modal-vh) * var(--mtr-modal-r)), calc((100 * var(--mtr-modal-vh) - 112px) * var(--mtr-modal-r)));
}

/* Unsichtbare Fokuspunkte, die den Tabulator im Dialog halten. */
body > .mtr-modal .mtr-modal__waechter {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

body > .mtr-modal .mtr-modal__box {
	position: relative;
	width: 100%;
	aspect-ratio: var(--mtr-modal-r);
	background: #000;
	border-radius: var(--mtr-rad, 5px);
	overflow: hidden;
	line-height: 0;
}

body > .mtr-modal .mtr-modal__box video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

body > .mtr-modal .mtr-modal__stage button.mtr-modal__close {
	position: absolute;
	top: 0;
	left: calc(100% + 12px);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s ease, border-color .2s ease;
}

body > .mtr-modal.mtr-modal--quer .mtr-modal__stage button.mtr-modal__close {
	top: -56px;
	left: auto;
	right: 0;
}

body > .mtr-modal .mtr-modal__close svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	pointer-events: none;
}

body > .mtr-modal .mtr-modal__stage button.mtr-modal__close:hover,
body > .mtr-modal .mtr-modal__stage button.mtr-modal__close:focus-visible {
	background: var(--mtr-red);
	border-color: var(--mtr-red);
	color: #fff;
}

/* Handy: der Kasten nimmt die Breite bis auf 16 Pixel je Seite, bleibt aber so niedrig,
   dass er samt Schließen-Knopf ganz ins Bild passt. Der Knopf steht immer darüber. */
@media (max-width: 767px) {
	body > .mtr-modal .mtr-modal__stage,
	body > .mtr-modal.mtr-modal--quer .mtr-modal__stage {
		width: min(calc(100vw - 32px), calc((100 * var(--mtr-modal-vh) - 128px) * var(--mtr-modal-r)));
	}

	body > .mtr-modal .mtr-modal__stage button.mtr-modal__close,
	body > .mtr-modal.mtr-modal--quer .mtr-modal__stage button.mtr-modal__close {
		top: -56px;
		left: auto;
		right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn .ic-on,
	:is(.elementor-widget-mtr-reel-regal, .elementor-widget-mtr-stimmen, .elementor-widget-mtr-hero-video) .mtr-reel__btn .ic-off {
		transition: none;
	}

	body > .mtr-modal,
	body > .mtr-modal.is-open {
		transition: none;
	}
}