.bildergallerie {
	max-width: 900px;
	margin: 20px auto;
	padding: 0 16px;
	box-sizing: border-box;
	font-family: var(--svr-schrift);
}

.bildergallerie *,
.bildergallerie *::before {
	box-sizing: border-box;
}

.bildergallerie .bg-rahmen {
	padding: 20px;
	border: 1px solid var(--svr-linie);
	border-radius: var(--svr-radius);
	box-shadow: var(--svr-schatten);
	background: var(--svr-karte);
}

.bg-leer {
	margin: 0;
	color: var(--svr-grau);
	font-size: 14px;
}

/* Uebersicht: eine Karte pro Galerie */
.bg-alben {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 14px;
}

.bg-album,
a.bg-album:visited,
a.bg-album:hover {
	color: var(--svr-text);
}

.bg-album {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--svr-linie);
	border-radius: 10px;
	background: var(--svr-karte);
	box-shadow: var(--svr-schatten-klein);
	overflow: hidden;
	transition: box-shadow 0.15s, transform 0.15s;
}

.bg-album:hover {
	box-shadow: var(--svr-schatten-hover);
	transform: translateY(-1px);
}

.bg-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 10px;
	padding: 6px 12px;
	background: var(--svr-kartenkopf);
	color: var(--svr-text);
	font-size: 12px;
	font-weight: bold;
	border-bottom: 1px solid var(--svr-linie);
}

.bg-datum {
	padding: 2px 10px;
	border-radius: 10px;
	background: var(--svr-akzent);
	color: var(--svr-text-auf-akzent);
}

.bg-kategorie {
	overflow-wrap: anywhere;
}

.bg-vorschau {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--svr-kreis);
}

.bg-vorschau-leer {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--svr-grau);
	font-size: 12px;
}

.bg-fuss {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-top: 1px solid var(--svr-linie);
}

.bg-titel {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.bg-anzahl {
	color: var(--svr-grau);
	font-size: 12px;
}

/* Einzelne Galerie */
.bg-karte {
	border: 1px solid var(--svr-linie);
	border-radius: var(--svr-radius);
	background: var(--svr-karte);
	box-shadow: var(--svr-schatten);
	overflow: hidden;
}

.bg-karte .bg-kopf {
	padding: 9px 16px;
	font-size: 13px;
	background: var(--svr-kartenkopf);
	color: var(--svr-text);
	border-bottom: 1px solid var(--svr-linie);
}

.bg-zurueck,
a.bg-zurueck:visited {
	color: var(--svr-link);
}

a.bg-zurueck:hover {
	color: var(--svr-grau);
}

.bg-seitentitel {
	margin: 0;
	padding: 18px 20px 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 10px;
	padding: 16px 20px 20px;
}

.gallery-grid a {
	display: block;
	border-radius: 8px;
	overflow: hidden;
}

.gallery-grid img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--svr-kreis);
	transition: transform 0.2s;
}

.gallery-grid a:hover img {
	transform: scale(1.04);
}

.gallery-grid .bg-leer {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.bildergallerie {
		margin: 12px auto;
		padding: 0;
	}

	.bildergallerie .bg-rahmen {
		padding: 12px;
	}

	.bg-seitentitel {
		padding: 14px 12px 0;
		font-size: 18px;
	}

	/* Zwei Bilder nebeneinander statt einem grossen */
	.gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		padding: 12px;
	}
}