/**
 * carouFredSel-Bildkarussell für Contao — globale Stile (Swiper-Engine)
 *
 * Das Layout der Kacheln übernimmt seit Version 3.0.0 Swiper (Flexbox);
 * die früheren Float-Regeln des jQuery-Plugins sind entfallen.
 */

.caroufredsel_skin,
.caroufredsel_thumbnails_skin {
	position: relative;
}

.caroufredsel_skin .image_container img,
.caroufredsel_thumbnails_skin .image_container img {
	vertical-align: bottom;
	max-width: 100%;
}

.caroufredsel .swiper-slide,
.caroufredsel_thumbnails .swiper-slide {
	box-sizing: border-box;
}

/* Nur bei slidesPerView "auto" (Klasse setzt der Initialisierer) richtet sich
   die Kachelbreite nach dem Inhalt. Ein pauschales width:auto würde bei
   fester Folienzahl Swipers Snap-Berechnung aushebeln — die Paginierung
   verschwände dann hinter swiper-pagination-lock. */
.caroufredsel_auto .swiper-slide {
	width: auto;
}

.caroufredsel_thumbnails .swiper-slide {
	width: auto;
}

/* Der Standard-Außenabstand von <figure> würde die Folien breiter als den
   Container machen und die Snap-Berechnung verfälschen */
.caroufredsel .swiper-slide .image_container,
.caroufredsel_thumbnails .swiper-slide .image_container {
	margin: 0;
}

/* Navigationspunkte: sichtbare, klickbare Punkte auch ohne Skin. Die
   Ziffern in den Links sind für Skins gedacht, die Text einblenden wollen,
   und werden hier versteckt. Der aktive Punkt trägt die Klasse "selected"
   (bulletActiveClass), damit die mitgelieferten Skins weiter greifen. */
.caroufredsel_pagi {
	text-align: center;
	padding: 6px 0;
}

.caroufredsel_pagi .swiper-pagination-bullet {
	overflow: hidden;
	text-indent: -999em;
	cursor: pointer;
	opacity: 0.3;
}

.caroufredsel_pagi .swiper-pagination-bullet.selected {
	opacity: 1;
}

/* Räumt die Floats der seitlichen Vorschauleiste auf, damit der umgebende
   Container nicht zusammenfällt */
.caroufredsel_clear {
	clear: both;
}

/* Fortschrittsbalken: die Breite setzt der Initialisierer je Autoplay-Tick */
.caroufredsel_bar_wrapper {
	overflow: hidden;
}

.caroufredsel_bar {
	width: 0;
}

/* Vollbild-Hintergrundmodus: das Karussell liegt bildschirmfüllend hinter
   dem Seiteninhalt, die Bilder decken das Fenster formatfüllend ab */
.caroufredsel_background_mode {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw !important;
	height: 100vh !important;
	z-index: -1;
}

.caroufredsel_background_mode .swiper-slide,
.caroufredsel_background_mode .swiper-slide .image_container {
	width: 100vw !important;
	height: 100vh !important;
}

.caroufredsel_background_mode .swiper-slide img {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}