.owb-events {
	--owb-events-blue: #00466f;
	--owb-events-blue-dark: #003653;
	--owb-events-text: #252525;
	--owb-events-muted: #626262;
	--owb-events-border: #cfd5d9;

	position: relative;
	left: 50%;
	width: min(1120px, calc(100vw - 48px));
	max-width: none;
	transform: translateX(-50%);
	color: var(--owb-events-text);
}

.owb-events *,
.owb-events *::before,
.owb-events *::after {
	box-sizing: border-box;
}

/* Seiteneinstieg */

.owb-events__intro {
	max-width: 760px;
	margin: 0 0 52px;
}

.owb-events__intro h1 {
	margin: 0 0 14px;
	color: var(--owb-events-text);
	font-family: inherit;
	font-size: 40px;
	font-weight: 400;
	line-height: 1.15;
}

.owb-events__intro p {
	margin: 0;
	color: var(--owb-events-muted);
	font-size: 17px;
	line-height: 1.7;
}

/* Filter */

.owb-events__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 34px;
}

.owb-events__filter {
	min-height: 38px;
	padding: 10px 22px;
	border: 1px solid var(--owb-events-blue);
	border-radius: 0;
	background: transparent;
	color: var(--owb-events-blue);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color 160ms ease,
		color 160ms ease;
}

.owb-events__filter:hover,
.owb-events__filter:focus-visible,
.owb-events__filter.is-active {
	background: var(--owb-events-blue);
	color: #fff;
}

.owb-events__filter:focus-visible,
.owb-event-card__button:focus-visible {
	outline: 2px solid var(--owb-events-blue);
	outline-offset: 3px;
}

/* Kartenübersicht */

.owb-events__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.owb-event-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 390px;
	padding: 30px 28px 28px;
	border: 1px solid var(--owb-events-border);
	border-top: 4px solid var(--owb-events-blue);
	background: #fff;
}

.owb-event-card[hidden] {
	display: none !important;
}

/* Kategorie */

.owb-event-card__category {
	margin: 0 0 18px;
	color: var(--owb-events-blue);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Datum und Titel */

.owb-event-card__heading {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.owb-event-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: 6px;
	border: 1px solid var(--owb-events-blue);
	color: var(--owb-events-blue);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.owb-event-card__date strong {
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
}

.owb-event-card__date span {
	margin-top: 5px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 1px;
}

.owb-event-card__title {
	margin: 0;
	color: var(--owb-events-text);
	font-family: inherit;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Terminzeit */

.owb-event-card__time {
	margin: 22px 0 0;
	color: var(--owb-events-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
}

/* Kurzbeschreibung */

.owb-event-card__description {
	margin-top: 20px;
	color: var(--owb-events-text);
	font-size: 14px;
	line-height: 1.75;
}

.owb-event-card__description > :first-child {
	margin-top: 0;
}

.owb-event-card__description > :last-child {
	margin-bottom: 0;
}

/* Button */

.owb-event-card__actions {
	margin-top: auto;
	padding-top: 28px;
}

.owb-event-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 10px 18px;
	background: var(--owb-events-blue);
	color: #fff !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 160ms ease;
}

.owb-event-card__button:hover {
	background: var(--owb-events-blue-dark);
	color: #fff !important;
}

/* Leere Ergebnisse */

.owb-events__empty {
	margin: 24px 0;
	color: var(--owb-events-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Tablet */

@media (max-width: 1024px) {
	.owb-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobil */

@media (max-width: 680px) {
	.owb-events {
		width: min(100%, calc(100vw - 32px));
	}

	.owb-events__intro {
		margin-bottom: 34px;
	}

	.owb-events__intro h1 {
		font-size: 34px;
	}

	.owb-events__intro p {
		font-size: 16px;
	}

	.owb-events__filters {
		gap: 8px;
		margin-bottom: 24px;
	}

	.owb-events__filter {
		flex: 1 1 calc(50% - 8px);
		padding-inline: 12px;
	}

	.owb-events__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.owb-event-card {
		min-height: 0;
		padding: 26px 22px;
	}
}

/* Kleine Mobilgeräte */

@media (max-width: 420px) {
	.owb-events__filter {
		flex-basis: 100%;
	}

	.owb-event-card__heading {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 14px;
	}

	.owb-event-card__date {
		min-height: 58px;
	}

	.owb-event-card__title {
		font-size: 20px;
	}
}