/* ═══ Baustein Bildergalerie ════════════════════════════════
   Ein Seitenverhaeltnis, 4 zu 3, fuer jedes Bild. Drei Spalten ab
   980 Pixeln, zwei darunter, eine unter 560. Zwei Pixel Fuge,
   sonst nichts: keine Rundung, kein Rahmen, kein Schatten.

   Die Vorgaengerfassung hatte fuenf Kachelgroessen und liess bei
   acht Bildern eine halbe Zeile leer. Ein Raster, das bei jeder
   Anzahl aufgeht, ist hier mehr wert als ein Mosaik, das von der
   Bildanzahl abhaengt.
   ═══════════════════════════════════════════════════════════ */


/* Die Spaltenzahl kommt aus dem Baustein, siehe render.php: sie
   richtet sich nach der Bildanzahl, damit die letzte Zeile aufgeht. */
.galerie__raster {
	display: grid;
	grid-template-columns: repeat(var(--galerie-spalten, 3), minmax(0, 1fr));
	gap: 2px;
}
/* Ohne Ueberschrift steht das Raster direkt unter dem Seitenkopf.
   Dann sind die 46 Pixel ein zweiter Abstand hinter dem ersten. */
.galerie__raster:first-child { margin-top: 0; }

/* Ein Knopf, kein Verweis: das Ziel ist kein Dokument, sondern
   eine Ansicht auf derselben Seite. Der Zuruecksetzer ist noetig,
   weil ein button sonst Rahmen, Polster und Systemschrift erbt. */
.galerie__feld {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 0;
	border: 0;
	background: var(--pa2);
	cursor: zoom-in;
	appearance: none;
	aspect-ratio: 4 / 3;
}
.galerie__feld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s var(--e);
}
.galerie__feld:hover img,
.galerie__feld:focus-visible img { transform: scale(1.04); }

.galerie__feld:focus-visible {
	outline: 2px solid var(--tx);
	outline-offset: -4px;
}

/* ── Vollbildansicht ────────────────────────────────────────
   Eigener Code, rund fuenfzig Zeilen. Eine Bibliothek dafuer
   waegt mehr als die Schrift der ganzen Seite.
   ───────────────────────────────────────────────────────── */
.lupe {
	position: fixed;
	inset: 0;
	z-index: var(--z-lupe);
	display: none;
	align-items: center;
	justify-content: center;
	/* .94 liess die Kopfleiste durchscheinen, und dann liest man im
	   Vollbild die Navigation mit. .985 ist noch kein Schwarz, aber
	   dahinter ist nichts mehr zu erkennen. */
	background: rgba(12, 13, 16, .985);
	padding: clamp(var(--s2), 3vw, var(--s6));
	padding-bottom: calc(clamp(var(--s2), 3vw, var(--s6)) + var(--sicher-unten));
}
.lupe[data-offen="true"] { display: flex; }

.lupe__bild {
	max-width: min(100%, 1600px);
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.lupe__fuss {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(14px + var(--sicher-unten));
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--s3);
	padding-inline: clamp(14px, 3vw, 44px);
	color: rgba(243, 241, 237, .72);
	font-size: var(--t-klein);
	text-align: center;
	pointer-events: none;
}
.lupe__zahl { font-variant-numeric: tabular-nums; }

/* Alle drei Knoepfe tragen dieselbe Tastflaeche. Auf dem Handy
   liegen Vor und Zurueck am unteren Rand, dort wo der Daumen ist,
   nicht auf halber Hoehe am Bildrand. */
.lupe button {
	position: absolute;
	width: var(--tippflaeche);
	height: var(--tippflaeche);
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--we);
	cursor: pointer;
	appearance: none;
}
.lupe button:focus-visible {
	outline: 2px solid var(--we);
	outline-offset: 2px;
}
.lupe button svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.lupe__zu { top: clamp(8px, 1.6vw, 22px); right: clamp(8px, 1.6vw, 22px); }
.lupe__vor { top: 50%; right: clamp(4px, 1.4vw, 20px); transform: translateY(-50%); }
.lupe__zurueck { top: 50%; left: clamp(4px, 1.4vw, 20px); transform: translateY(-50%); }
/* Derselbe Pfeil, gespiegelt. Zwei Symbole fuer eine Richtung
   waeren zwei Dateien fuer denselben Gedanken. Die Spiegelung
   sitzt am Symbol, nicht am Knopf: sonst kollidiert sie mit der
   Verschiebung, die der Knopf am Handy verliert. */
.lupe__zurueck svg { transform: scaleX(-1); }

@media (max-width: 700px) {
	/* Vor und Zurueck wandern an den unteren Rand, dorthin, wo der
	   Daumen ist. Die Beschriftung rueckt darueber, sonst laege sie
	   unter den beiden Pfeilen. */
	.lupe__vor,
	.lupe__zurueck {
		top: auto;
		bottom: calc(10px + var(--sicher-unten));
		transform: none;
	}
	.lupe__zurueck { left: clamp(8px, 4vw, 24px); }
	.lupe__vor { right: clamp(8px, 4vw, 24px); }

	.lupe__fuss {
		bottom: calc(var(--s7) + var(--sicher-unten));
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
	.lupe { padding-bottom: calc(var(--s7) + var(--sicher-unten)); }
}

@media (prefers-reduced-motion: reduce) {
	.galerie__feld img { transition: none; }
	.galerie__feld:hover img,
	.galerie__feld:focus-visible img { transform: none; }
}

@media (max-width: 980px) {
	.galerie__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Zwei Spalten und eine ungerade Zahl: die letzte nimmt beide,
	   als 2:1, damit sie unter 560 Pixeln bleibt (Phase 2). Sonst
	   blieb rechts unten eine Zelle leer, auf /haus/ und
	   /haus/impressionen/ bei 768. */
	.galerie__raster > .galerie__feld:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		aspect-ratio: 2 / 1;
	}
}

@media (max-width: 560px) {
	.galerie__raster { grid-template-columns: minmax(0, 1fr); }
}