/* Embla Slider — Embla-based + prodesign-10 / dots-design-10 styling */

.em-slider {
	position: relative;
	box-sizing: border-box;
	padding-bottom: 3rem;
}
.em-slider *,
.em-slider *::before,
.em-slider *::after {
	box-sizing: border-box;
}

/*
 * Embla layout. Slide widths are driven by custom properties set per
 * instance from JS: --em-slides (desktop), --em-slides-md (tablet)
 * and --em-gap (gutter). Mobile always shows 1 slide.
 */
.em-slider .em-slider__viewport {
	overflow: hidden;
	padding: 0 0 12px;
}
.em-slider .em-slider__container {
	display: flex;
	align-items: center;
	touch-action: pan-y pinch-zoom;
}
.em-slider .em-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	height: auto;
	text-align: center;
	padding: 0 calc(var(--em-gap, 20px) / 2);
}
@media (min-width: 600px) {
	.em-slider .em-slider__slide {
		flex-basis: calc(100% / var(--em-slides-md, 2));
	}
}
@media (min-width: 900px) {
	.em-slider .em-slider__slide {
		flex-basis: calc(100% / var(--em-slides, 3));
	}
}

/* Structural image basics (always on) */
.em-slider .wpsisac-img-wrap {
	position: relative;
}
.em-slider .wpsisac-slider-img {
	max-width: 100%;
	display: inline-block;
}

/*
 * ---------- Opinionated look (site option em_slider_state_styles) ----------
 * Everything scoped to .em-slider--styled is the tuned look (fixed 159px
 * images, grey titles, pink dots). Without the class, the theme owns the look.
 */

/* Image: fixed 159px height on every slide (no jumping) */
.em-slider--styled .wpsisac-img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 159px;
	height: 159px;
}
.em-slider--styled .wpsisac-slider-img {
	width: auto !important;
	height: 159px !important;
	max-height: 159px !important;
	object-fit: contain;
}

/* image-fit option: cover the wrap (still 159px tall) */
.em-slider--styled.wpsisac-image-fit .wpsisac-img-wrap {
	overflow: hidden;
}
.em-slider--styled.wpsisac-image-fit .wpsisac-slider-img {
	width: 100% !important;
	height: 159px !important;
	object-fit: cover;
}

/* Image overlay link */
.em-slider .wpsisac-slick-slider-link {
	position: absolute;
	inset: 0;
	display: block;
}

/* Title — defensive: force visible + neutralize theme h2 styling */
.em-slider--styled .wpsisac-slick-image-slide .wpsisac-slide-title,
.em-slider--styled .wpsisac-slick-image-slide .wpsisac-slide-title a {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	max-height: none !important;
	width: auto !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	text-indent: 0 !important;
	white-space: normal !important;
	text-shadow: none !important;
	text-transform: none !important;
}
.em-slider--styled .wpsisac-slick-image-slide .wpsisac-slide-title {
	margin: 14px auto 8px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #666 !important;
	text-align: center !important;
	letter-spacing: normal !important;
	border: 0 !important;
	transition: color 0.4s ease, font-weight 0.4s ease, font-size 0.4s ease;
}
.em-slider--styled .wpsisac-slick-image-slide .wpsisac-slide-title a {
	color: inherit !important;
	text-decoration: none !important;
}
.em-slider--styled .wpsisac-slick-image-slide .wpsisac-slide-title a:hover {
	text-decoration: underline !important;
}

/* ---------- Content ---------- */
.em-slider .wpsisac-slider-content {
	padding: 0 6px;
}
.em-slider--styled .wpsisac-slider-short-content {
	color: #666;
	transition: font-size 0.4s ease, line-height 0.4s ease;
}
.em-slider .wpsisac-slider-short-content p {
	margin: 0 0 0.5em;
}

/* Read-more button */
.em-slider .wpsisac-readmore {
	margin-top: 10px;
}
.em-slider .wpsisac-readmore a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
}

/* ---------- Arrows (wired to Embla scrollPrev/scrollNext) ---------- */
.em-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	border: 0;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.em-slider__arrow:hover,
.em-slider__arrow:focus-visible {
	background: rgba(0, 0, 0, .85);
	outline: none;
}
.em-slider__arrow--disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.em-slider__arrow--prev { left: 8px; }
.em-slider__arrow--next { right: 8px; }

/* ---------- Dots — JS-rendered <button> elements ----------
 * Own dot look only outside the legacy look (there the ported legacy rules
 * plus the site's theme/custom CSS style the ul > li > button dots). */
