/* n0 Lightbox 2.0 – Ergänzungen zu photoswipe.css
 * Anpassbar über CSS-Variablen am .pswp-Element (bzw. über Galerie-Klassen, die übertragen werden):
 *   --pswp-bg, --pswp-icon-color, --n0-thumb-active, --n0-caption-bg
 */
.n0-pswp {
	--n0-thumb-active: #fff;
	--n0-caption-bg: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	--n0-thumbs-h: 0px;
}

/* Diashow-Button: Play/Pause */
.n0-pswp .pswp__button--n0-slideshow .n0-i-pause { display: none; }
.n0-pswp.n0-pswp--playing .pswp__button--n0-slideshow .n0-i-play { display: none; }
.n0-pswp.n0-pswp--playing .pswp__button--n0-slideshow .n0-i-pause { display: inline; }
.n0-pswp .pswp__button--n0-slideshow .pswp__icn,
.n0-pswp .pswp__button--n0-thumbs-toggle .pswp__icn,
.n0-pswp .pswp__button--n0-download .pswp__icn { top: 14px; left: 9px; }
.n0-pswp .pswp__button--n0-download { display: block; }
.n0-pswp.n0-pswp--thumbs .pswp__button--n0-thumbs-toggle { opacity: 1; }
.n0-pswp:not(.n0-pswp--thumbs) .pswp__button--n0-thumbs-toggle { opacity: .6; }

/* Thumbs-Leiste */
.n0-pswp-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--n0-thumbs-h);
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 8px max(12px, env(safe-area-inset-left));
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	box-sizing: border-box;
	z-index: 15;
	transition: opacity var(--pswp-transition-duration, 333ms) ease;
}
.n0-pswp-thumbs::-webkit-scrollbar { display: none; }
.n0-pswp:not(.n0-pswp--thumbs) .n0-pswp-thumbs { display: none; }
.n0-pswp-thumbs__item {
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
	cursor: pointer;
	opacity: .55;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity .2s, outline-color .2s;
	position: relative;
}
.n0-pswp-thumbs__item:first-child { margin-left: auto; }
.n0-pswp-thumbs__item:last-child { margin-right: auto; }
.n0-pswp-thumbs__item:hover,
.n0-pswp-thumbs__item:focus-visible { opacity: .9; }
.n0-pswp-thumbs__item.is-active { opacity: 1; outline-color: var(--n0-thumb-active); }
.n0-pswp-thumbs__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n0-pswp-thumbs__item.is-video::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6));
}

/* Bildunterschrift */
.n0-pswp-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--n0-thumbs-h);
	padding: 2.5em 1.25em 1em;
	background: var(--n0-caption-bg);
	color: #fff;
	text-align: center;
	font-size: .95rem;
	line-height: 1.4;
	pointer-events: none;
	z-index: 14;
	transition: opacity var(--pswp-transition-duration, 333ms) ease;
}
.n0-pswp-caption a { pointer-events: auto; color: inherit; }
.n0-pswp-caption[hidden] { display: none; }
.n0-pswp:not(.pswp--ui-visible) .n0-pswp-caption,
.n0-pswp:not(.pswp--ui-visible) .n0-pswp-thumbs { opacity: 0; }

/* Video- und Inline-Slides */
.n0-pswp-video,
.n0-pswp-inline {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	padding: 56px 16px calc(var(--n0-thumbs-h) + 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	container-type: size;
}
@media (max-width: 599px) {
	.n0-pswp-video,
	.n0-pswp-inline { padding: 44px 0 calc(var(--n0-thumbs-h) + 8px); }
}
.n0-pswp-video__box {
	width: min(100cqw, calc(100cqh * var(--n0-ar, 1.7778)));
	max-height: 100cqh;
	background: #000;
	position: relative;
}
.n0-pswp-video__box video,
.n0-pswp-video__box iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.n0-pswp-inline__box {
	max-width: min(100cqw, 60rem);
	max-height: 100cqh;
	overflow: auto;
	background: #fff;
	color: #222;
	padding: 2rem;
	box-sizing: border-box;
}