/* Gemeinsame Medien-Optik der Banner: Slider und die Umschaltung Desktop/Mobil.
 *
 * Steht in einer eigenen Datei, weil DREI Stellen dasselbe Markup ausgeben -- alle drei
 * ueber Zen_Shop_Addon_Shop_Banners::media_html():
 *   - /shop/ (Produktraster, shop-banners.css)
 *   - Shop 2 (shop2.css)
 *   - Beitraege (post-banner.css)
 *
 * Bis zum 25.08.2026 lagen die Slider-Regeln nur in shop-banners.css. Folge: in Shop 2 wurden
 * mehrere Medien untereinander gestapelt statt uebereinander gelegt, und das Weiterschalten
 * fehlte ganz -- das Skript wurde dort nie geladen. Aufgefallen beim Umbau des Post-Banners,
 * der dieselben Medien-Strecken bekommen hat.
 *
 * Die Datei kennt bewusst KEINE Container-Klasse: das Seitenverhaeltnis und die Rahmen kommen
 * je Einsatzort aus dessen eigener Datei, weil sie sich dort unterscheiden.
 */

/* Alle Folien liegen uebereinander, sichtbar ist die mit .is-aktiv -- kein horizontales
   Verschieben, weil sonst die Breite aller Folien zusammen das Raster sprengt. */
.zt-sb-slider {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.zt-sb-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .45s ease;
	pointer-events: none;
}
.zt-sb-slide.is-aktiv {
	opacity: 1;
	pointer-events: auto;
}

/* Bilder UND Videos fuellen die Flaeche und werden mittig beschnitten, wenn das
   Seitenverhaeltnis nicht passt (Stephan: "cover full element ... einfach mittig cover") --
   verzerren waere die Alternative und sieht immer falsch aus. */
.zt-sb-slide img,
.zt-sb-slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Punkte: unten mittig, dezent grau, aktueller schwarz ("wirklich ultra dezent").
   Der Hauch Schatten ist noetig, damit sie auf einem hellen Motiv nicht verschwinden. */
.zt-sb-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	display: flex;
	justify-content: center;
	gap: 5px;
	z-index: 2;
	pointer-events: none;
}
.zt-sb-dot {
	width: 5px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 0 2px rgba(0, 0, 0, .25);
	cursor: pointer;
	pointer-events: auto;
	transition: background .2s;
	-webkit-appearance: none;
	appearance: none;
}
.zt-sb-dot.is-aktiv {
	background: #111;
}

/* Zwei Strecken, eine je Bildschirmbreite. Nur eine ist im Markup ueberhaupt vorhanden,
   wenn es keine eigenen Mobil-Medien gibt -- dann laeuft die Desktop-Strecke ueberall. */
@media (max-width: 767px) {
	.zt-sb-desktop-only { display: none !important; }
}
@media (min-width: 768px) {
	.zt-sb-mobile-only { display: none !important; }
}