/**
 * Rocks Slider – eigenes Styling
 * Hauptklasse: .rocks_slider / .rocks_slider-auto
 * Der Navigations-Wrapper ist Geschwister des Sliders, deshalb mit "+" ansprechen:
 *   .rocks_slider + .swiper-nav-wrapper { ... }
 *
 * Nav-Elemente:
 *   .swiper-button-prev / .swiper-button-next     Pfeile
 *   .swiper-pagination .swiper-pagination-bullet  Punkte
 *   .swiper-pagination-progress                   Fortschritt
 */

/*
   Bis Swiper uebernommen hat, wird nur die erste Folie gezeigt. Sonst stuenden
   fuer einen Moment alle Folien untereinander.
*/
body main div[class*="rocks_slider"]:not(.swiper-initialized):not([class*="desk-"]) > * + * {
	display: none;
	visibility: hidden;
	height: 0;
	min-height: unset !important;
	padding: 0 !important;
	opacity: 0 !important;
}

body main div[class*="rocks_slider"] .swiper-wrapper {
	padding-left: 0;
	list-style: none;
}

body main div[class*="rocks_slider"] .swiper-wrapper > li,
body main div[class*="rocks_slider"] li > figure {
	list-style: none;
	margin-bottom: 0;
}

body main div[class*="rocks_slider"] .wp-block-cover {
	padding: 0 !important;
}

body main div[class*="rocks_slider"] .swiper-slide {
	flex: 1 0 auto;
}

body main div[class*="rocks_slider"] .swiper-slide > * {
	width: 100%;
}

/*
   Vor dem Start: Slider mit fester Anzahl (hand-/mob-/tab-/lap-/desk-/full-N)
   sehen schon so aus wie danach. Gleiche Anzahl nebeneinander, Rest
   abgeschnitten, kein Sprung beim Laden. Haltepunkte wie im Skript.
   Abstand ueber --rs-gap (Standard 0), gleiche Werte wie data-gap setzen.
*/
body main [class*="rocks_slider"][class*="desk-"]:not(.swiper-initialized) {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--rs-gap, 0px);
	overflow: hidden;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	list-style: none;
	--rs-n: 1;
}

body main [class*="rocks_slider"][class*="desk-"]:not(.swiper-initialized) > * {
	flex: 0 0 calc((100% - (var(--rs-n) - 1) * var(--rs-gap, 0px)) / var(--rs-n));
	min-width: 0;
	margin: 0;
}

body main [class*="rocks_slider"].hand-1:not(.swiper-initialized) { --rs-n: 1; }
body main [class*="rocks_slider"].hand-2:not(.swiper-initialized) { --rs-n: 2; }
body main [class*="rocks_slider"].hand-3:not(.swiper-initialized) { --rs-n: 3; }
body main [class*="rocks_slider"].hand-4:not(.swiper-initialized) { --rs-n: 4; }
body main [class*="rocks_slider"].hand-5:not(.swiper-initialized) { --rs-n: 5; }
body main [class*="rocks_slider"].hand-6:not(.swiper-initialized) { --rs-n: 6; }
body main [class*="rocks_slider"].hand-7:not(.swiper-initialized) { --rs-n: 7; }
body main [class*="rocks_slider"].hand-8:not(.swiper-initialized) { --rs-n: 8; }

@media (min-width: 640px) {
	body main [class*="rocks_slider"].mob-1:not(.swiper-initialized) { --rs-n: 1; }
	body main [class*="rocks_slider"].mob-2:not(.swiper-initialized) { --rs-n: 2; }
	body main [class*="rocks_slider"].mob-3:not(.swiper-initialized) { --rs-n: 3; }
	body main [class*="rocks_slider"].mob-4:not(.swiper-initialized) { --rs-n: 4; }
	body main [class*="rocks_slider"].mob-5:not(.swiper-initialized) { --rs-n: 5; }
	body main [class*="rocks_slider"].mob-6:not(.swiper-initialized) { --rs-n: 6; }
	body main [class*="rocks_slider"].mob-7:not(.swiper-initialized) { --rs-n: 7; }
	body main [class*="rocks_slider"].mob-8:not(.swiper-initialized) { --rs-n: 8; }
}