.em-slider:not(.em-slider--legacy) .em-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0;
	z-index: 5;
}
.em-slider:not(.em-slider--legacy) .em-slider__dot {
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	border: 0 !important;
	background: #c8c8c8;
	cursor: pointer;
	display: block !important;
	transition: background 0.3s ease, transform 0.3s ease;
	box-shadow: none !important;
	text-indent: -9999px;
	overflow: hidden;
	opacity: 1 !important;
}
.em-slider:not(.em-slider--legacy) .em-slider__dot:hover {
	background: #9e9e9e;
}
.em-slider:not(.em-slider--legacy) .em-slider__dot--active,
.em-slider:not(.em-slider--legacy) .em-slider__dot.slick-active {
	background: #333;
	transform: scale(1.1);
}

/* Tuned dot colors (pink) only in the styled look */
.em-slider--styled .em-slider__dot {
	background: #febfc7 !important;
}
.em-slider--styled .em-slider__dot:hover {
	background: #f99aa6 !important;
}
.em-slider--styled .em-slider__dot--active,
.em-slider--styled .em-slider__dot.slick-active {
	background: #222 !important;
}
.em-slider__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* =====================================================================
 * Legacy look (site option em_slider_legacy_look = 1)
 *
 * Port of the base rules of the old "WP Slick Slider Pro" stylesheet
 * (wpsisac-pro-public.css, GPL) for the designs in use: wrapper basics,
 * center mode, prodesign-10, dots base + dots-design-10. Every selector is
 * wrapped in :where(.em-slider--legacy) so it adds ZERO specificity — the
 * site's theme / custom CSS (written against these very selectors) keeps
 * overriding them exactly like it overrode the old plugin. Loaded in the
 * head before the theme (see maybe_enqueue_head_css()).
 * ===================================================================== */

/* em-slider's own structure, adapted to slick's box model */
.em-slider.em-slider--legacy {
	padding-bottom: 0;
}
/* bare Embla cell around each slick-styled slide (see render_slide()) */
.em-slider.em-slider--legacy .em-slider__slide {
	padding: 0;
}
.em-slider.em-slider--legacy .em-slider__cell > .wpsisac-slick-image-slide {
	height: 100%;
}
.em-slider.em-slider--legacy .em-slider__carousel {
	position: relative;
	display: block;
}
.em-slider.em-slider--legacy .em-slider__viewport {
	padding: 0 var(--em-center-pad, 0px);
}
.em-slider.em-slider--legacy .em-slider__container {
	align-items: flex-start;
}

/* responsive steps: <=1023px max 3 like the old carousel (JS sets
 * --em-slides-lmd); phones <=639px show ONE slide (deliberate change vs. the
 * old 2-up, which cut titles and overlapped images; Mike, 05.10.2026) */
