/* ==========================================================================
Hero Section
========================================================================== */
.spacer {
	height: 140vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #666;
}

.animation-wrapper {
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

/* WICHTIG: Start jetzt FULLSCREEN (nicht mehr gecroppt) */
.image-mask {
	position: absolute;
	inset: 0;
	clip-path: inset(0vh 0vw round 0px);
	z-index: 1;
}

.bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* filter: brightness(0.85); */
	z-index: -1;
}

.text-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	text-align: center;
	color: #fff;
	padding: 0 2rem;
	/* text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); */
	text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.8);
	/* mix-blend-mode: difference; */
	opacity: 1;
	/* Start sichtbar */
}

.text-overlay h1 {
	font-family: var(--font_titel);
	font-size: clamp(2.2rem, 6vw, 5rem);
	font-weight: 400;
	margin: 0 0 1rem 0;
	line-height: 1.1;
	transform: translateY(0);
	/* mix-blend-mode: difference; */
	/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
	/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); */
	/* mix-blend-mode: difference; */
	color: #ffffff;
}

.text-overlay p {
	font-size: clamp(1rem, 1.8vw, 1.125rem);
	font-weight: 300;
	margin: 0;
	letter-spacing: 0.5px;
	transform: translateY(0);
}

/* ==========================================================================
Album übersicht
========================================================================== */
.square-image {
	width: 100%;
	min-height: 300px;
	height: calc(50vW);
}

/* (Breite - 1 * 15px Gap - 80px Padding) geteilt durch 2 Spalten */
@media (min-width: 640px) {
	.square-image {
		height: calc((100vW - 1 * 15px - 80px) / 2);
	}
}

/* (Breite - 2 * 15px Gap - 80px Padding) geteilt durch 3 Spalten */
@media (min-width: 960px) {
	.square-image {
		height: calc((100vW - 2 * 15px - 80px) / 3);
	}

	.uk-container-expand .square-image {
		height: calc((100vW - 2 * 15px - 80px) / 3);
	}
}

/* (Feste Breite - 2 * 15px Gap) geteilt durch 3 Spalten */
@media (min-width: 1200px) {
	.square-image {
		height: calc((1200px - 2 * 15px) / 3);
	}
}