/* SSI Gridbuilder Loop – Produkt-Kachel */

.ssi-loop-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 20px;
	background: #fff;
	border: 1px solid #e5e5e5;
	transition: box-shadow 0.15s;
}

.ssi-loop-item:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* Stretched Link: macht die ganze Kachel klickbar */
.ssi-loop-item__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Swatch-Links liegen über dem Overlay und bleiben eigenständig klickbar.
   Feste Höhe, damit alle Kacheln gleich hoch bleiben (auch ohne Farben). */
.ssi-loop-item__farben {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	height: 40px;
	overflow: hidden;
}

.ssi-loop-item__farben-label {
	color: #555;
}

.ssi-loop-item .farb-swatch {
	display: inline-block;
	flex: 0 0 auto;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	border-radius: 50%;
	border: 1px solid #ccc;
	transition: transform 0.15s, box-shadow 0.15s;
}

.ssi-loop-item .farb-swatch:hover {
	transform: scale(1.15);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Feste Bildhöhe je Breakpoint, Bild wird eingepasst */
.ssi-loop-item__image {
	margin: 0;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ssi-loop-item__image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Feste Titelhöhe (3 Zeilen) */
.ssi-loop-item__title {
	margin: 0;
	font-size: 1.15em;
	line-height: 1.3;
	height: 3.9em;
	color: #333;
}

.ssi-loop-item__specs {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #3a3a3a;
	font-size: 0.75em;
}

.ssi-loop-item__specs li {
	margin: 2px 0;
	padding: 0;
}

.ssi-loop-item__spec-label {
	width: 50%;
	display: inline-block;
	color: #8a8a8a;
	font-size: 1.05em;
}

.ssi-loop-item__button {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 10px 20px;
	background: #3a3a3a;
	color: #fff;
	border-radius: 0;
	transition: background 0.15s, color 0.15s;
}

/* Hover auf der ganzen Kachel (Overlay fängt den Hover ab) und direkt auf dem Button */
.ssi-loop-item:hover .ssi-loop-item__button {
	background: #222;
}

/* Feste Höhen je Breakpoint (Elementor-Standard: Tablet ≤1024px, Mobile ≤767px) */
@media (max-width: 1024px) {
	.ssi-loop-item__image {
		height: 180px;
	}
}

@media (max-width: 767px) {
	.ssi-loop-item__image {
		height: 200px;
	}

	.ssi-loop-item__title {
		font-size: 1.05em;
	}
}


.farb-swatch.Blau,        .farb-swatch.blau        { background-color: #1A4F9C; }
.farb-swatch.Gelb,        .farb-swatch.gelb        { background-color: #F1D328; }
.farb-swatch.Grau,        .farb-swatch.grau        { background-color: #9A9A9A; }
.farb-swatch.Grün,        .farb-swatch.grün        { background-color: #3A8A3A; }
.farb-swatch.Natur,       .farb-swatch.natur       { background-color: #E8DFC8; }
.farb-swatch.PP,          .farb-swatch.pp          { background-color: #E5E5E5; }
.farb-swatch.Rot,         .farb-swatch.rot         { background-color: #C1121C; }
.farb-swatch.Schwarz,     .farb-swatch.schwarz     { background-color: #000000; }
.farb-swatch.Transluzent, .farb-swatch.transluzent { background-color: #E0E6EAaa; }
.farb-swatch.Transparent, .farb-swatch.transparent { background-color: #FFFFFF1a; }
.farb-swatch.Weiss, .farb-swatch.weiss,
.farb-swatch.Weiß,  .farb-swatch.weiß             { background-color: #FFFFFF; }
.farb-swatch.schwarzgrau                          { background-color: #3A3A3C; }

/* Mehrwort-Werte + RAL: Attribut-Selektor matcht den ganzen class-String */
.farb-swatch[class*="Schwarz ableitend"],
.farb-swatch[class*="schwarz ableitend"] { background-color: #1C1C1C; }
.farb-swatch[class*="Schwarz leitfähig"] { background-color: #0D0D0D; }
.farb-swatch[class*="RAL 5003"]          { background-color: #1F3856; }
.farb-swatch[class*="RAL 5005"]          { background-color: #1E579C; }
.farb-swatch[class*="RAL 5012"]          { background-color: #3481B8; }