.bento-layout {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, 1fr);
	/* Wir definieren 6 Zeilen für maximale Flexibilität bei den Höhen */
	grid-template-rows: repeat(6, 120px); 
	width: 100%;
}

.bento-item {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	background: #f8f9fa; /* Platzhalterfarbe */
}

/* JTL-Portlet Integration: Sorgt dafür, dass gezogene Bilder den Slot füllen */
.bento-item > * {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Verhindert, dass leere Slots im Editor verschwinden */
.bento-item {
	min-height: 150px; /* Mindesthöhe für leere Slots */
	background: rgba(0,0,0,0.05); /* Leichter Grauton, damit man die Boxen sieht */
	border: 1px dashed #ccc; /* Gestrichelte Linie im Editor */
}

/* Wenn Inhalt drin ist (im Live-Shop), Rahmen entfernen */
.bento-item:not(:empty) {
	border: none;
	background: transparent;
}
/* Definition der Kachel-Positionen (Basiert auf deinem Screenshot) */
.item-bike      { grid-column: 1; grid-row: 1 / span 4; } /* Hochkant links */
.item-tune      { grid-column: 2; grid-row: 1 / span 2; }
.item-enve      { grid-column: 3; grid-row: 1 / span 3; } /* Enve ist etwas höher */
.item-alpitude  { grid-column: 4; grid-row: 1 / span 4; } /* Hochkant rechts oben */

.item-wolftooth { grid-column: 2; grid-row: 3 / span 2; }
.item-oakley    { grid-column: 3; grid-row: 4 / span 2; }

.item-garbaruk  { grid-column: 1 / span 2; grid-row: 5; } /* Flache Kassette */
.item-lupine    { grid-column: 4; grid-row: 5 / span 2; } /* Lupine Berg-Bild */

.item-cycplus   { grid-column: 1; grid-row: 6; }
.item-deals     { grid-column: 2 / span 2; grid-row: 6; } /* Breites Deals Banner */

/* Responsive: Auf Tablets 2-spaltig, auf Handys 1-spaltig */
@media (max-width: 991px) {
	.bento-layout {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		grid-auto-rows: 250px;
	}
	/* Hier heben wir die festen Zuordnungen auf, damit es fließt */
	.bento-item { grid-column: auto !important; grid-row: auto !important; }
	.item-garbaruk, .item-deals { grid-column: span 2 !important; }
}

{if $isPreview}
.opc-area:empty::after {
	content: 'Slot verfügbar';
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #ccc;
	font-size: 11px;
	border: 1px dashed #ddd;
	border-radius: 20px;
}
{/if}