/* ==========================================================================
   Fentrax – ruhige Bewegung (seit 21.10.2026)
   Alles kurz (höchstens 600 ms), leise und nur mit Bewegung erlaubt.
   Ausschalten: wp option update fx_kt_dynamik 0   (lädt diese Datei und das Skript nicht mehr)
   ========================================================================== */

/* ---------- 1. Eingangsanimation der FentraxPress-Karten und Blöcke ----------
   Die Elementor-Eingangsanimation «fadeInUp» fährt sonst 100 % der Elementhöhe hoch.
   Hier: sanft 18 px, 550 ms. Kein Halten am Ende (fill-mode backwards), damit die
   Hover-Bewegung der Karten nicht von der Animation überschrieben wird. */
@keyframes fx-aufsteigen {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to { opacity: 1; transform: none; }
}
.animated.fadeInUp {
	animation-name: fx-aufsteigen;
	animation-duration: .55s;
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
	animation-fill-mode: backwards;
}
/* Staffelung der Karten innerhalb eines Rasters (Spalte 2 bis 4: etwas später) */
.fp-loop-item:nth-child(4n+2) .animated { animation-delay: .07s; }
.fp-loop-item:nth-child(4n+3) .animated { animation-delay: .14s; }
.fp-loop-item:nth-child(4n+4) .animated { animation-delay: .21s; }

/* Karussell: Karten ausserhalb des Bildes werden nicht einzeln eingeblendet (das Karussell als Ganzes tut es) */
.fx-news-karussell .elementor-invisible { visibility: visible !important; }
.fx-news-karussell .animated { animation: none !important; }

/* ---------- 2. Einblenden von Inhalten im Beitrag (Skript fentrax-dynamik.js) ----------
   Versteckt wird nur, was das Skript mit .fx-rv markiert hat (also nie ohne JavaScript). */
.fx-rv {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity .5s ease-out, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.fx-rv.fx-rv--in { opacity: 1; transform: none; }

/* ---------- 3. Karten: leichtes Anheben, weicher Schatten, Bild-Zoom ---------- */
.fx-card--tile.e-con,
.fx-card--lead.e-con,
.fx-usecase.e-con {
	transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), background .3s, border-color .3s;
}
.fx-story-thumb { display: block; overflow: hidden; }
.fx-story-thumb img { transition: transform .3s var(--fx-ease); will-change: auto; }
@media (hover: hover) and (pointer: fine) {
	.fx-card--tile.e-con:hover,
	.fx-card--lead.e-con:hover,
	.fx-usecase.e-con:hover {
		transform: translateY(-3px);
		box-shadow: 0 1px 2px rgba(22, 33, 58, .05), 0 22px 36px -22px rgba(22, 33, 58, .34);
	}
	.fx-card:hover .fx-story-thumb img,
	.fx-usecase:hover .fx-story-thumb img { transform: scale(1.03); }
}

/* ---------- 4. News-Karussell: Pfeile und Punkte leise ----------
   Das Karussell scrollt (overflow), darum bekommt die Spur oben/unten Luft: sonst schneidet sie das Anheben
   und den Schatten der Karten ab. Die negativen Ränder gleichen das wieder aus. */
.fx-news-karussell .fp-loop-carousel { --fp-carousel-arrow-size: 14px; }
.fx-news-karussell .fp-loop-carousel__track { padding-block: 8px 30px; margin-block: -8px -30px; }
html body .fx-news-karussell button.fp-loop-carousel__arrow,
html body .fx-news-karussell button.fp-loop-carousel__arrow:hover,
html body .fx-news-karussell button.fp-loop-carousel__arrow:focus {
	background-color: var(--fx-surface, #fff);
	color: var(--fx-ink, #16213a);
	box-shadow: 0 1px 2px rgba(22, 33, 58, .08), 0 6px 14px -6px rgba(22, 33, 58, .3);
	border: 1px solid var(--fx-card-border, rgba(22, 33, 58, .12));
	opacity: .92;
	transition: opacity .2s ease, transform .2s ease;
}
html body .fx-news-karussell button.fp-loop-carousel__arrow:hover { opacity: 1; }
.fx-news-karussell .fp-loop-carousel__arrow--prev { inset-inline-start: -6px; }
.fx-news-karussell .fp-loop-carousel__arrow--next { inset-inline-end: -6px; }
.fx-news-karussell .fp-loop-carousel__dot { --fp-dot-color: rgba(22, 33, 58, .2); --fp-dot-active-color: var(--fx-ink, #16213a); }
.fx-news-karussell .fp-loop-carousel__dot::before { width: 8px; height: 8px; transition: background-color .2s ease; }
.fx-news-karussell .fp-loop-carousel__dots { margin-top: 20px; }
@media (min-width: 1100px) {
	.fx-news-karussell .fp-loop-carousel__arrow--prev { inset-inline-start: -22px; }
	.fx-news-karussell .fp-loop-carousel__arrow--next { inset-inline-end: -22px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible { visibility: visible !important; }
	.animated, .fx-rv { animation: none !important; transition: none !important; }
	.fx-rv { opacity: 1; transform: none; }
	.fx-card--tile.e-con:hover,
	.fx-card--lead.e-con:hover,
	.fx-usecase.e-con:hover { transform: none; }
	.fx-card:hover .fx-story-thumb img,
	.fx-usecase:hover .fx-story-thumb img { transform: none; }
}