#fancybox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.65);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.3s;
}

#fancybox-overlay.show {
	display: flex;
	opacity: 1;
}

#fancybox-img {
	max-width: 90%;
	max-height: 80%;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
	transition:
		transform 0.3s,
		opacity 0.5s;
	cursor: grab;
	opacity: 0;
}

#fancybox-img.show {
	opacity: 1;
}

#fancybox-caption {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	color: #fff;
	font-size: 1.1rem;
	background: rgba(0, 0, 0, 0.4);
	padding: 0.4rem 0.8rem;
	border-radius: 0.5rem;
	max-width: 90%;
}

.fancybox-btn,
.slideshow-btn {
	position: absolute;
	top: 50%;
	font-size: 2.7rem;
	color: #fff;
	border-radius: 0.3rem;
	padding: 0.2rem 0.45rem;
	cursor: pointer;
	user-select: none;
	transition:
		transform 0.2s,
		color 0.2s,
		box-shadow 0.2s;
}

.fancybox-btn:hover,
.slideshow-btn:hover {
	color: #000;
	transform: scale(1.2);
}

#fancybox-overlay .close-btn {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 2.5rem;
	z-index: 10002;
	/* über Tooltips und Overlay */
	cursor: pointer;
	color: white;
	user-select: none;
}

.flash {
	box-shadow: 0 0 15px #fff !important;
}

.nav-prev {
	left: 1rem;
	color: #000 !important;
}

.nav-next {
	right: 1rem;
	color: #000 !important;
}

.close-btn {
	top: 0 !important;
	right: 1rem !important;
	font-size: 3rem !important;
}

.play-btn {
	top: 1.1rem !important;
	left: 50%;
	font-size: 1.8rem !important;
}

.speed-down {
	top: 1rem !important;
	left: 40%;
	font-size: 1.8rem !important;
}

.speed-up {
	top: 1rem !important;
	left: 60%;
	font-size: 1.8rem !important;
}

@media (max-width: 768px) {
	#fancybox-img {
		max-width: 95%;
		max-height: 70%;
	}

	.fancybox-btn,
	.slideshow-btn {
		font-size: 2rem;
		padding: 0.1rem 0.3rem;
	}

	.close-btn {
		font-size: 2rem;
		top: 0.5rem;
		right: 0.5rem;
	}

	.play-btn {
		font-size: 1.7rem;
	}

	.speed-down {
		left: 35%;
	}

	.speed-up {
		left: 65%;
	}
}

img.fancybox {
	margin: 0.5rem;
	width: 200px;
	cursor: pointer;
	border-radius: 6px;
	transition: transform 0.2s;
}

img.fancybox:hover {
	transform: scale(1.05);
}

/* ---------------------------
   White Tooltip für Fancybox
--------------------------- */
.white-tooltip {
	z-index: 30000 !important; /* über Fancybox Overlay */
}

/* Tooltip-Inhalt */
.white-tooltip .tooltip-inner {
	background-color: rgba(0, 0, 0, 0.01) !important;
	color: #fff !important; /* weiße Schrift */
	font-weight: bold;
	font-size: 0.9rem;
	box-shadow: none !important; /* optional: Schatten entfernen */
}

/* Bootstrap Standardpfeil deaktivieren */
.white-tooltip .tooltip-arrow,
.white-tooltip .tooltip-arrow::before {
	opacity: 1 !important;
}

.white-tooltip .tooltip-arrow::before {
	background: none !important;
	border: none !important;
}

/* Pfeil oben */
.white-tooltip.bs-tooltip-top .tooltip-arrow,
.white-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
	border-width: 0 0.45rem 0.45rem 0.45rem;
	border-style: solid;
	border-color: #fff transparent transparent transparent !important;
}

/* Pfeil unten */
.white-tooltip.bs-tooltip-bottom .tooltip-arrow,
.white-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
	border-width: 0.45rem 0.45rem 0 0.45rem;
	border-style: solid;
	border-color: #fff transparent transparent transparent !important;
}

/* Pfeil links */
.white-tooltip.bs-tooltip-start .tooltip-arrow,
.white-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
	border-width: 0.45rem 0.45rem 0.45rem 0;
	border-style: solid;
	border-color: #fff transparent transparent transparent !important;
}

/* Pfeil rechts */
.white-tooltip.bs-tooltip-end .tooltip-arrow,
.white-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
	border-width: 0.45rem 0 0.45rem 0.45rem;
	border-style: solid;
	border-color: #fff transparent transparent transparent !important;
}