/* MS Galerien – Frontend
 * Farben nach brand/visual-guidelines.md. Alles über CSS-Variablen überschreibbar, z. B. im Elementor-Kit:
 * .ms-galerie { --msg-scroll-offset: 160px; }
 * Ohne Angabe misst galerie.js Sticky-Header + Admin-Leiste und setzt --msg-scroll-auto.
 */

.ms-galerie {
	--msg-text: #a39a93;         /* Text gedämpft */
	--msg-aktiv: #b59e90;        /* Akzent */
	--msg-hover: #ffffff;
	--msg-linie: #7f543a;        /* Akzent Deko, nur Linie */
	--msg-flaeche: #2e2c2b;      /* Fläche, Platzhalter vor dem Laden */
	--msg-dauer: 0.5s;
	--_offset: var(--msg-scroll-offset, calc(var(--msg-scroll-auto, 110px) + 24px));
	position: relative;
	scroll-margin-top: var(--_offset);
}

.ms-galerie-anker {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	scroll-margin-top: var(--_offset);
}

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

.ms-galerie-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	margin: 0 0 clamp(24px, 4vw, 48px);
	padding: 0;
}

.ms-galerie .ms-galerie-btn {
	position: relative;
	margin: 0;
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--msg-text);
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s ease;
}
.ms-galerie .ms-galerie-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 1px;
	background: var(--msg-linie);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ms-galerie .ms-galerie-btn:hover,
.ms-galerie .ms-galerie-btn:focus { background: none; color: var(--msg-hover); }
.ms-galerie .ms-galerie-btn[aria-pressed="true"] { color: var(--msg-aktiv); }
.ms-galerie .ms-galerie-btn[aria-pressed="true"]::after { transform: scaleX(1); background: var(--msg-aktiv); }
.ms-galerie .ms-galerie-btn:focus-visible { outline: 1px solid var(--msg-aktiv); outline-offset: 4px; }

@media (max-width: 767px) {
	.ms-galerie-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 24px;
		margin-inline: -16px;
		padding-inline: 16px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
		        mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
	}
	.ms-galerie-filter::-webkit-scrollbar { display: none; }
	.ms-galerie .ms-galerie-btn { flex: 0 0 auto; }
}

/* ---------- Raster-Grundlage ---------- */

.ms-galerie-grid {
	--_sp: var(--msg-spalten);
	display: grid;
	grid-template-columns: repeat(var(--_sp), minmax(0, 1fr));
	gap: var(--msg-abstand);
	align-items: start;
}
@media (max-width: 1024px) { .ms-galerie-grid { --_sp: var(--msg-spalten-t); } }
@media (max-width: 767px)  { .ms-galerie-grid { --_sp: var(--msg-spalten-m); } }

/* Der Rahmen (figure) bestimmt das Format, das Bild füllt ihn absolut aus.
   So können Theme-/Elementor-Regeln wie img { height: auto } die Höhe nicht verfälschen. */
.ms-galerie-item {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--msg-flaeche);
	aspect-ratio: var(--msg-r);
}
.ms-galerie-item[hidden] { display: none !important; }

.ms-galerie-item a {
	position: absolute;
	inset: 0;
	display: block;
	outline-offset: -2px;
}
.ms-galerie-item a:focus-visible { outline: 2px solid var(--msg-aktiv); }

.ms-galerie .ms-galerie-item .ms-galerie-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.ms-galerie-item a:hover .ms-galerie-img { transform: scale(1.03); }

/* Raster: gleiches Format für alle Bilder. */
.ms-galerie[data-layout="raster"] .ms-galerie-item { aspect-ratio: var(--msg-format); }

/* Masonry: JS setzt die Zeilenspanne je Bild (Reihenfolge bleibt links → rechts). */
.ms-galerie[data-layout="masonry"] .ms-galerie-grid.is-masonry {
	grid-auto-rows: 4px;
	align-items: stretch;
}
.ms-galerie[data-layout="masonry"] .ms-galerie-grid.is-masonry .ms-galerie-item { aspect-ratio: auto; }

/* Zeilen: Bilder füllen jede Zeile, Höhe einheitlich (wie Bildband). */
.ms-galerie[data-layout="zeilen"] .ms-galerie-grid {
	display: flex;
	flex-wrap: wrap;
}
.ms-galerie[data-layout="zeilen"] .ms-galerie-grid::after {
	content: "";
	flex-grow: 1000000;
}
.ms-galerie[data-layout="zeilen"] .ms-galerie-item {
	flex: var(--msg-r) 1 calc(var(--msg-r) * var(--msg-zeile));
}
@media (max-width: 767px) {
	.ms-galerie[data-layout="zeilen"] .ms-galerie-item { flex-basis: calc(var(--msg-r) * var(--msg-zeile) * 0.55); }
}

/* Einblenden nach dem Filtern */
.ms-galerie-item.is-neu { animation: msg-ein var(--msg-dauer) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes msg-ein {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ms-galerie-item.is-neu { animation: none; }
	.ms-galerie .ms-galerie-img,
	.ms-galerie .ms-galerie-btn::after { transition: none; }
	.ms-galerie-item a:hover .ms-galerie-img { transform: none; }
}

.ms-galerie-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ms-galerie-hinweis {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	opacity: 0.7;
	font-size: 14px;
}