/* mtr-km-deps: basis, medien */
/* Reel-Regal: waagerechte Leiste mit Hochkant-Clips. Schalter und Symbole kommen aus medien.css. */

.elementor-widget-mtr-reel-regal .mtr-shelf-wrap {
	margin-top: 32px;
	padding: 0;
}

.elementor-widget-mtr-reel-regal .mtr-shelf-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 12px;
}

/* Die Pfeile erscheinen erst, wenn reel-regal.js bereit ist, ohne Skript tun sie nichts.
   Der Platz bleibt frei, damit beim Start nichts springt. */
.elementor-widget-mtr-reel-regal .mtr-shelf-wrap:not([data-mtr-bereit]) .mtr-shelf-nav {
	visibility: hidden;
}

.elementor-widget-mtr-reel-regal .mtr-shelf-nav .mtr-reel__btn svg {
	width: 22px;
	height: 22px;
}

.elementor-widget-mtr-reel-regal .mtr-shelf {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	padding: 4px 4px 18px;
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

.elementor-widget-mtr-reel-regal .mtr-shelf::-webkit-scrollbar {
	height: 8px;
}

.elementor-widget-mtr-reel-regal .mtr-shelf::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .3);
	border-radius: 99px;
}

.elementor-widget-mtr-reel-regal .mtr-reel {
	position: relative;
	flex: 0 0 auto;
	width: 252px;
	aspect-ratio: 9 / 16;
	border-radius: var(--mtr-rad);
	overflow: hidden;
	background: #000;
	scroll-snap-align: start;
	margin: 0;
}

.elementor-widget-mtr-reel-regal .mtr-reel video,
.elementor-widget-mtr-reel-regal .mtr-reel .mtr-reel__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor-widget-mtr-reel-regal .mtr-reel figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 14px 14px;
	color: #fff;
	font-size: .9375rem;
	font-style: normal;
	line-height: 1.35;
	font-weight: 600;
	background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
}

@media (max-width: 767px) {
	.elementor-widget-mtr-reel-regal .mtr-reel {
		width: 76vw;
		max-width: 300px;
	}

	/* Rechts läuft das Regal bis an den Bildschirmrand, links endet es an der
	   Inhaltskante (4 Pixel Polster für den Fokusrahmen, wie ab 768 Pixel). So
	   schaut links kein Streifen des vorigen Clips herein. */
	.elementor-widget-mtr-reel-regal .mtr-shelf {
		padding-left: 4px;
		padding-right: 20px;
		margin-left: -4px;
		margin-right: -20px;
		scroll-padding-left: 4px;
	}

	.elementor-widget-mtr-reel-regal .mtr-shelf-wrap {
		margin-top: 22px;
	}
}

/* Hinweis im Editor, wenn die Clips aus der Bibliothek kommen. */
.mtr-shelf-hinweis {
	margin: 0 0 10px;
	padding: 8px 12px;
	border: 1px solid var(--mtr-line, #D8D8D8);
	border-radius: 5px;
	background: var(--mtr-surface, #F8F8F8);
	font-size: .875rem;
	color: var(--mtr-ink, #202020);
}

/* 2.1.11: Die erste Karte steht auf der Fluchtlinie der Überschrift. Das
   Polster von 4 Pixeln bleibt für den Fokusrahmen und wird links durch einen
   negativen Rand ausgeglichen; rechts endet das Regal an der Inhaltskante.
   Die Clips zeigen im Standbild oben rechts das MTR-Zeichen (ab etwa einem
   Fünftel der Höhe), während der Wiedergabe oben links Namen. Die Schalter
   für Ton und Großansicht stehen deshalb oben rechts nebeneinander, oberhalb
   des Zeichens. */

@media (min-width: 768px) {
	.elementor-widget-mtr-reel-regal .mtr-shelf {
		margin-left: -4px;
	}
}

.elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-reel__tools {
	flex-direction: row-reverse;
}

/* 2.1.13: Auf dem Handy und auf Touch-Geräten stehen die Pfeile als kleine Zeile
   über den Clips, rechtsbündig an der Inhaltskante. Die Knöpfe sind 36 Pixel groß,
   die Tippfläche reicht über einen unsichtbaren Rand auf 44 Pixel. Auf hellem Grund
   Umriss in Anthrazit, im dunklen Band weiß. Mit Maus ab 768 Pixel bleibt alles wie
   bisher. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
	.elementor-widget-mtr-reel-regal .mtr-shelf-nav {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin: 0 0 12px;
	}

	.elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn {
		width: 36px;
		height: 36px;
		border: 1.5px solid var(--mtr-ink, #37424C);
		background: transparent;
		color: var(--mtr-ink, #37424C);
		overflow: visible;
	}

	.elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn::after {
		content: "";
		position: absolute;
		inset: -4px;
		border-radius: 50%;
	}

	.elementor-widget-mtr-reel-regal .mtr-shelf-nav .mtr-reel__btn svg {
		width: 18px;
		height: 18px;
	}

	.mtr-sec--dark .elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn {
		border-color: rgba(255, 255, 255, .85);
		color: #fff;
	}
}

/* Rot nur bei Fokus per Tastatur, beim Drücken und mit Maus beim Überfahren. Ohne Maus
   gilt die Regel oben, dort bleibt nach dem Tippen kein roter Hover-Zustand stehen. */
@media (max-width: 767px), (hover: none), (pointer: coarse) {
	.elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn:is(:focus-visible, :active),
	.mtr-sec--dark .elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn:is(:focus-visible, :active) {
		background: var(--mtr-red);
		border-color: var(--mtr-red);
		color: #fff;
	}
}

@media (max-width: 767px) and (hover: hover) {
	.elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn:hover,
	.mtr-sec--dark .elementor-widget-mtr-reel-regal .mtr-shelf-wrap .mtr-shelf-nav button.mtr-reel__btn:hover {
		background: var(--mtr-red);
		border-color: var(--mtr-red);
		color: #fff;
	}
}