/* =========================================================================
   Referenzen: Einzelseite, Archiv und die Archive fuer Ort, Objekttyp, Material.
   Laedt nur dort (inc/referenzen.php), nach theme.css, und ueberschreibt dessen
   Referenz-Regeln (theme.css ab .schlenz-referenz / .schlenz-referenzen).
   Stand 14.09.2026, Phase 4.

   Aufbau der Einzelseite ab 1024 px:
     Lead-Text und „Das Objekt im Ueberblick“ links, erstes Galeriebild rechts in
     genau der Hoehe des Textblocks; darunter Eyebrow „Das Objekt“ und der Ort als
     H2, dann das Mosaik aus den uebrigen Bildern (jedes dritte breit), zum Schluss
     „Was an diesem Objekt besonders war“ als Pull-Quote.
   Unter 1024 px steht alles untereinander, das Mosaik bleibt zweispaltig.
   Bildformat im Mosaik: durchgehend 3:2, weil die Fotos der Altseite alle 3:2
   sind (1024 x 683) und so ohne Beschnitt gezeigt werden.
   ========================================================================= */

/* ---------- Einzelseite: Grundmasse ---------- */
.schlenz-referenz .wp-block-post-content {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: 0;
	font-size: 1.125rem;
	line-height: 1.7;
}
.schlenz-referenz .wp-block-post-content > p:first-child {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem);
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-top: 0;
	margin-bottom: 1.25rem;
}
.schlenz-referenz .wp-block-post-content > p {
	max-width: 40rem;
}

/* Ueberschrift ueber der Faktenliste: klein, Versalien, wie ein Eyebrow */
.schlenz-referenz .wp-block-post-content > h2 {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--s-nebel);
	margin-top: 3rem;
	margin-bottom: 1rem;
}

/* ---------- „Das Objekt im Ueberblick“ als Definitionsliste ----------
   Aus der Liste „Begriff: Wert“ macht inc/referenzen.php dl > div > dt + dd.
   Begriff in der Optik des Faktenbands, Wert in Groesse „unter“, Linien dazwischen.
   Subgrid richtet die Begriffe ueber alle Zeilen buendig aus; ohne Subgrid
   stehen Begriff und Wert untereinander, das ist der bewusste Rueckfall. */
.schlenz-referenz .schlenz-objekt {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--s-linie);
}
.schlenz-referenz .schlenz-objekt > div {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	column-gap: 1.5rem;
	align-items: baseline;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--s-linie);
}
.schlenz-referenz .schlenz-objekt dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--s-nebel);
	line-height: 1.4;
}
.schlenz-referenz .schlenz-objekt dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--unter);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}
/* Falls die Liste doch als ul ankommt (Zeile ohne Doppelpunkt): Linien statt Punkte */
.schlenz-referenz .wp-block-post-content > h2 + ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid var(--s-linie);
}
.schlenz-referenz .wp-block-post-content > h2 + ul li {
	margin: 0;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--s-linie);
	font-size: var(--wp--preset--font-size--unter);
	font-weight: 500;
	line-height: 1.35;
}

/* ---------- Kopf der Bildstrecke: Eyebrow „Das Objekt“ und Ort als H2 ---------- */
.schlenz-referenz .wp-block-post-content > .schlenz-referenz__eyebrow {
	margin: var(--wp--preset--spacing--60) 0 0.35rem !important;
	max-width: none;
	font-size: 0.75rem;
	line-height: 1.4;
}
.schlenz-referenz .wp-block-post-content > h2.schlenz-referenz__ort {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: none;
	color: var(--s-tinte);
	margin: 0 0 0.25rem;
}

/* ---------- Mosaik ----------
   Zwei Spalten, jedes dritte Bild (1, 4, 7 ...) ueber beide; alle Kacheln 3:2. */
