.boxed-content {
	width: min(100%, calc(var(--content-max-width) + (2 * var(--content-padding))));
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

.page-main,
.project-main {
	padding-top: var(--page-top-space);
	padding-bottom: var(--page-bottom-space);
}

.content-page,
.project-content {
	display: flow-root;
}

.content-page > :first-child,
.project-content > :first-child {
	margin-top: 0;
}

.content-section {
	margin-block: var(--space-6);
}

/* Normales, bewusst einfaches Seitenraster für 1-, 2- oder 3-spaltige Bereiche. */
.layout-grid {
	display: grid;
	align-items: start;
}

.layout-grid-mobile--1 { grid-template-columns: 1fr; }
.layout-grid-mobile--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-grid-mobile--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
 * Einheitliche und bei Bedarf getrennt steuerbare Abstände.
 * Die Variablen werden zusätzlich vom Mosaic Grid zur exakten Rasterberechnung genutzt.
 */
.gap--none {
	--layout-row-gap: 0px;
	--layout-column-gap: 0px;
	gap: 0;
}
.gap--small {
	--layout-row-gap: var(--gap-small);
	--layout-column-gap: var(--gap-small);
	gap: var(--gap-small);
}
.gap--medium {
	--layout-row-gap: var(--gap-medium);
	--layout-column-gap: var(--gap-medium);
	gap: var(--gap-medium);
}
.gap--large {
	--layout-row-gap: var(--gap-large);
	--layout-column-gap: var(--gap-large);
	gap: var(--gap-large);
}

.row-gap--none { --layout-row-gap: 0px; row-gap: 0; }
.row-gap--small { --layout-row-gap: var(--gap-small); row-gap: var(--gap-small); }
.row-gap--medium { --layout-row-gap: var(--gap-medium); row-gap: var(--gap-medium); }
.row-gap--large { --layout-row-gap: var(--gap-large); row-gap: var(--gap-large); }

.column-gap--none { --layout-column-gap: 0px; column-gap: 0; }
.column-gap--small { --layout-column-gap: var(--gap-small); column-gap: var(--gap-small); }
.column-gap--medium { --layout-column-gap: var(--gap-medium); column-gap: var(--gap-medium); }
.column-gap--large { --layout-column-gap: var(--gap-large); column-gap: var(--gap-large); }

/*
 * Echtes Masonry-/Waterfall-artiges Layout. JavaScript berechnet die Row-Spans.
 * Ohne JavaScript bleibt ein normales responsives CSS-Grid als Fallback erhalten.
 */
.masonry {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: var(--masonry-row-height);
	align-items: start;
}

.masonry-item {
	min-width: 0;
	grid-column: span 1;
}

/*
 * Controlled Mosaic Grid:
 * - fünf Breitenstufen im 12-Spalten-Raster,
 * - wenige definierte Kachel-Seitenverhältnisse,
 * - kontrolliertes Cropping nur innerhalb des Mosaic,
 * - optionaler Fokuspunkt über --media-position.
 *
 * Größe und Seitenverhältnis sind bewusst getrennte Eigenschaften. Dadurch kann
 * eine große Portrait-Kachel ebenso vorkommen wie eine kleine Landscape-Kachel.
 */
.mosaic {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
	align-items: start;
	--mosaic-row-unit: 8px;
}

.mosaic-item {
	min-width: 0;
	grid-column: 1 / -1;
	align-self: start;
	--media-position: 50% 50%;
}

.mosaic-ratio--portrait { --mosaic-aspect-ratio: 3 / 4; }
.mosaic-ratio--square { --mosaic-aspect-ratio: 1 / 1; }
.mosaic-ratio--landscape { --mosaic-aspect-ratio: 4 / 3; }
.mosaic-ratio--wide { --mosaic-aspect-ratio: 16 / 9; }

/*
 * `natural` ist ein bewusster Escape Hatch. Für ein dichtes Controlled Mosaic
 * sind portrait/square/landscape/wide vorzuziehen.
 */
.mosaic-ratio--natural {
	--mosaic-aspect-ratio: auto;
}

.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > img,
.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > .media-card__full-link,
.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > .media-card__image-link {
	display: block;
	width: 100%;
	aspect-ratio: var(--mosaic-aspect-ratio);
	overflow: hidden;
}

.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > img,
.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > .media-card__full-link > img,
.mosaic--controlled .mosaic-item:not(.mosaic-ratio--natural) > .media-card__image-link > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-position);
}

