/*
 * Bricks-Elemente „Ordner-Galerie“ und „Ordner-Filter“.
 * Grundwerte stehen in :where(), damit Einstellungen aus Bricks sie immer überschreiben.
 */

/* ------------------------------------------------------------------ */
/* Galerie                                                             */
/* ------------------------------------------------------------------ */

:where(.bmfg) {
	--bmfg-cols: 3;
	--bmfg-gap: 15px;
	--bmfg-ratio: 4 / 3;
	--bmfg-speed: 400ms;
	position: relative;
	width: 100%;
}

@media (max-width: 991px) {
	:where(.bmfg) {
		--bmfg-cols: 2;
	}
}

@media (max-width: 478px) {
	:where(.bmfg) {
		--bmfg-cols: 1;
	}
}

.bmfg-gap-probe {
	position: absolute;
	width: var(--bmfg-gap);
	height: 0;
	visibility: hidden;
	pointer-events: none;
}

.bmfg-items {
	display: grid;
	grid-template-columns: repeat(var(--bmfg-cols), minmax(0, 1fr));
	gap: var(--bmfg-gap);
}

.bmfg-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	transition: opacity var(--bmfg-speed) ease, transform var(--bmfg-speed) ease;
}

.bmfg-item.is-hidden {
	display: none;
}

.bmfg-link {
	display: block;
	overflow: hidden;
	color: inherit;
}

.bmfg-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

/* Masonry: bis das Script gerechnet hat, als Raster anzeigen (kein Aufblitzen). */
.bmfg--masonry.is-laid-out .bmfg-items {
	display: block;
	position: relative;
}

.bmfg--masonry.is-laid-out .bmfg-item {
	position: absolute;
	top: 0;
	left: 0;
}

.bmfg--masonry .bmfg-items {
	transition: height var(--bmfg-speed) ease;
}

.bmfg.is-instant .bmfg-items,
.bmfg.is-instant .bmfg-item {
	transition: none;
}

/* Raster */
.bmfg--grid .bmfg-img {
	aspect-ratio: var(--bmfg-ratio);
	height: 100%;
	object-fit: cover;
}

/* Animation beim Filtern */
.bmfg--anim-fade .bmfg-item.is-entering {
	opacity: 0;
	transition: none;
}

.bmfg--anim-scale .bmfg-item.is-entering {
	opacity: 0;
	transition: none;
}

.bmfg--anim-scale .bmfg-item.is-entering .bmfg-link {
	transform: scale(0.94);
}

.bmfg--anim-scale .bmfg-link {
	transition: transform var(--bmfg-speed) ease;
}

.bmfg--anim-none .bmfg-item {
	transition: none;
}

/* Hover-Effekte */
.bmfg--hover-zoom .bmfg-item:hover .bmfg-img,
.bmfg--hover-zoom-lift .bmfg-item:hover .bmfg-img {
	transform: scale(1.035);
}

.bmfg--hover-brighten .bmfg-item:hover .bmfg-img,
.bmfg--hover-zoom-lift .bmfg-item:hover .bmfg-img {
	filter: brightness(1.08);
}

.bmfg--hover-grayscale .bmfg-img {
	filter: grayscale(1);
}

.bmfg--hover-grayscale .bmfg-item:hover .bmfg-img {
	filter: none;
}

/* Bildunterschrift */
:where(.bmfg-caption) {
	margin: 0;
	padding: 10px 2px 0;
	font-size: 0.8em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

.bmfg--caption-overlay .bmfg-caption,
.bmfg--caption-overlay-hover .bmfg-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

:where(.bmfg--caption-overlay, .bmfg--caption-overlay-hover) .bmfg-caption {
	padding: 30px 14px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	color: #fff;
	opacity: 1;
}

.bmfg--caption-overlay-hover .bmfg-caption {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.bmfg--caption-overlay-hover .bmfg-item:hover .bmfg-caption,
.bmfg--caption-overlay-hover .bmfg-item:focus-within .bmfg-caption {
	opacity: 1;
	transform: none;
}

/* Mehr laden */
.bmfg-more-wrap {
	display: flex;
	justify-content: center;
}

:where(.bmfg-more-wrap) {
	margin-top: 30px;
}

.bmfg-more-wrap[hidden] {
	display: none;
}

:where(.bmfg-more) {
	padding: 0.7em 1.8em;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

:where(.bmfg-more):hover {
	opacity: 0.8;
}

/* ------------------------------------------------------------------ */
/* Filter                                                              */
/* ------------------------------------------------------------------ */

:where(.bmff) {
	--bmff-top: 0px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bmff--sticky {
	position: sticky;
	top: var(--bmff-top);
	z-index: 20;
}

:where(.bmff--sticky) {
	padding-block: 12px;
}

:where(.bmff-btn) {
	padding: 0.6em 1.3em;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: 0.08em;
	line-height: 1.2;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.bmff-btn[hidden] {
	display: none !important;
}

:where(.bmff-btn):hover,
:where(.bmff-btn):focus-visible {
	opacity: 1;
}

:where(.bmff-btn.is-active) {
	border-color: currentColor;
	opacity: 1;
}

:where(.bmff-count) {
	font-size: 0.8em;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.bmfg-item,
	.bmfg-items,
	.bmfg-img,
	.bmfg-link {
		transition: none !important;
	}
}