.schlenz-referenz .wp-block-post-content > .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 1.25rem 0 0 !important;
	max-width: none;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	overflow: hidden;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+1) {
	grid-column: 1 / -1;
}
/* Ein einzelnes Bild in der letzten Reihe fuellt die Reihe */
.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+2):last-child {
	grid-column: 1 / -1;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery a {
	display: block;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	transition: transform 0.7s ease;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+1) img {
	aspect-ratio: 3 / 2;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery figure:hover img,
.schlenz-referenz .wp-block-post-content > .wp-block-gallery figure:focus-within img {
	transform: scale(1.03);
}

/* Einzelnes Bild als eigener Bildblock (ohne Galerie): gleiche Kachel wie im Mosaik */
.schlenz-referenz .wp-block-post-content > figure.wp-block-image {
	margin: 1.25rem 0 0 !important;
	overflow: hidden;
}
.schlenz-referenz .wp-block-post-content > figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* ---------- „Was an diesem Objekt besonders war“ als Pull-Quote ---------- */
.schlenz-referenz .wp-block-post-content > .wp-block-gallery ~ h2,
.schlenz-referenz .wp-block-post-content > figure.wp-block-image ~ h2 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 1.25rem;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery ~ p,
.schlenz-referenz .wp-block-post-content > figure.wp-block-image ~ p {
	max-width: 42rem;
	margin: 0;
	padding: 0.25rem 0 0.25rem 1.75rem;
	border-left: 3px solid var(--s-licht);
	font-family: 'Instrument Sans', sans-serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.7rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--s-tinte);
	text-wrap: pretty;
}
.schlenz-referenz .wp-block-post-content > .wp-block-gallery ~ p + p,
.schlenz-referenz .wp-block-post-content > figure.wp-block-image ~ p + p {
	margin-top: 1.25rem;
}

/* ---------- Schlusssatz vor „Weitere Referenzen“ (Template) ---------- */
.schlenz-referenz__schluss {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 2rem;
	padding-bottom: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--s-linie);
}
.schlenz-referenz__schluss p {
	margin: 0;
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
}
.schlenz-referenz__schluss a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--s-nebel);
	white-space: nowrap;
}
.schlenz-referenz__schluss a:hover,
.schlenz-referenz__schluss a:focus-visible {
	text-decoration-color: var(--s-nacht);
}

/* ---------- Ab 1024 px: Text links, erstes Bild rechts, Mosaik darunter ----------
   Gilt fuer Galerien (Regelfall) und fuer ein einzelnes Bild als eigener Bildblock
   (Lauf, Leutenbach): dann steht dieses Bild neben dem Text und der Kopf der
   Bildstrecke entfaellt. */
@media (min-width: 1024px) {
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure),
	.schlenz-referenz .wp-block-post-content:has(> figure.wp-block-image) {
		--schlenz-bildreihen: 4;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.25rem;
		row-gap: 0;
		align-items: start;
	}
	/* Zahl der Absaetze vor der Faktenliste bestimmt, wie viele Reihen das Bild ueberspannt */
	.schlenz-referenz .wp-block-post-content:has(> p:first-child + p + h2 + :is(.schlenz-objekt, ul)) {
		--schlenz-bildreihen: 5;
	}
	.schlenz-referenz .wp-block-post-content:has(> p:first-child + p + p + h2 + :is(.schlenz-objekt, ul)) {
		--schlenz-bildreihen: 6;
	}
	.schlenz-referenz .wp-block-post-content:has(> p:first-child + p + p + p + h2 + :is(.schlenz-objekt, ul)) {
		--schlenz-bildreihen: 7;
	}
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > *,
	.schlenz-referenz .wp-block-post-content:has(> figure.wp-block-image) > * {
		grid-column: 1;
		min-width: 0;
	}
	/* Textspalte haelt Abstand zum Bild rechts (Rand statt Innenabstand, damit die Linien
	   der Faktenliste buendig enden); die Fuge des Mosaiks bleibt schmal */
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > :is(p, h2, h3, ul, ol, .schlenz-objekt),
	.schlenz-referenz .wp-block-post-content:has(> figure.wp-block-image) > :is(p, h2, h3, ul, ol, .schlenz-objekt) {
		margin-right: clamp(2.5rem, 5vw, 5rem);
	}
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > .wp-block-gallery {
		display: contents;
	}
	/* Erstes Bild rechts: so hoch wie Lead, Ueberschrift und Faktenliste zusammen.
	   Das img liegt absolut im figure und bringt keine eigene Hoehe mit, deshalb
	   bestimmt allein der Text die Hoehe der Reihen und es bleibt kein Loch. Bei sehr
	   langem Text endet das Bild bei 52rem und klebt beim Scrollen. */
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:first-child,
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > figure.wp-block-image:first-of-type {
		/* !important gegen die Core-Regel mit ID-Gewicht (:not(#individual-image)), die display:flex und align-self:inherit setzt */
		display: block !important;
		grid-column: 2;
		grid-row: 1 / var(--schlenz-bildreihen, 4);
		align-self: stretch !important;
		position: sticky;
		top: 6rem;
		max-height: 52rem;
		margin: 0 !important;
		overflow: hidden;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:first-child a,
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > figure.wp-block-image:first-of-type a {
		position: relative;
		display: block;
		height: 100%;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:first-child img,
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > figure.wp-block-image:first-of-type img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
	/* Kopf der Bildstrecke und Mosaik ueber die volle Breite */
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > .schlenz-referenz__eyebrow,
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > .schlenz-referenz__ort,
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > h2:has(+ .wp-block-gallery),
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure) > .wp-block-gallery ~ *,
	.schlenz-referenz .wp-block-post-content:has(> figure.wp-block-image) > figure.wp-block-image ~ * {
		grid-column: 1 / -1;
		margin-right: 0;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:not(:first-child) {
		grid-column: auto;
		margin-top: 1.25rem !important;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+1):not(:first-child),
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+2):last-child:not(:first-child) {
		grid-column: 1 / -1;
	}
	/* Nur ein Bild: es steht neben dem Text, der Kopf der Bildstrecke entfaellt */
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure:only-child) > .schlenz-referenz__eyebrow,
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure:only-child) > .schlenz-referenz__ort,
	.schlenz-referenz .wp-block-post-content:has(> .wp-block-gallery > figure:only-child) > h2:has(+ .wp-block-gallery),
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > .schlenz-referenz__eyebrow,
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > .schlenz-referenz__ort,
	.schlenz-referenz .wp-block-post-content:not(:has(> .wp-block-gallery)) > h2:has(+ figure.wp-block-image) {
		display: none;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery ~ h2,
	.schlenz-referenz .wp-block-post-content > figure.wp-block-image ~ h2 {
		margin-top: var(--wp--preset--spacing--60);
	}
}

