/* Lightbox für Inhaltsbilder (assets/js/lightbox.js), eigenständig neben dem Build. */
.post__content img.is-zoomable { cursor: zoom-in; transition: filter .25s ease, transform .25s ease; }
.post__content img.is-zoomable:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .post__content img.is-zoomable, .post__content img.is-zoomable:hover { transition: none; transform: none; } }
.post__content img.is-zoomable:focus-visible { outline: 2px solid #5b3f3f; outline-offset: 3px; }
/* Seite sperren, Scrollbalken-Platz bleibt reserviert (kein Springen des Inhalts).
   Der frei gewordene Streifen rechts bekommt den Farbton des abgedunkelten Hintergrunds. */
html { transition: background-color .3s ease; }
html.has-lightbox { overflow: hidden; background-color: #423837; }   /* #2e2323e6 über Creme */

.lightbox {
	width: 100vw; height: 100vh; height: 100dvh;
	max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: transparent; color: #fff;
}
.lightbox::backdrop { background: #2e2323e6; }   /* globaler Backdrop, siehe $color-backdrop */

/* Öffnen und Schließen: Hintergrund blendet ein, das Bild wächst minimal heran. */
.lightbox, .lightbox::backdrop {
	transition: opacity .3s ease, overlay .3s ease allow-discrete, display .3s ease allow-discrete;
	opacity: 0;
}
.lightbox[open], .lightbox[open]::backdrop { opacity: 1; }
@starting-style {
	.lightbox[open], .lightbox[open]::backdrop { opacity: 0; }
	.lightbox[open] .lightbox__img { transform: scale(.97); }
}
.lightbox__img { transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
.lightbox__img.is-loading { opacity: 0; }
.lightbox__figure {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 64px 88px 56px;
}
.lightbox__img {
	display: block; max-width: 100%; max-height: calc(100% - 40px);
	width: auto; height: auto; border-radius: 21px; object-fit: contain;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.lightbox__caption {
	max-width: 70ch; margin: 0; text-align: center;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: #f7f2ee;
}
.lightbox__count {
	position: absolute; top: 22px; left: 24px; margin: 0;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 15px; color: #f7f2ee;
}
.lightbox__btn {
	position: absolute; display: grid; place-items: center;
	width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; color: #0d0d0d; cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__btn:hover { background: #ea985d; }
.lightbox__btn:focus-visible { outline: 3px solid #ea985d; outline-offset: 3px; }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
	.lightbox__figure { padding: 64px 12px 80px; }
	.lightbox__img { border-radius: 14px; }
	.lightbox__caption { font-size: 14px; padding: 0 8px; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; }
	.lightbox__prev { left: calc(50% - 60px); }
	.lightbox__next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .lightbox__btn, .lightbox, .lightbox::backdrop, .lightbox__img { transition: none; } }