/* Galerie ab 2.3.0 (ergänzt das Theme, kein Theme-Update nötig):
   „Alle Fotos ansehen“ klappt Kacheln mit Bildunterschriften auf, Großansicht mit Beschriftung,
   am Handy Pfeile seitlich auf Bildhöhe (nicht unten an Safaris Leiste). */
.bs-galgrid { margin-top: 8px; }
/* Die kleine Galerie bleibt immer stehen. Aufgeklappt kommen unter ihr die weiteren Fotos (ab dem sechsten). */
.bs-galgrid[hidden] { display: none; }

/* Blöcke aus Feldern in einem Raster von 4 × 2 Zellen. Gerundet ist nur die Außenseite des ganzen Blocks
   (wie bei der kleinen Galerie), zwischen angrenzenden Fotos gibt es keine Rundung. */
.bs-galgrid__block {
	container-type: inline-size;
	list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: calc((100cqw - 24px) / 4 * .9);
	overflow: hidden; border-radius: 0 var(--bs-leaf-xl) 0 var(--bs-leaf-xl);
}
.bs-galgrid__block--flip { border-radius: var(--bs-leaf-xl) 0 var(--bs-leaf-xl) 0; }
.bs-galgrid__block--rest { border-radius: 0; }
.bs-galgrid__item { margin: 0; min-width: 0; min-height: 0; }
.bs-galgrid__link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--bs-greige); color: var(--bs-aubergine); text-decoration: none; }
.bs-galgrid__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s ease; }
.bs-galgrid__link:hover img { transform: scale(1.03); }
.bs-galgrid__link:focus-visible { outline: 2px solid var(--bs-mustard); outline-offset: -4px; }

/* Rest am Ende (1 bis 3 Fotos): Felder etwas breiter, damit die Reihe nicht leer wirkt */
.bs-galgrid__block--rest > :only-child, .bs-galgrid__block--rest > :first-child:nth-last-child(2), .bs-galgrid__block--rest > :first-child:nth-last-child(2) + *, .bs-galgrid__block--rest > :first-child:nth-last-child(3) { grid-column: span 2; }
/* Muster 1: großes Feld links, vier kleine rechts */
.bs-galgrid__block--t1 > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bs-galgrid__block--t1.bs-galgrid__block--flip > :nth-child(1) { grid-column: 3 / span 2; }
.bs-galgrid__block--t1.bs-galgrid__block--flip > :nth-child(n+2) { order: -1; }
/* Muster 2: hohes Feld, großes Feld, zwei kleine übereinander */
.bs-galgrid__block--t2 > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.bs-galgrid__block--t2 > :nth-child(2) { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.bs-galgrid__block--t2 > :nth-child(3) { grid-column: 4; grid-row: 1; }
.bs-galgrid__block--t2 > :nth-child(4) { grid-column: 4; grid-row: 2; }
.bs-galgrid__block--t2.bs-galgrid__block--flip > :nth-child(1) { grid-column: 4; }
.bs-galgrid__block--t2.bs-galgrid__block--flip > :nth-child(2) { grid-column: 2 / span 2; }
.bs-galgrid__block--t2.bs-galgrid__block--flip > :nth-child(3) { grid-column: 1; }
.bs-galgrid__block--t2.bs-galgrid__block--flip > :nth-child(4) { grid-column: 1; }
/* Muster 3: Streifen mit zwei breiten Feldern und vier kleinen */
.bs-galgrid__block--t3 > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.bs-galgrid__block--t3 > :nth-child(2) { grid-column: 3; grid-row: 1; }
.bs-galgrid__block--t3 > :nth-child(3) { grid-column: 4; grid-row: 1; }
.bs-galgrid__block--t3 > :nth-child(4) { grid-column: 1; grid-row: 2; }
.bs-galgrid__block--t3 > :nth-child(5) { grid-column: 2; grid-row: 2; }
.bs-galgrid__block--t3 > :nth-child(6) { grid-column: 3 / span 2; grid-row: 2; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(1) { grid-column: 3 / span 2; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(2) { grid-column: 1; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(3) { grid-column: 2; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(4) { grid-column: 3; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(5) { grid-column: 4; }
.bs-galgrid__block--t3.bs-galgrid__block--flip > :nth-child(6) { grid-column: 1 / span 2; }

/* Beschriftung: helles, halbtransparentes Feld unten im Foto. Erscheint bei Maus darüber oder Tastaturfokus,
   am Handy, sobald das Foto beim Scrollen in die Mitte kommt (Klasse is-seen aus frontend.js).
   Für Screenreader ist sie immer vorhanden. */
.bs-galgrid__cap {
	position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 1;
	padding: 8px 12px; background: rgba(254, 253, 250, .88); color: var(--bs-aubergine);
	font-size: .9375rem; line-height: 1.35;
	opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.bs-galgrid__link:hover .bs-galgrid__cap, .bs-galgrid__link:focus-visible .bs-galgrid__cap, .bs-galgrid__item.is-seen .bs-galgrid__cap { opacity: 1; transform: none; }
.bs-galgrid__less { margin: clamp(20px, 2.5vw, 32px) 0 0; text-align: center; }
@media (max-width: 760px) {
	/* Handy: Raster entfällt. Große und breite Fotos über die volle Breite, hohe und kleine zu zweit. */
	.bs-galgrid__block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; margin-bottom: 6px; border-radius: 0 var(--bs-leaf-l) 0 var(--bs-leaf-l); }
	.bs-galgrid__block--flip { border-radius: var(--bs-leaf-l) 0 var(--bs-leaf-l) 0; }
	.bs-galgrid__block > .bs-galgrid__item { grid-column: auto !important; grid-row: auto !important; order: 0 !important; min-height: 44vw; }
	.bs-galgrid__block > .bs-galgrid__item--big, .bs-galgrid__block > .bs-galgrid__item--wide { grid-column: 1 / -1 !important; min-height: 66vw; }
	.bs-galgrid__block > .bs-galgrid__item--tall { min-height: 62vw; }
	.bs-galgrid__block { grid-auto-flow: dense; }
	/* kein halbleeres Feld am Ende */
	.bs-galgrid__block--t2 > .bs-galgrid__item:nth-child(4), .bs-galgrid__block--rest > .bs-galgrid__item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
	.bs-galgrid__cap { left: 4px; right: 4px; bottom: 4px; padding: 4px 8px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-galgrid__link img, .bs-galgrid__cap { transition: none; }
	.bs-galgrid__link:hover img { transform: none; }
}

/* Großansicht */
.bs-lightbox { height: 100vh; height: 100dvh; }
.bs-lightbox__fig img { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
.bs-lightbox__fig figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 60ch; }
.bs-lightbox__cap { color: var(--bs-offwhite); font-size: 1rem; line-height: 1.4; }
.bs-lightbox__cap:empty { display: none; }
.bs-lightbox__num { color: var(--bs-lavender); }
@media (max-width: 600px) {
	.bs-lightbox__fig { padding: 72px 8px 48px; }
	.bs-lightbox__fig img { max-height: calc(100dvh - 180px); }
	.bs-lightbox__prev, .bs-lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(254, 253, 250, .85); }
	.bs-lightbox__prev { left: 8px; }
	.bs-lightbox__next { right: 8px; }
}