/* === toweb Komponenten-Kit ===
   Scroll-Animationen, Counter, Slider – dependency-frei.
   Animationen werden erst aktiv, wenn JS die Klasse .toweb-anim-ready setzt
   (so bleibt ohne JS / im Editor alles sichtbar). */

/* --- Scroll-Animationen --- */
.toweb-anim-ready :is(.toweb-animate, .is-style-toweb-animate) {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
.toweb-anim-ready :is(.toweb-animate, .is-style-toweb-animate).is-in {
	opacity: 1;
	transform: none;
}
/* Richtungs-/Stil-Varianten (zusätzliche Klasse) */
.toweb-anim-ready .toweb-anim-zoom  { transform: scale(.92); }
.toweb-anim-ready .toweb-anim-left  { transform: translateX(-32px); }
.toweb-anim-ready .toweb-anim-right { transform: translateX(32px); }
.toweb-anim-ready .toweb-anim-fade  { transform: none; }
.toweb-anim-ready .toweb-anim-zoom.is-in,
.toweb-anim-ready .toweb-anim-left.is-in,
.toweb-anim-ready .toweb-anim-right.is-in { transform: none; }
/* Verzögerungen (z.B. für gestaffelte Karten) */
.toweb-anim-delay-1 { transition-delay: .12s; }
.toweb-anim-delay-2 { transition-delay: .24s; }
.toweb-anim-delay-3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
	.toweb-anim-ready :is(.toweb-animate, .is-style-toweb-animate) {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Slider (CSS scroll-snap) --- */
.toweb-slider-wrap { position: relative; }
.toweb-slider,
.is-style-toweb-slider {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.toweb-slider::-webkit-scrollbar,
.is-style-toweb-slider::-webkit-scrollbar { display: none; }
.toweb-slider > *,
.is-style-toweb-slider > * {
	scroll-snap-align: center;
	flex: 0 0 100%;
	min-width: 0;
}
.toweb-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: var(--wp--preset--color--primary, #2563eb);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	z-index: 2;
	opacity: .9;
}
.toweb-slider-arrow:hover { opacity: 1; }
.toweb-slider-arrow--prev { left: 8px; }
.toweb-slider-arrow--next { right: 8px; }