/* ==========================================================================
   LIEPS COMPONENT – NEWS DETAIL
   Aus der bisherigen custom.css unverändert ausgelagert.
   ========================================================================== */

/* ==========================================================================
   frame-type-news_newsdetail frame-layout-1
   ========================================================================== */
.frame-type-news_newsdetail.frame-layout-1 {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 2rem;
}

.frame-type-news_newsdetail .tags,
.frame-type-news_newsdetail .performance-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .3rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.frame-type-news_newsdetail .performance-tags
{
	margin-top: 0;
}
.performance-label {
	display: block;
	margin:0;
	padding: 0.5rem 0rem;
	font-size: .75rem;
	border-bottom: 1px solid var(--brand-color-mirage);
	margin-bottom: .3rem;
}
/* ==========================================================================
   News-Detail: Gepacktes Masonry (CSS-Grid + JS-Höhenberechnung)
   ========================================================================== */



.news-detail-masonry {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 8px;
	grid-auto-flow: dense;
	align-items: start;
	column-gap: 1.5rem;
	row-gap: 0;
	margin-top: 2rem;
}

.news-detail-masonry__item {
	margin: 0;
	/* Zeilenspanne wird per JS gesetzt; hier nur ein sinnvoller Startwert */
	grid-row-end: span 20;
}

/* Querformat spannt über beide Spalten */
.news-detail-masonry__item--landscape {
	grid-column: 1 / -1;
}

/* Quadrat und Hochformat bleiben einspaltig */
.news-detail-masonry__item--square,
.news-detail-masonry__item--portrait {
	grid-column: auto;
}

.news-detail-masonry__item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.25rem;
}

.news-detail-masonry__caption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.35;
}

@media (max-width: 575.98px) {
	.news-detail-masonry {
		grid-template-columns: 1fr;
	}

	.news-detail-masonry__item--landscape {
		grid-column: auto;
	}
}



/* ==========================================================================
   REFERENZ-DETAIL – Single-Media CLS Fix

   Wenn die Default-Referenz nur ein Galeriebild besitzt, darf das Element
   nicht zuerst als 8px-Masonry-Grid mit "span 20" gerendert und später per
   JavaScript auf seine echte Höhe vergrößert werden.

   Der Single-Fall läuft deshalb von Anfang an im normalen Dokumentfluss.
   Die bestehende Masonry-JS darf weiterlaufen; grid-row-end ist außerhalb
   eines Grid-Containers wirkungslos.
   ========================================================================== */

.news-detail-masonry:has(> .news-detail-masonry__item:only-child) {
	display: block;
	margin-top: 2rem;
}

/*
 * inline-block + width:auto nutzt die intrinsische Bildbreite.
 * Dadurch wird z. B. ein 400px breites Ausgangsbild nicht auf eine
 * ~600px breite Grid-Spalte hochskaliert.
 */
.news-detail-masonry:has(> .news-detail-masonry__item:only-child)
> .news-detail-masonry__item:only-child {
	display: inline-block;
	width: auto;
	max-width: calc(50% - .75rem);
	margin: 0;
	grid-row-end: auto !important;
	vertical-align: top;
}

.news-detail-masonry:has(> .news-detail-masonry__item:only-child)
> .news-detail-masonry__item:only-child img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Mobile: komplette verfügbare Breite, aber niemals über die Bildbreite hinaus. */
@media (max-width: 575.98px) {
	.news-detail-masonry:has(> .news-detail-masonry__item:only-child)
	> .news-detail-masonry__item:only-child {
		max-width: 100%;
	}
}


.categories_5 span:not(:last-of-type)::after {
	content: ', ';
}

.news-headline *
{
 hyphens: auto;
}