/* ZERYON Image Lightbox — dunkler „Schaukasten" für Inhaltsbilder.
   Self-contained: feste dunkle Werte, Akzent erbt --z-accent/--accent. */

/* Klickbare Inhaltsbilder bekommen einen Zoom-Cursor + dezenten Hover. */
img.zlb-zoomable{ cursor: zoom-in; transition: filter .2s ease, transform .2s ease; }
img.zlb-zoomable:hover{ filter: brightness(1.06); }

/* Overlay */
.zlb{
	position: fixed; inset: 0; z-index: 100000;
	display: none; align-items: center; justify-content: center;
	padding: 34px;
	background: rgba(5,4,12,.92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; transition: opacity .22s ease;
}
.zlb.open{ display: flex; opacity: 1; }

/* Rahmen / Schaukasten */
.zlb-frame{
	position: relative;
	max-width: min(1100px, 92vw);
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, #15151f, #0a0a12);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	padding: 14px;
	box-shadow:
		0 50px 120px rgba(0,0,0,.65),
		0 0 0 1px color-mix(in srgb, var(--z-accent, var(--accent, #6b7cff)) 26%, transparent);
	animation: zlbin .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes zlbin{ from{ transform: translateY(10px) scale(.985); opacity: 0; } to{ transform: none; opacity: 1; } }

.zlb-imgwrap{
	position: relative; border-radius: 12px; overflow: hidden;
	background: #000; display: flex; align-items: center; justify-content: center;
}
.zlb-img{ display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto; }

.zlb-cap{
	margin-top: 11px; text-align: center;
	font-size: 13.5px; line-height: 1.4; color: #c7cede; min-height: 1.1em;
}

.zlb-close{
	position: absolute; top: 8px; right: 8px;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.16); background: #1a1a26; color: #fff;
	font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.zlb-count{
	position: absolute; top: 8px; left: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; color: #aab2c6;
	background: #1a1a26; border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px; padding: 4px 10px;
}
.zlb-nav{
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.16); background: rgba(26,26,38,.9); color: #fff;
	font-size: 24px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.zlb-nav:hover{ background: #20202e; }
.zlb-prev{ left: 8px; }
.zlb-next{ right: 8px; }

@media (max-width: 640px){
	.zlb{ padding: 16px; }
	.zlb-nav{ width: 40px; height: 40px; }
}