@media (min-width: 992px) {
	body main [class*="rocks_slider"].tab-1:not(.swiper-initialized) { --rs-n: 1; }
	body main [class*="rocks_slider"].tab-2:not(.swiper-initialized) { --rs-n: 2; }
	body main [class*="rocks_slider"].tab-3:not(.swiper-initialized) { --rs-n: 3; }
	body main [class*="rocks_slider"].tab-4:not(.swiper-initialized) { --rs-n: 4; }
	body main [class*="rocks_slider"].tab-5:not(.swiper-initialized) { --rs-n: 5; }
	body main [class*="rocks_slider"].tab-6:not(.swiper-initialized) { --rs-n: 6; }
	body main [class*="rocks_slider"].tab-7:not(.swiper-initialized) { --rs-n: 7; }
	body main [class*="rocks_slider"].tab-8:not(.swiper-initialized) { --rs-n: 8; }
}

@media (min-width: 1024px) {
	body main [class*="rocks_slider"].lap-1:not(.swiper-initialized) { --rs-n: 1; }
	body main [class*="rocks_slider"].lap-2:not(.swiper-initialized) { --rs-n: 2; }
	body main [class*="rocks_slider"].lap-3:not(.swiper-initialized) { --rs-n: 3; }
	body main [class*="rocks_slider"].lap-4:not(.swiper-initialized) { --rs-n: 4; }
	body main [class*="rocks_slider"].lap-5:not(.swiper-initialized) { --rs-n: 5; }
	body main [class*="rocks_slider"].lap-6:not(.swiper-initialized) { --rs-n: 6; }
	body main [class*="rocks_slider"].lap-7:not(.swiper-initialized) { --rs-n: 7; }
	body main [class*="rocks_slider"].lap-8:not(.swiper-initialized) { --rs-n: 8; }
}

@media (min-width: 1280px) {
	body main [class*="rocks_slider"].desk-1:not(.swiper-initialized) { --rs-n: 1; }
	body main [class*="rocks_slider"].desk-2:not(.swiper-initialized) { --rs-n: 2; }
	body main [class*="rocks_slider"].desk-3:not(.swiper-initialized) { --rs-n: 3; }
	body main [class*="rocks_slider"].desk-4:not(.swiper-initialized) { --rs-n: 4; }
	body main [class*="rocks_slider"].desk-5:not(.swiper-initialized) { --rs-n: 5; }
	body main [class*="rocks_slider"].desk-6:not(.swiper-initialized) { --rs-n: 6; }
	body main [class*="rocks_slider"].desk-7:not(.swiper-initialized) { --rs-n: 7; }
	body main [class*="rocks_slider"].desk-8:not(.swiper-initialized) { --rs-n: 8; }
}

@media (min-width: 1782px) {
	body main [class*="rocks_slider"].full-1:not(.swiper-initialized) { --rs-n: 1; }
	body main [class*="rocks_slider"].full-2:not(.swiper-initialized) { --rs-n: 2; }
	body main [class*="rocks_slider"].full-3:not(.swiper-initialized) { --rs-n: 3; }
	body main [class*="rocks_slider"].full-4:not(.swiper-initialized) { --rs-n: 4; }
	body main [class*="rocks_slider"].full-5:not(.swiper-initialized) { --rs-n: 5; }
	body main [class*="rocks_slider"].full-6:not(.swiper-initialized) { --rs-n: 6; }
	body main [class*="rocks_slider"].full-7:not(.swiper-initialized) { --rs-n: 7; }
	body main [class*="rocks_slider"].full-8:not(.swiper-initialized) { --rs-n: 8; }
}