/* ===== BASE COMPONENTS ===== */

.figcaption {
	font-size: var(--f-size-2xs);
}

.figcaption .creator {
	white-space: nowrap;
}

.section__heading {
	font-size: var(--f-size-l);
	font-weight: var(--f-weight-bd);
	line-height: 1.25;
	padding-bottom: var(--gap-xs);
	text-wrap: balance;
}

.hot-news .section__heading {
	border-bottom: 1px solid var(--c-canvas-medium);
	grid-column: 1 / -1;
}

/* ===== MAIN LAYOUT ===== */

.main {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
	padding-inline: max(.8rem, 3vw);
}

/* ===== WELCOME SECTION ===== */

.welcome {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.welcome__figure {
	margin-inline: min(-.8rem, -3vw); /* Negative Margins für Edge-to-Edge Design */
}

.welcome__figure .figcaption {
	margin-inline: max(.8rem, 3vw); /* Text-Einrückung zurücksetzen */
}

.welcome__image {
	aspect-ratio: 2;
	object-fit: cover;
	display: block;
	width: 100%;
}

.welcome__text {
	order: 2;
}

.welcome__paragraph {
	font-family: "serif-font", serif;
	font-style: italic;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	hyphenate-limit-chars: 8 3 3;
	text-wrap: pretty;
}

/* ===== EVENT LIST ===== */

.events-list {
	display: flex;
	flex-direction: column;
}

.event {
	border-top: 1px solid var(--c-canvas-medium);	
}

.event__link {
	align-items: baseline;
	display: flex;
	gap: var(--gap-s);
	line-height: 1.4;
	padding: var(--gap-s) 0;
	transition: transform var(--motion-duration-fast) ease-in-out;
}

.event__link:hover {
	transform: scale(1.02); /* Subtilere Hover-Animation */
}

.event__date {
	display: flex;
	flex: 0 0 7ch;
	flex-direction: column;
}

.event__day-month {
	display: flex;
	align-items: center;
}

.event__day {
	border-right: 1px solid var(--c-canvas-medium);
	font-weight: var(--f-weight-bd);
	font-size: var(--f-size-l);
	margin-right: .1rem;
	padding-right: .35rem;
}

.event__month {
	color: var(--c-secondary);
}

.event__time {
	color: var(--c-secondary);
	font-size: var(--f-size-s);
}

.event__details {
	flex: 1 1 auto;
	min-width: 0; /* verhindert das automatische ausdehnen des elements */
}

.event__name {
	text-wrap: balance;
}

.event__location {
	color: var(--c-secondary);
	font-size: var(--f-size-s);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tablet Layout Landscape und größer: auto-fit grid */
@media (min-width: 1024px) {
	.main {
		align-items: stretch;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		margin: auto;
	}

	.welcome {
		flex-direction: row;
		gap: var(--gap-m);
		grid-column: 1 / -1;
		justify-self: end;
		max-width: 1100px;
	}

	.welcome__text {
		flex: 2;
		font-size: var(--f-size-l);
		text-align: right; /* Logische Eigenschaft statt text-align: right */
	}

	.welcome__figure {
		flex: 1;
		margin: unset;
		order: 2;
	}

	.welcome__figure .figcaption {
		margin-inline: unset;
	}

	.welcome__image {
		aspect-ratio: 1.5;
		border-radius: var(--radius-sm);
		object-fit: cover;
		width: 100%;
	}

	.section.news {
		display: contents;
	}

	.more-news .section__heading {
		border: 0;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

}

@media (min-width: 1600px) {

	.welcome {
		max-width: 1300px;
	}

	.welcome__text {
		font-size: var(--f-size-2xl);
	}

}

@media (min-width: 1850px) {

	.welcome {
		max-width: 1400px;
	}

	.welcome__figure {
		flex: 1.8;
	}

	.welcome__image {
		aspect-ratio: 2;
	}

	.region {
		grid-column: span 2;
	}

	.map-abco {
		aspect-ratio: 2;
	}

}

@media (min-width: 2100px) {

	.main {
		max-width: 2000px;
	}

}