.mosaic--controlled .mosaic-ratio--natural img,
.mosaic--controlled .mosaic-ratio--natural .media-card__full-link,
.mosaic--controlled .mosaic-ratio--natural .media-card__image-link {
	display: block;
	width: 100%;
	height: auto;
}

/* Kann ein manuell/controlled gewähltes Verhältnis max_crop oder max_scale
 * nicht einhalten, bleibt das Bild natural statt die Grenze zu verletzen. */
.mosaic--controlled .mosaic-item.mosaic-item--natural-fallback {
	max-width: min(100%, var(--mosaic-max-render-width, 100%));
}
.mosaic--controlled .mosaic-item.mosaic-item--natural-fallback > img,
.mosaic--controlled .mosaic-item.mosaic-item--natural-fallback > .media-card__full-link,
.mosaic--controlled .mosaic-item.mosaic-item--natural-fallback > .media-card__image-link {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	overflow: visible;
}
.mosaic--controlled .mosaic-item.mosaic-item--natural-fallback img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*
 * Kleine Grid-Zeilen werden erst nach Initialisierung durch mosaic.js aktiv.
 * Der Row-Span folgt der tatsächlich gerenderten Kachelhöhe und erzeugt ein
 * dichtes Raster. Ohne JS bleibt ein normales, vollständig nutzbares Grid.
 */
.mosaic.is-enhanced {
	grid-auto-rows: var(--mosaic-row-unit);
}

.mosaic.is-enhanced > .mosaic-item {
	grid-row-end: span var(--mosaic-row-span, 1);
}

/*
 * Justified Rows: Fallback zunächst als einspaltige Liste. Der Layoutmodus
 * entscheidet ausdrücklich über die Bildgeometrie:
 * - natural: Originalformat, kein Crop.
 * - controlled: begrenzter Crop innerhalb max_crop, positioniert per focal_point.
 */
