/* Flexible News-Uebersichten. Die optische Gestaltung bleibt im aktiven Theme. */
.news-overview {
	--news-columns: 1;
	--news-gap: clamp(16px, 2.4vw, 30px);
	position: relative;
	width: 100%;
	min-width: 0;
	container-type: inline-size;
}

.news-overview .news-slider__viewport { width: 100%; min-width: 0; }
.news-overview .news-slider__track { align-items: stretch; gap: var(--news-gap); width: 100%; }
.news-overview .news { min-width: 0; height: auto; margin: 0; }
.news-overview .news__content { min-width: 0; height: 100%; }
.news-overview .news__copy { min-width: 0; }

/* Statische Ausgabe --------------------------------------------------- */
.news-overview--static .news-slider__viewport {
	overflow: visible;
	scroll-snap-type: none;
}
.news-overview--static .news-slider__track {
	display: grid;
	grid-template-columns: repeat(var(--news-columns), minmax(0, 1fr));
}
.news-overview--static .news-slider__track > .news {
	width: auto;
	max-width: none;
	min-width: 0;
}

/* Slider und Carousel ------------------------------------------------- */
.news-overview--slider .news-slider__track { gap: 0; }
.news-overview--slider .news-slider__track > .news {
	flex: 0 0 100%;
	width: 100%;
}
.news-overview--carousel .news-slider__track > .news {
	flex: 0 0 100%;
	width: 100%;
}

/* Ansichten ----------------------------------------------------------- */
.news-overview--highlight { --news-columns: 1 !important; }
.news-overview--list { --news-columns: 1 !important; }
.news-overview--cards .news--teaser .news__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
}
.news-overview--cards .news--teaser.news--with-media .news__content { grid-template-rows: auto minmax(0, 1fr); }
.news-overview--list .news--teaser .news__content {
	display: grid;
	grid-template-columns: minmax(150px, 28%) minmax(0, 1fr) !important;
}

/* Bildformat ---------------------------------------------------------- */
.news-overview:not(.news-ratio-auto) .news--teaser .news__media-link,
.news-overview:not(.news-ratio-auto) .news--teaser .news__figure {
	height: auto;
	overflow: hidden;
}
.news-overview.news-ratio-16-9 .news--teaser .news__media-link,
.news-overview.news-ratio-16-9 .news--teaser .news__figure { aspect-ratio: 16 / 9; }
.news-overview.news-ratio-4-3 .news--teaser .news__media-link,
.news-overview.news-ratio-4-3 .news--teaser .news__figure { aspect-ratio: 4 / 3; }
.news-overview.news-ratio-1-1 .news--teaser .news__media-link,
.news-overview.news-ratio-1-1 .news--teaser .news__figure { aspect-ratio: 1 / 1; }
.news-overview.news-fit-cover .news--teaser .news__image { object-fit: cover; }
.news-overview.news-fit-contain .news--teaser .news__image { object-fit: contain; }

/* Responsive Spalten ------------------------------------------------- */
.news-columns-2-3-4 { --news-columns: 2; }
.news-overview--carousel.news-columns-2-3-4 .news-slider__track > .news {
	flex-basis: calc((100% - var(--news-gap)) / 2);
}

@container (min-width: 620px) {
	.news-columns-1-2-2,
	.news-columns-1-2-3,
	.news-columns-1-2-4 { --news-columns: 2; }
	.news-columns-2-3-4 { --news-columns: 3; }
	.news-overview--carousel.news-columns-1-2-2 .news-slider__track > .news,
	.news-overview--carousel.news-columns-1-2-3 .news-slider__track > .news,
	.news-overview--carousel.news-columns-1-2-4 .news-slider__track > .news {
		flex-basis: calc((100% - var(--news-gap)) / 2);
	}
	.news-overview--carousel.news-columns-2-3-4 .news-slider__track > .news {
		flex-basis: calc((100% - var(--news-gap) - var(--news-gap)) / 3);
	}
}

@container (min-width: 960px) {
	.news-columns-1-2-3 { --news-columns: 3; }
	.news-columns-1-2-4,
	.news-columns-2-3-4 { --news-columns: 4; }
	.news-overview--carousel.news-columns-1-2-3 .news-slider__track > .news {
		flex-basis: calc((100% - var(--news-gap) - var(--news-gap)) / 3);
	}
	.news-overview--carousel.news-columns-1-2-4 .news-slider__track > .news,
	.news-overview--carousel.news-columns-2-3-4 .news-slider__track > .news {
		flex-basis: calc((100% - var(--news-gap) - var(--news-gap) - var(--news-gap)) / 4);
	}
}

@container (max-width: 619px) {
	.news-overview--list .news--teaser .news__content {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-overview .news-slider__viewport { scroll-behavior: auto; }
}