.em-slider.em-slider--legacy .em-slider__slide {
	flex-basis: calc(100% / var(--em-slides, 3));
}
@media (max-width: 1023px) {
	.em-slider.em-slider--legacy .em-slider__slide { flex-basis: calc(100% / var(--em-slides-lmd, 3)); }
}
@media (max-width: 639px) {
	.em-slider.em-slider--legacy .em-slider__slide { flex-basis: 100%; }
	/* slick applies centerPadding only in center mode, which is off below 640px */
	.em-slider.em-slider--legacy .em-slider__viewport { padding-left: 0; padding-right: 0; }
	/* deliberate improvement over the old plugin: long single-word titles
	   ("Gewinneranzeige") get hyphenated instead of being cut off */
	.em-slider.em-slider--legacy .wpsisac-slide-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* titles (global rule of the old stylesheet) */
:where(.em-slider--legacy) h2.wpsisac-slide-title { font-size: 22px !important; margin: 5px 0 !important; padding-top: 0; padding-bottom: 0; color: #444; }
:where(.em-slider--legacy) h2.wpsisac-slide-title a,
:where(.em-slider--legacy) h2.wpsisac-slide-title a:active,
:where(.em-slider--legacy) h2.wpsisac-slide-title a:focus,
:where(.em-slider--legacy) h2.wpsisac-slide-title a:hover,
:where(.em-slider--legacy) h2.wpsisac-slide-title a:visited { font-size: 22px !important; color: #444; text-decoration: none; outline: 0; }

/* Smooth, snappy image scaling on slide change. Theme/custom CSS scales the
 * active slide's image wrap (BOC: scale(1.8), no transition — it jumped) or
 * grows the image height (BOT: 100 -> 180px with `height 1s ease-out`).
 * Both now run 0.45s on an ease-out-quint curve (fast start, clean stop).
 * The height rule needs real specificity to beat the theme's
 * `#top .wpsisac-slick-carousal .slick-slide img` (Mike, 06.10.2026). */
:where(.em-slider--legacy) .wpsisac-img-wrap { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
#top .em-slider.em-slider--legacy .slick-slide img.wpsisac-slider-img,
.em-slider.em-slider--legacy .wpsisac-slick-carousal .slick-slide img.wpsisac-slider-img { transition: height .45s cubic-bezier(.22, 1, .36, 1); }

/* wrapper basics */
:where(.em-slider--legacy) .wpsisac-img-wrap { position: relative; overflow: hidden; }
:where(.em-slider--legacy) .wpsisac-slick-image-slide { position: relative; }
:where(.em-slider--legacy) img.wpsisac-slider-img { border-radius: 0 !important; box-shadow: none !important; position: unset; max-width: 100%; max-height: 100%; }
:where(.em-slider--legacy) .wpsisac-image-fit img.wpsisac-slider-img { object-fit: cover; object-position: top center; height: 100%; width: 100%; }
:where(.em-slider--legacy) .wpsisac-slick-carousal .slick-slide img { display: inline-block; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-image-fit .wpsisac-img-wrap { height: 300px; background: #dadada; }

/* center mode */
/* The old plugin scaled the slide element itself. Embla, however, moves
 * looped slides via an inline `transform: translate3d()` on that element —
 * a transform-based scale gets wiped and a `scale` property would shrink the
 * loop offset too. So the scale goes on the slide's only child, which fills
 * the slide (same visual, origin = slide centre); opacity stays on the slide. */
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .wpsisac-slick-image-slide { padding: 0 !important; opacity: .5; transition: opacity .3s; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .wpsisac-slick-image-slide > .wpsisac-slide-wrap { transform: scale(.8); transition: transform .3s; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .slick-center { opacity: 1; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .slick-center > .wpsisac-slide-wrap { transform: scale(1); }
@media only screen and (max-width: 1023px) {
	/* without the 0.8 scale the center padding showed a sliver of the next slide */
	.em-slider.em-slider--legacy .em-slider__viewport { padding-left: 0; padding-right: 0; }
	:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .wpsisac-slick-image-slide { opacity: 1; }
	:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-center-mode .wpsisac-slick-image-slide > .wpsisac-slide-wrap { transform: scale(1); }
}

/* prodesign-10 (carousel) */
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-prodesign-10 .wpsisac-slick-image-slide { padding: 0 2px; text-align: center; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-prodesign-10 .wpsisac-slider-short-content { padding: 0 15px; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-prodesign-10 .wpsisac-slide-title { background-color: #fff; width: 80%; box-shadow: 0 4px 20px rgba(0,0,0,.1); transition: .5s; position: relative; margin: -50px auto 15px !important; padding: 20px; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-prodesign-10 .wpsisac-slide-wrap:hover .wpsisac-slide-title { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-prodesign-10 .wpsisac-no-thumb-img .wpsisac-slide-title { margin-top: 10px !important; }

/* dots base */
:where(.em-slider--legacy) .wpsisac-slick .slick-dots { padding: 0 !important; margin: 0 !important; position: absolute; text-align: center; left: 15px !important; right: 15px; bottom: 10px !important; line-height: 0 !important; }
:where(.em-slider--legacy) .wpsisac-slick .slick-dots li { list-style: none !important; display: inline-block !important; margin: 0 3px !important; padding: 0 !important; line-height: 0; }
:where(.em-slider--legacy) .wpsisac-slick ul.slick-dots li::before,
:where(.em-slider--legacy) .wpsisac-slick ul.slick-dots li::after { background: 0 0 !important; content: none !important; }
:where(.em-slider--legacy) .wpsisac-slick .slick-dots li button { text-indent: -99999px; background: #fff !important; margin: 0 !important; padding: 0 !important; border: 2px solid #444; border-radius: 50% !important; width: 13px !important; height: 13px !important; box-shadow: none !important; cursor: pointer; }
:where(.em-slider--legacy) .wpsisac-slick .slick-dots li button:focus { outline: 0 !important; }
:where(.em-slider--legacy) .wpsisac-slick .slick-dots li.slick-active button { background: #8d8c8c !important; }

/* dots-design-10 */
:where(.em-slider--legacy) .wpsisac-slick.wpsisac-dots-design-10 .slick-dots li { position: relative; }
:where(.em-slider--legacy) .wpsisac-slick.wpsisac-dots-design-10 .slick-dots li button { border: 2px solid #fff !important; background: #333 !important; width: 15px !important; height: 15px !important; }
:where(.em-slider--legacy) .wpsisac-slick.wpsisac-dots-design-10 .slick-dots li button::after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 50%; visibility: hidden; background: #fff; opacity: 0; transform: rotate(-100deg); transform-origin: -200% 50%; transition: transform .3s .3s, opacity .3s, visibility 0s .3s; }
:where(.em-slider--legacy) .wpsisac-slick.wpsisac-dots-design-10 .slick-dots li button:focus { background: rgba(255,255,255,.2); }
:where(.em-slider--legacy) .wpsisac-slick.wpsisac-dots-design-10 .slick-dots li.slick-active button::after { visibility: visible; opacity: 1; transform: rotate(0); transition: transform .3s, opacity .3s; height: 15px; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-dots-design-10 .slick-dots li button { border: 2px solid #333 !important; background: #fff !important; }
:where(.em-slider--legacy) .wpsisac-slick-carousal.wpsisac-dots-design-10 .slick-dots li button::after { background: #333; }