.justified {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 40rem) {
	.masonry--2,
	.masonry--3,
	.masonry--4,
	.masonry--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.masonry-size--2,
	.masonry-size--3,
	.masonry-size--4,
	.masonry-size--5 { grid-column: span 2; }

	.mosaic {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.mosaic > .mosaic-size--1 { grid-column: span 2; }
	.mosaic > .mosaic-size--2 { grid-column: span 3; }
	.mosaic > .mosaic-size--3 { grid-column: span 3; }
	.mosaic > .mosaic-size--4 { grid-column: span 6; }
	.mosaic > .mosaic-size--5 { grid-column: span 6; }
}

@media (min-width: 48rem) {
	.layout-grid-tablet--1 { grid-template-columns: 1fr; }
	.layout-grid-tablet--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layout-grid-tablet--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.layout-grid--1 { grid-template-columns: 1fr; }
	.layout-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layout-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.masonry--3,
	.masonry--4,
	.masonry--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.masonry--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.masonry-size--1 { grid-column: span 1; }
	.masonry-size--2 { grid-column: span 2; }
	.masonry-size--3,
	.masonry-size--4,
	.masonry-size--5 { grid-column: span 3; }

	.mosaic {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	/* Fünf kontrollierte Breitenstufen; das Kachelformat wird separat über ratio gesteuert. */
	.mosaic > .mosaic-size--1 { grid-column: span 3; }
	.mosaic > .mosaic-size--2 { grid-column: span 4; }
	.mosaic > .mosaic-size--3 { grid-column: span 6; }
	.mosaic > .mosaic-size--4 { grid-column: span 8; }
	.mosaic > .mosaic-size--5 { grid-column: span 12; }
}

@media (min-width: 80rem) {
	.masonry--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.masonry--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.masonry--4 .masonry-size--1,
	.masonry--5 .masonry-size--1 { grid-column: span 1; }
	.masonry--4 .masonry-size--2,
	.masonry--5 .masonry-size--2 { grid-column: span 2; }
	.masonry--4 .masonry-size--3,
	.masonry--5 .masonry-size--3 { grid-column: span 3; }
	.masonry--4 .masonry-size--4,
	.masonry--4 .masonry-size--5 { grid-column: span 4; }
	.masonry--5 .masonry-size--4 { grid-column: span 4; }
	.masonry--5 .masonry-size--5 { grid-column: span 5; }
}


/* MHo Portfolio: Spaltenverhältnisse für normale zweispaltige Content-Grids. */
@media (min-width: 64rem) {
	.layout-grid--2.layout-grid-ratio--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.layout-grid--2.layout-grid-ratio--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.layout-grid--2.layout-grid-ratio--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.layout-grid--2.layout-grid-ratio--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Template-Mosaic: Desktop als lückenlose 12-Spalten-Komposition.
 * Ohne JavaScript und auf Mobile bleibt die Darstellung bewusst einspaltig.
 * Auf Tablet kann mosaic.js dasselbe Element als echte Justified Rows ausgeben.
 */
.mosaic--templates { grid-auto-flow: row; }
.mosaic--templates > .mosaic-item { min-width: 0; }
.mosaic--templates:not(.is-template-layout):not(.is-tablet-justified) > .mosaic-item { grid-column: 1 / -1; grid-row: auto; }

.mosaic--templates.is-template-layout {
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: stretch;
}

.mosaic--templates.is-template-layout > .mosaic-item {
	align-self: stretch;
	overflow: hidden;
	aspect-ratio: auto;
}

.mosaic--templates.is-template-layout > .mosaic-item > img,
.mosaic--templates.is-template-layout > .mosaic-item > .media-card__full-link,
.mosaic--templates.is-template-layout > .mosaic-item > .media-card__image-link {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
}

.mosaic--templates.is-template-layout > .mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-position, 50% 50%);
}

/* Tablet-Fallback für das Homepage-Mosaic: echte Justified Rows statt 2-Spalten-Mosaic. */
.mosaic--templates.is-tablet-justified {
	display: block;
}

.mosaic--templates.is-tablet-justified > .mosaic__tablet-row {
	display: flex;
	width: 100%;
	align-items: stretch;
	gap: var(--layout-column-gap);
	margin: 0 0 var(--layout-row-gap);
}

.mosaic--templates.is-tablet-justified > .mosaic__tablet-row:last-child {
	margin-bottom: 0;
}

.mosaic--templates.is-tablet-justified .mosaic-item {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	aspect-ratio: auto;
}

.mosaic--templates.is-tablet-justified .mosaic-item > img,
.mosaic--templates.is-tablet-justified .mosaic-item > .media-card__full-link,
.mosaic--templates.is-tablet-justified .mosaic-item > .media-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
}

.mosaic--templates.is-tablet-justified .mosaic-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Echte Justified Rows: jede vollständige Zeile ist ein eigener Flex-Row-Wrapper. */
.justified.is-enhanced { display: block; }
.justified.is-enhanced > .justified__row { display: flex; width: 100%; align-items: stretch; gap: var(--layout-column-gap); margin: 0 0 var(--layout-row-gap); }
.justified.is-enhanced > .justified__row:last-child { margin-bottom: 0; }
.justified.is-enhanced .justified-item { min-width: 0; margin: 0; overflow: hidden; }
.justified.is-enhanced .justified-item .media-card__full-link,
.justified.is-enhanced .justified-item .media-card__image-link { display: block; width: 100%; height: 100%; overflow: hidden; }
.justified.is-enhanced .justified-item img { display: block; width: 100%; height: 100%; }
.justified--natural.is-enhanced .justified-item img { object-fit: contain; }
.justified--controlled.is-enhanced .justified-item img { object-fit: cover; object-position: var(--media-position, 50% 50%); }
/* Bei einem Natural-Fallback im Controlled-Profil niemals unzulässig croppen. */
.justified--controlled.is-enhanced > .justified__row--fit-natural .justified-item img { object-fit: contain; }

