/* Event-Vorschau – Kachel-Grid
   Typografie wird von Divi geerbt; Farben werden bewusst fest gesetzt,
   weil Divis Modul-Farben innerhalb eines Code-Moduls nicht greifen. */

.bko-event-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.bko-event {
	flex: 1 1 calc(25% - 23px); /* 4 Spalten auf dem Desktop */
	min-width: 0;
	transition: transform 0.3s ease; /* sanftes Anheben beim Hover */
}

/* Hover: Kachel hebt sich kurz an (wie im Original). */
.bko-event:hover {
	transform: translateY(-10px);
}

.bko-event__bild {
	display: block;
	margin-bottom: 15px;
}

/* Bild in seiner natürlichen Form anzeigen (hochkant oder quer). */
.bko-event__bild img {
	display: block;
	width: 100%;
	height: auto;
}

.bko-event__titel {
	margin: 0 0 8px;
}

.bko-event__meta,
.bko-event__preis {
	margin: 0 0 8px;
}

/* --- Farben (bei Bedarf an die Markenfarben anpassen) --------------- */

/* Titel, Text und Preis in der Markenfarbe (cremefarben). */
.bko-event-grid .bko-event__titel a {
	color: #ffe8d0 !important;
	text-decoration: none;
}

.bko-event-grid .bko-event__meta {
	color: #ffe8d0 !important;
}

.bko-event-grid .bko-event__preis {
	color: #dba36a !important;
	font-weight: 700;
}

/* --- Höhenversatz (nur PC-Ansicht) --------------------------------- */

/* Auf dem Desktop werden die 2. und 4. Kachel nach unten versetzt,
   sodass ein Zickzack-Muster wie im Original entsteht. */
@media (min-width: 981px) {
	.bko-event:nth-child(2n) {
		margin-top: 50px;
	}
}

/* --- Responsiv ----------------------------------------------------- */

/* Tablet: 2 Spalten */
@media (max-width: 980px) {
	.bko-event {
		flex: 1 1 calc(50% - 15px);
		margin-top: 0; /* Versatz auf kleineren Bildschirmen aufheben */
	}
}

/* Smartphone: 1 Spalte */
@media (max-width: 600px) {
	.bko-event {
		flex: 1 1 100%;
	}
}