/**
 * Elementor-Widget „Anfrageprodukte“ – Kartenraster wie Miele-Loop.
 * Farben folgen Heller-CI, überschreibbar über Widget-Style-Controls.
 */

.wtas-loop {
	--wtas-loop-cols: 5;
	--wtas-loop-gap: 16px;
	--wtas-loop-card-bg: #efefef;
	--wtas-loop-media-bg: #fff;
	--wtas-loop-ink: var(--wtas-ink, #1f1f1f);
	--wtas-loop-cta: var(--wtas-btn, #7f0013);
	display: grid;
	grid-template-columns: repeat(var(--wtas-loop-cols, 5), minmax(0, 1fr));
	gap: var(--wtas-loop-gap, 16px);
	width: 100%;
}

.wtas-loop--leer {
	display: block;
	text-align: center;
	color: var(--wtas-loop-ink);
	padding: 1.5rem 1rem;
	background: var(--wtas-loop-card-bg);
	border-radius: 20px;
}

.wtas-loop__item {
	min-width: 0;
	height: 100%;
}

.wtas-loop__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: 14px;
	background: var(--wtas-loop-card-bg);
	border-radius: 22px;
	color: var(--wtas-loop-ink);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wtas-loop__card:hover,
.wtas-loop__card:focus-visible {
	color: var(--wtas-loop-ink);
	text-decoration: none;
	background: #e8e8e8;
}

.wtas-loop__card:focus-visible {
	outline: 2px solid var(--wtas-loop-cta);
	outline-offset: 2px;
}

.wtas-loop__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--wtas-loop-media-bg);
	border-radius: 16px;
	overflow: hidden;
	padding: 10px;
	box-sizing: border-box;
}

.wtas-loop__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.wtas-loop__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	padding: 14px 4px 4px;
	text-align: left;
}

.wtas-loop__titel {
	display: block;
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.3;
	color: var(--wtas-loop-ink);
}

.wtas-loop__preis {
	display: block;
	margin-top: 0.35rem;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--wtas-loop-ink);
}

.wtas-loop__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.85rem;
	color: var(--wtas-loop-cta);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

.wtas-loop__cta-icon {
	flex-shrink: 0;
	display: block;
}

.wtas-loop__card:hover .wtas-loop__cta,
.wtas-loop__card:focus-visible .wtas-loop__cta {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (max-width: 1024px) {
	.elementor-widget-wtas_produkte .wtas-loop {
		--wtas-loop-cols: 3;
	}
}

@media (max-width: 767px) {
	.elementor-widget-wtas_produkte .wtas-loop {
		--wtas-loop-cols: 1;
	}
}