/* Fixe Content-Grids behalten ihre Zellgeometrie. max_scale begrenzt nur die
 * tatsächliche Media-Breite innerhalb dieser Zelle und erfindet keine neuen Spans. */
.layout-grid > .media-card--natural-grid {
	width: min(100%, var(--media-max-render-width, 100%));
	justify-self: start;
}

/* Spezifische Overrides für Template-Mosaic gegenüber den Controlled-Ratio-Regeln. */
.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > img,
.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > .media-card__full-link,
.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > .media-card__image-link {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	overflow: hidden;
}

.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > img,
.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > .media-card__full-link > img,
.mosaic.mosaic--controlled.mosaic--templates.is-template-layout > .mosaic-item:not(.mosaic-ratio--natural) > .media-card__image-link > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-position, 50% 50%);
}


/* Responsiver Galerie-Dispatcher: ein gemeinsamer Kandidatenpool, aber je
 * Containerprofil ein eigener Layoutalgorithmus. Inaktive Items bleiben im DOM,
 * sind jedoch hidden; lazy images werden dadurch nicht in die Scrollstrecke gezogen. */
.responsive-gallery {
	display: grid;
	align-items: start;
}
.responsive-gallery > [hidden] { display: none !important; }

/* Mobile Adaptive: Querformate als ruhige Vollzeile, Portrait/Square paarweise.
 * Der Modus bleibt natural (kein Crop), deshalb sind focal_point/max_crop hier
 * absichtlich ohne geometrische Wirkung. max_scale/max_size begrenzen Prominenz. */
.adaptive-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: row dense;
	align-items: start;
}
.adaptive-gallery > .adaptive-gallery__item {
	min-width: 0;
	margin: 0;
}
.adaptive-gallery > .adaptive-gallery__item--landscape {
	grid-column: 1 / -1;
	width: min(100%, var(--adaptive-max-share, 100%), var(--adaptive-source-max-width, 100%));
	justify-self: center;
}
.adaptive-gallery > .adaptive-gallery__item--compact {
	grid-column: span 1;
	width: min(100%, var(--adaptive-source-max-width, 100%));
	justify-self: center;
}
.adaptive-gallery > .adaptive-gallery__item--single {
	grid-column: 1 / -1;
	width: min(50%, var(--adaptive-source-max-width, 50%));
	justify-self: center;
}
.adaptive-gallery .media-card__full-link,
.adaptive-gallery .media-card__image-link,
.adaptive-gallery img {
	display: block;
	width: 100%;
	height: auto;
}
.adaptive-gallery img { object-fit: contain; }

/*
 * Mosaic V2: container-responsives Editorial-Mosaic.
 * Mobile nutzt eine adaptive Natural-Galerie. Tablet und Desktop erhalten vom
 * JS-Packer eigenständige, nach Containerbreite berechnete Kompositionen.
 */
.mosaic-v2 {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
}

.mosaic-v2__item {
	min-width: 0;
	margin: 0;
	--media-position: 50% 50%;
}

.mosaic-v2__item > img,
.mosaic-v2__item > .media-card__full-link,
.mosaic-v2__item > .media-card__image-link {
	display: block;
	width: 100%;
}

.mosaic-v2__item img {
	display: block;
	width: 100%;
	height: auto;
}

.mosaic-v2.is-layout {
	align-items: stretch;
	grid-auto-flow: row;
}

.mosaic-v2.is-layout > .mosaic-v2__item {
	align-self: stretch;
	overflow: hidden;
}

.mosaic-v2.is-layout > .mosaic-v2__item > img,
.mosaic-v2.is-layout > .mosaic-v2__item > .media-card__full-link,
.mosaic-v2.is-layout > .mosaic-v2__item > .media-card__image-link {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.mosaic-v2.is-layout > .mosaic-v2__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--media-position, 50% 50%);
}