/*
 * Seite "Galerie": Kopfbereich mit Text und Bild, darunter Reihen mit je drei Bildern und große Bilder.
 * Abschnitte, Spaltenbreiten und Textstile kommen aus base.css (kd-section, kd-section__inner, kd-text, kd-prose,
 * kd-bg-*). Hier steht nur, was diese Seite anders macht. Maße am Original gemessen.
 * Haltepunkte des Originals: 1441, 1281 (Abschnittsbreite, Schriftgröße), 811 (zwei Spalten), 800 (Kopfbereich
 * untereinander), 531 (eine Spalte).
 */

/* ------------------------------------------------------------------ Kopfbereich */
/* Mindesthöhe: Fensterhöhe abzüglich Seitenkopf. scripts/galerie.js trägt die echte Höhe des Kopfes ein. */
.kd-gal-kopf {
	--gal-kopf-hoehe: 144px;
	--kd-text: var(--kd-white);
	display: flex;
	flex-direction: row;
	min-height: calc(100vh - var(--gal-kopf-hoehe));
}

.kd-gal-kopf__text {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	width: 50%;
}
.kd-gal-kopf__box {
	box-sizing: border-box;
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	padding: 60px;
}

/* Pfeil nach unten, am unteren Rand der Textspalte */
.kd-gal-kopf__pfeil {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	padding: 0 60px;
}
.kd-gal-kopf__pfeil a {
	display: inline-block;
	margin-left: -25px;
	color: var(--kd-white);
}
.kd-gal-kopf__pfeil a:hover { color: #dcdcdc; }
.kd-gal-kopf__pfeil a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}
.kd-gal-kopf__pfeil span {
	display: flex;
	padding: 17px 20px;
}

.kd-gal-kopf__bild {
	position: relative;
	display: block;
	flex-grow: 1;
	width: 50%;
	overflow: hidden;
}
.kd-gal-kopf__bild img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 800px) {
	/* Bild oben, Text darunter */
	.kd-gal-kopf {
		flex-direction: column-reverse;
		justify-content: flex-end;
	}
	.kd-gal-kopf__text {
		flex: 0 1 auto;
		align-items: stretch;
		width: auto;
	}
	.kd-gal-kopf__box {
		max-width: 100%;
		padding: 0 20px 60px;
	}
	.kd-gal-kopf__pfeil { text-align: center; }
	.kd-gal-kopf__pfeil a { margin-left: 0; }
	.kd-gal-kopf__bild {
		width: 100%;
		min-height: 100vw;
		margin-bottom: 20px;
	}
}

/* ------------------------------------------------------------------ Reihen mit Bildern */
/* Drei Felder pro Reihe, 30 px Abstand zwischen den Feldern und nach unten. Die Liste reicht
   15 px nach links und rechts über den Textrand hinaus, damit die Bilder bündig mit dem Rand abschließen. */
.kd-gal-liste {
	display: flex;
	flex-wrap: wrap;
	margin: 20px -15px -10px;
	list-style: none;
}
.kd-gal-feld {
	box-sizing: border-box;
	flex: 0 0 calc(100% / 3);
	padding: 0 15px 30px;
}
.kd-gal-feld--zwei { flex-basis: 50%; }

.kd-gal-kachel {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.kd-gal-kachel img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 811px) {
	.kd-gal-feld { flex-basis: 50%; }
}
@media (max-width: 531px) {
	.kd-gal-feld,
	.kd-gal-feld--zwei { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ Großes Bild */
/* Mindestens so hoch wie das Fenster, das Bild füllt die ganze Fläche */
.kd-gal-gross {
	min-height: 100vh;
	overflow: hidden;
}
.kd-gal-gross img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}