/* ================================================================
   uiEffects.css - dezente Animationen & moderne Karten (blu-e)
   Progressive Enhancement: ohne JS bleibt alles sichtbar.
   ================================================================ */

/* --- Scroll-Reveal (nur aktiv, wenn JS html.fx-ready setzt) --- */
html.fx-ready .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}
html.fx-ready .reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* gestaffelte Verzoegerung fuer Grids */
html.fx-ready .reveal[data-fx-delay="1"] { transition-delay: .08s; }
html.fx-ready .reveal[data-fx-delay="2"] { transition-delay: .16s; }
html.fx-ready .reveal[data-fx-delay="3"] { transition-delay: .24s; }
html.fx-ready .reveal[data-fx-delay="4"] { transition-delay: .32s; }
html.fx-ready .reveal[data-fx-delay="5"] { transition-delay: .40s; }

/* --- Kategorie-/Produktkacheln --- */
.fx-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.fx-card {
	width: 120px;
	padding: 12px 6px;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fx-card a { text-decoration: none; display: block; }
.fx-card img {
	max-width: 90px;
	transition: transform .3s ease;
}
.fx-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
	border-color: #ae1110;
}
.fx-card:hover img {
	transform: scale(1.06);
}
.fx-card .fx-card-title {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #333;
	transition: color .25s ease;
}
.fx-card:hover .fx-card-title { color: #ae1110; }

/* --- Mikrointeraktionen global --- */
a, button, .ui.button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
html { scroll-behavior: smooth; }

/* --- Hero-Banner: sanfter Ken-Burns-Effekt --- */
html.fx-ready .fx-hero img, html.fx-ready img.fx-hero {
	animation: fxKenBurns 18s ease-in-out infinite alternate;
}
@keyframes fxKenBurns {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}
.fx-hero { overflow: hidden; display: block; }

/* --- Barrierefreiheit: reduzierte Bewegung respektieren --- */
@media (prefers-reduced-motion: reduce) {
	html.fx-ready .reveal { opacity: 1; transform: none; transition: none; }
	html.fx-ready .fx-hero img, html.fx-ready img.fx-hero { animation: none; }
	html { scroll-behavior: auto; }
	.fx-card, .fx-card img { transition: none; }
}

/* --- Startseiten-Produktkacheln (news-Block, .ui.product.segment) --- */
.ui.product.segment .item {
	border-radius: 10px;
	padding: 8px 4px;
	background: transparent;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.ui.product.segment .item img {
	transition: transform .3s ease;
}
.ui.product.segment .item:hover {
	transform: translateY(-4px);
	background: #fff;
	box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.ui.product.segment .item:hover img {
	transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
	.ui.product.segment .item, .ui.product.segment .item img { transition: none; }
}