/* Foto-Ansicht im Glas-Look */
.srm-zoomable { cursor: zoom-in; }
html.srm-lb-open, html.srm-lb-open body { overflow: hidden; }

.srm-lb { position: fixed; inset: 0; z-index: 100000; color: #fff; font-family: var(--srm-font, system-ui, sans-serif); opacity: 0; transition: opacity .28s ease; }
.srm-lb.is-open { opacity: 1; }
.srm-lb[hidden] { display: none; }
.srm-lb__glass {
	position: absolute; inset: 0;
	/* starkes Milchglas: Seite scheint farbig und weich durch, unten etwas dunkler für die weiße Schrift */
	background: linear-gradient(180deg, rgba(255, 250, 240, .16), rgba(40, 34, 24, .44));
	backdrop-filter: blur(48px) saturate(1.8) brightness(1.04); -webkit-backdrop-filter: blur(48px) saturate(1.8) brightness(1.04);
}

.srm-lb__top { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 3; }
.srm-lb__pill {
	display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 999px; font-size: 15px;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.srm-lb__pill:empty, .srm-lb__count:empty { display: none; }
.srm-lb__group { font-family: var(--srm-display, inherit); font-size: 17px; }
.srm-lb__count { opacity: .85; }

.srm-lb__btn {
	width: 52px; height: 52px; border-radius: 50%; padding: 0; cursor: pointer; color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14);
	backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .2); transition: background .2s ease, transform .2s ease;
}
.srm-lb__btn:hover { background: rgba(255, 255, 255, .28); }
.srm-lb__btn:focus-visible { outline: 3px solid #F2D9A6; outline-offset: 3px; }
.srm-lb__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.srm-lb__close { width: 46px; height: 46px; }
.srm-lb__prev, .srm-lb__next { position: absolute; top: 50%; margin-top: -26px; z-index: 3; }
.srm-lb__prev { left: max(20px, calc(50% - 560px)); }
.srm-lb__next { right: max(20px, calc(50% - 560px)); }
.srm-lb__btn[hidden] { display: none; }

.srm-lb__stage { position: absolute; left: 0; right: 0; top: 84px; bottom: 150px; z-index: 2; }
.srm-lb__img {
	position: absolute; inset: 0; margin: auto; max-width: min(1000px, calc(100% - 180px)); max-height: 100%;
	width: auto; height: auto; object-fit: contain; border-radius: 18px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateX(calc(var(--dir, 0) * 24px)) scale(.985);
	transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.srm-lb__img.is-active { opacity: 1; transform: none; }
.srm-lb__img:not([src]) { display: none; }

.srm-lb__bottom { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 3; padding: 0 16px; }
.srm-lb__caption { max-width: 760px; text-align: center; font-size: 16px; line-height: 1.45; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); min-height: 1.45em; }
.srm-lb__thumbs {
	display: flex; gap: 8px; max-width: min(860px, 100%); overflow-x: auto; padding: 8px; scrollbar-width: none;
	border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.srm-lb__thumbs::-webkit-scrollbar { display: none; }
.srm-lb__thumbs[hidden] { display: none; }
.srm-lb__thumb { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border-radius: 9px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; opacity: .55; transition: opacity .2s ease, transform .2s ease, border-color .2s ease; }
.srm-lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srm-lb__thumb:hover { opacity: .85; }
.srm-lb__thumb.is-active { opacity: 1; border-color: #fff; transform: translateY(-2px); }
.srm-lb__hint { font-size: 12.5px; opacity: .65; }

@media (max-width: 700px) {
	.srm-lb__top { left: 12px; right: 12px; top: 12px; }
	.srm-lb__stage { top: 70px; bottom: 120px; }
	.srm-lb__img { max-width: 100%; border-radius: 0; }
	.srm-lb__prev, .srm-lb__next { display: none; }
	.srm-lb__thumbs { display: none; }
	.srm-lb__hint:after { content: " · wischen zum Blättern"; }
}
@media (prefers-reduced-motion: reduce) {
	.srm-lb, .srm-lb__img, .srm-lb__thumb { transition: none; }
	.srm-lb__img { transform: none; }
}

/* Helles Milchglas: Schrift und Steuerung in dunklem Grau, Bedienelemente als helle Glasflächen */
.srm-lb { color: #2F2C26; }
.srm-lb__glass { background: linear-gradient(180deg, rgba(255, 250, 240, .22), rgba(255, 250, 240, .36)); }
.srm-lb__pill, .srm-lb__btn, .srm-lb__thumbs { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .7); }
.srm-lb__btn { color: #2F2C26; box-shadow: 0 8px 26px rgba(35, 38, 31, .16); }
.srm-lb__btn:hover { background: rgba(255, 255, 255, .8); }
.srm-lb__caption { text-shadow: 0 1px 10px rgba(255, 255, 255, .7); font-weight: 600; }
.srm-lb__count, .srm-lb__hint { opacity: .8; }
.srm-lb__thumb.is-active { border-color: var(--srm-accent, #9A6A1E); }
.srm-lb__btn:focus-visible { outline-color: var(--srm-accent, #9A6A1E); }