/* ---------- Unter 782 px: Mosaik bleibt zweispaltig, jedes dritte Bild breit ---------- */
@media (max-width: 781px) {
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery {
		gap: 0.75rem;
	}
}
@media (max-width: 600px) {
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+1),
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+2):last-child {
		grid-column: 1 / -1;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery > figure.wp-block-image:nth-child(3n+1) img {
		aspect-ratio: 3 / 2;
	}
	/* Faktenliste: Begriff ueber dem Wert, die Zeile ist zu schmal fuer zwei Spalten */
	.schlenz-referenz .schlenz-objekt {
		display: block;
	}
	.schlenz-referenz .schlenz-objekt > div {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.2rem;
		padding: 0.8rem 0;
	}
	.schlenz-referenz .wp-block-post-content > .wp-block-gallery ~ p {
		padding-left: 1.25rem;
	}
}

/* =========================================================================
   Archiv und Ort-, Typ-, Material-Archive
   ========================================================================= */

/* Titel-Hover leiser: duenne Linie mit Abstand statt Unterstrich in Schriftstaerke */
.schlenz-referenzen .wp-block-post-title a {
	text-decoration: none;
}
.schlenz-referenzen .wp-block-post-title a:hover,
.schlenz-referenzen .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--s-nebel);
}

/* Filter nach Ort: kleine Versalien mit Linie darunter statt Kaestchen */
.filter-orte.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.75rem;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: 0.25rem;
	border-top: 1px solid var(--s-linie);
}
.filter-orte a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	font-size: 0.72rem !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--s-nebel);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.filter-orte a:hover,
.filter-orte a:focus-visible {
	color: var(--s-tinte);
	border-color: var(--s-nacht);
}
.filter-orte a:focus-visible {
	outline-offset: 4px;
}
/* Schmal: eine Zeile zum Wischen, wie bisher (Raender und Scrollbalken regelt theme.css) */
@media (max-width: 781px) {
	.filter-orte.wp-block-tag-cloud {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0 1.5rem;
		border-top: 0;
		padding-top: 0;
	}
}

/* Archiv-Kopf der Ort-, Typ- und Material-Seiten: Eyebrow, Titel, Vorspann */
.schlenz-archiv__kopf .schlenz-archiv__vorspann a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--s-nebel);
}
.schlenz-archiv__kopf .schlenz-archiv__vorspann a:hover,
.schlenz-archiv__kopf .schlenz-archiv__vorspann a:focus-visible {
	text-decoration-color: var(--s-nacht);
}