.ff-hero-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	--ff-transition-duration: 700ms;
}

.ff-hero-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.ff-hero-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.ff-hero-slider__slide-inner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
}

.ff-hero-slider__slide-inner > * {
	height: 100%;
}

.ff-hero-slider__slide-inner.ff-hero-slider__slide--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/*
 * Sauberer Crossfade: Nur der EINGEHENDE Slide animiert seine Opacity
 * (0 -> 1) und blendet dabei deckend über den ausgehenden. Der ausgehende
 * Slide bleibt während der gesamten Überblendung voll sichtbar (opacity: 1)
 * und wird höchstens per transform "weggeschoben" - so ist zu keinem
 * Zeitpunkt der Seitenhintergrund sichtbar (kein "weisses Aufblitzen").
 * Die konkrete Stapelreihenfolge (wer oben liegt) wird zusätzlich per
 * Inline-Style (z-index) in JS gesetzt, da bei gleichem Wert sonst die
 * DOM-Reihenfolge entscheidet - das reicht bei einer Endlosschleife nicht.
 */

/* --- Animation: Fade --- */
.ff-hero-slider__slide-inner.ff-anim-in-fade {
	animation-name: ffHeroFadeIn;
}
/* Kein Opacity-Wechsel beim Verlassen nötig - der einblendende Slide deckt
   automatisch zu. ff-anim-out-fade bleibt bewusst ohne Keyframe-Effekt. */

@keyframes ffHeroFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- Animation: Slide Left/Right/Up/Down --- */
.ff-hero-slider__slide-inner.ff-anim-in-slide-left   { animation-name: ffHeroSlideInLeft; }
.ff-hero-slider__slide-inner.ff-anim-out-slide-left  { animation-name: ffHeroSlideOutLeft; }
.ff-hero-slider__slide-inner.ff-anim-in-slide-right  { animation-name: ffHeroSlideInRight; }
.ff-hero-slider__slide-inner.ff-anim-out-slide-right { animation-name: ffHeroSlideOutRight; }
.ff-hero-slider__slide-inner.ff-anim-in-slide-up     { animation-name: ffHeroSlideInUp; }
.ff-hero-slider__slide-inner.ff-anim-out-slide-up    { animation-name: ffHeroSlideOutUp; }
.ff-hero-slider__slide-inner.ff-anim-in-slide-down   { animation-name: ffHeroSlideInDown; }
.ff-hero-slider__slide-inner.ff-anim-out-slide-down  { animation-name: ffHeroSlideOutDown; }

/* "In"-Varianten: volle Deckkraft von Anfang bis Ende, nur Position bewegt sich rein. */
@keyframes ffHeroSlideInLeft   { from { opacity: 1; transform: translateX(-6%); } to { opacity: 1; transform: translateX(0); } }
@keyframes ffHeroSlideInRight  { from { opacity: 1; transform: translateX(6%);  } to { opacity: 1; transform: translateX(0); } }
@keyframes ffHeroSlideInUp     { from { opacity: 1; transform: translateY(6%);  } to { opacity: 1; transform: translateY(0); } }
@keyframes ffHeroSlideInDown   { from { opacity: 1; transform: translateY(-6%); } to { opacity: 1; transform: translateY(0); } }

/* "Out"-Varianten: bleiben deckend (opacity: 1), bewegen sich nur weg -
   dadurch nie transparent, kein Hintergrund-Durchscheinen. */
@keyframes ffHeroSlideOutLeft  { from { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateX(-6%); } }
@keyframes ffHeroSlideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateX(6%);  } }
@keyframes ffHeroSlideOutUp    { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-6%); } }
@keyframes ffHeroSlideOutDown  { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(6%);  } }

/* --- Animation: Zoom --- */
.ff-hero-slider__slide-inner.ff-anim-in-zoom  { animation-name: ffHeroZoomIn; }
.ff-hero-slider__slide-inner.ff-anim-out-zoom { animation-name: ffHeroZoomOut; }
@keyframes ffHeroZoomIn  { from { opacity: 1; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ffHeroZoomOut { from { opacity: 1; transform: scale(1); }   to { opacity: 1; transform: scale(1.04); } }

/* --- Animation: Keine --- */
.ff-hero-slider__slide-inner.ff-anim-in-none,
.ff-hero-slider__slide-inner.ff-anim-out-none {
	animation: none;
}

/* Gemeinsame Timing-Einstellungen für alle Animationsklassen, gesteuert
   über die Übergangsdauer-Einstellung im Widget. */
.ff-hero-slider__slide-inner[class*="ff-anim-"] {
	animation-duration: var(--ff-transition-duration, 700ms);
	animation-timing-function: ease;
	animation-fill-mode: both;
}

/* Drag-Cursor, aktiv gesetzt via JS je nach Mouse-Drag-Einstellung */
.ff-hero-slider--draggable {
	cursor: grab;
}
.ff-hero-slider--dragging {
	cursor: grabbing;
}

/* Pfeile */
.ff-hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #222;
	transition: background 0.2s ease;
}
.ff-hero-slider__arrow:hover {
	background: #fff;
}
.ff-hero-slider__arrow--prev {
	left: 20px;
}
.ff-hero-slider__arrow--next {
	right: 20px;
}
.ff-hero-slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Punkte */
.ff-hero-slider__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 8px;
}
.ff-hero-slider__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.ff-hero-slider__dot--active,
.ff-hero-slider__dot:hover {
	background: #fff;
	transform: scale(1.2);
}

/* Editor-Hinweis, wenn noch keine Slides gewählt sind */
.ff-hero-slider-empty {
	padding: 40px;
	text-align: center;
	background: #f5f5f5;
	color: #666;
	border: 1px dashed #ccc;
}