* {
	margin: 0;
	padding: 0;
}
#pop-up {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	position: fixed;
	inset: 0;
	z-index: 15;

	background: rgba(0, 0, 0, 0.8);

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 20px;
	box-sizing: border-box;

	overflow-y: auto;
}

/* Popup-Container */
#pop-up > div {
	width: min(90vw, 900px);
	height: min(90dvh, 800px);

	min-width: 0;
	min-height: 0;

	background: #fff;
	border-radius: 20px;

	padding: 20px;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 15px;

	color: #706f6f;

	position: relative;
}

/* Logo */
#pop-up > div > img:first-child {
	width: 50px;
	height: 50px;
	object-fit: contain;

	flex-shrink: 0;
}

/* Vorschau-Bild */
#pop-up .pop-up-preview-image {
	display: block;

	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100% - 120px);

	object-fit: contain;

	border-radius: 15px;

	flex: 1 1 auto;
	min-height: 0;
}

/* Close Button */
#pop-up-close {
	width: min(300px, 80%);
	min-height: 40px;

	margin: 0;

	padding: 8px 20px;

	font-size: 16px;
	font-weight: 600;

	background: #76b82a;
	color: #fff;

	border: 2px solid #76b82a;
	border-radius: 10px;

	cursor: pointer;

	transition:
		background-color 250ms ease,
		color 250ms ease,
		transform 150ms ease;
}

#pop-up-close:hover {
	background: transparent;
	color: #76b82a;
}

#pop-up-close:active {
	transform: scale(0.98);
}

/* Tablet */
@media (max-width: 768px) {
	#pop-up {
		padding: 15px;
	}

	#pop-up > div {
		width: min(94vw, 700px);
		height: min(92dvh, 700px);

		padding: 15px;

		border-radius: 16px;
	}

	#pop-up .pop-up-preview-image {
		max-width: 100%;
		max-height: calc(100% - 105px);
	}
}

/* Smartphone */
@media (max-width: 480px) {
	#pop-up {
		padding: 10px;
	}

	#pop-up > div {
		width: 100%;
		height: 100%;
		max-height: 100%;

		padding: 12px;

		border-radius: 12px;
	}

	#pop-up > div > img:first-child {
		width: 42px;
		height: 42px;
	}

	#pop-up .pop-up-preview-image {
		width: 100%;
		height: auto;

		max-width: 100%;
		max-height: calc(100% - 105px);

		border-radius: 10px;
	}

	#pop-up-close {
		width: 100%;
		min-height: 42px;
	}
}

/* Sehr kleine Displays */
@media (max-height: 600px) {
	#pop-up > div {
		padding: 10px;
		gap: 8px;
	}

	#pop-up > div > img:first-child {
		width: 35px;
		height: 35px;
	}

	#pop-up-close {
		min-height: 36px;
		font-size: 14px;
	}
}