@font-face {
	font-display: swap;
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/crimson-text-v19-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Crimson Text';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/crimson-text-v19-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/crimson-text-v19-latin-600.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2');
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Crimson Text', Verdana, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.3;
	color: #000;
}

h1, h2, h3, h4, h5, h6, b, strong {
	font-weight: 600;
}

i, em {
	font-style: italic;
}

a, a:hover {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

p {
	margin-bottom: 1em;
}

@keyframes fall {
	0% { transform: translate(0, 0) rotate(var(--start-rot)); }
	20% { transform: translate(var(--swing), calc(var(--fall) * 0.2)) rotate(calc(var(--start-rot) + var(--rot-delta) * 0.2)); }
	40% { transform: translate(calc(var(--swing) * -1), calc(var(--fall) * 0.4)) rotate(calc(var(--start-rot) + var(--rot-delta) * 0.4)); }
	60% { transform: translate(calc(var(--swing) * 0.6), calc(var(--fall) * 0.6)) rotate(calc(var(--start-rot) + var(--rot-delta) * 0.6)); }
	80% { transform: translate(calc(var(--swing) * -0.6), calc(var(--fall) * 0.8)) rotate(calc(var(--start-rot) + var(--rot-delta) * 0.8)); }
	100% { transform: translate(0, var(--fall)) rotate(var(--end-rot)); }
}

.wrapper {
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 140px 0;
}

section {
	position: relative;
	overflow: hidden;
}

#section1 {
	background-color: #bedfeb;
}

#section2 {
	background-color: #f0e8a8;
}

#section3 {
	background-color: #d8e2ca;
}

#section4 {
	background-color: #ffe0e7;
}

#section5 {
	background-color: #d2e9f1;
}

.menunav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0 !important;
}

.menu {
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
	font-size: 0;
	line-height: 0;

	li {
		display: inline-block;
		width: 25%;
		vertical-align: top;
	}

	.s2 {
		background-color: #e9de82;
	}

	.s3 {
		background-color: #c7d6b3;
	}

	.s4 {
		background-color: #ffc2cf;
	}

	.s5 {
		background-color: #6bb8d0;
	}

	a {
		display: block;
		font-size: 24px;
		line-height: 1;
		padding: 35px 0;
		text-align: center;
		text-decoration: none;
		color: #000;
	}
}

#section1 {
	position: relative;
	width: 100%;
	height: 1024px;

	.wrapper {
		padding: 0;
	}

	.layers {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;

		.inner {
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
			max-width: 1920px;
			left: 50%;
			transform: translateX(-50%);
		}

		.layer {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;

			&.layer1 {
				max-width: 100%;
				left: 0;
				transform: translateX(0);
				background-image: url('img/intro_bg.webp');
			}
			&.layer2 {
				top: auto;
				bottom: -90px;
				background-image: url('img/intro_glow.webp');
			}
			&.layer4 {
				top: auto;
				bottom: -90px;
				background-image: url('img/intro_figures.webp');
			}
			&.layer5 {
				background-size: 933px 576px;
				background-image: url('img/intro_logo.webp');
				background-position: 45% 80%;
			}
		}
	}

	.snow-section {
		position: absolute;
		overflow: hidden;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.snowflake {
		position: absolute;
		top: 0;
		pointer-events: none;
		will-change: transform, opacity;
		animation-name: fall;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}
}

#section2 {
	h1 {
		font-size: 40px;
		line-height: 1;
		font-style: italic;
		font-weight: 400;
	}

	h2 {
		font-size: 80px;
		line-height: 1;
		margin: 40px 0;
	}
}

#section3 {
	h1 {
		font-size: 58px;
		margin-bottom: 20px;
	}

	.previewgrid {
		display: grid;
		grid-template-columns: 400px 1fr;
		grid-gap: 50px;
	}

	.preview {
		position: relative;

		.bib, .audiobook {
			font-weight: 600;
			text-align: center;
			background-color: #f5ffe7;
			border: 1px solid #c7d6b3;
			border-radius: 20px;
			padding: 10px;
			margin: 10px;
			transition: background-color 0.3s ease;

			&:hover {
				background-color: #fff;
			}
		}

		.audiobook {
			margin-top: 20px;
		}
	}

	.description {
		z-index: 1;

		p {
			max-width: 700px;
		}
		a {
			text-decoration: underline;
		}

		.location {
			margin-bottom: .2em;

			+ ul {
				margin: 0;
				list-style-type: none;

				li {
					margin-left: 1em;

					&::before {
						display: inline-block;
						margin-left: -.5em;
						content: "·";
						width: .5em;
					}
				}

				+ p {
					margin-top: .4em;
				}
			}
		}
	}

	.logo {
		position: relative;
		left: -20px;
		width: 100%;
		max-width: 700px;
		height: 400px;
		background: url('img/intro_logo.webp') no-repeat left center;
		background-size: contain;
	}

	.flakes {
		position: absolute;
		right: -100px;
		bottom: 0;
		width: 400px;
		height: 844px;
		background: url('img/blickinsbuch_schneeflocken.webp') no-repeat center center;
		background-size: cover;
	}
}

#section4 {
	.wrapper {
		padding-top: 100px;
	}

	h1 {
		font-size: 80px;
		margin-bottom: 40px;
	}

	.cast {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 0;
		width: calc(100% + 200px);
		margin-left: -100px;

		div {
			line-height: 0;
			text-align: center;
		}

		.desktop {
			display: block;
		}

		.mobile {
			display: none;
		}

		span {
			display: block;
			font-size: 20px;
			line-height: 1.3;
			margin-top: 15px;
			padding-left: 10px;
		}
	}
}


#section5 {
	.authorgrid {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 50px;
		padding-right: 300px;

		.person, .banner {
			display: grid;
			grid-template-columns: 200px 1fr;
			grid-gap: 50px;
		}

		p {
			font-size: 20px;

			&.name {
				font-size: 28px;
			}
		}
	}

	footer {
		position: absolute;
		bottom: 160px;
		width: 100%;

		p, a, span {
			font-size: 20px;
		}

		p {
			display: block;
			text-align: center;
			margin: 0;
		}
	}

	.links {
		position: absolute;
		bottom: 220px;
		right: 0;

		a {
			display: table;
			background: url('img/icon_facebook.webp') no-repeat top left transparent;
			background-size: 40px 40px;
			min-height: 50px;
			padding-left: 50px;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: 18px;
			line-height: 1em;
			margin: 0 auto;

			&.facebook { background-image: url('img/icon_facebook.webp'); }
			&.instagram { background-image: url('img/icon_instagram.webp'); }
		}
	}

	.flakes {
		position: absolute;
		background: url('img/flocke1.webp') no-repeat center center;
		background-size: cover;

		&.flake1 {
			bottom: 120px;
			left: -330px;
			width: 300px;
			height: 300px;
		}

		&.flake2 {
			background-image: url('img/flocke2.webp');
			bottom: auto;
			left: auto;
			top: 100px;
			right: 50px;
			width: 180px;
			height: 180px;
		}
	}

	.wm {
		position: absolute;
		bottom: 300px;
		right: -100px;
		background: url('img/outro_wm.webp') no-repeat center center;
		background-size: cover;
		width: 400px;
		height: 680px;
	}
}

@media (max-width: 1400px) {
	* {
		font-size: 18px;
	}

	.menu a {
		font-size: 14px;
		padding: 10px 0;
	}

	.wrapper {
		padding: 60px 20px;
	}

	#section2 h2, #section3 h1, #section4 h1 {
		font-size: 30px;
	}

	#section1 {
		height: 768px;

		.layers .layer {
			background-position: center bottom;

			&.layer5 {
				background-size: 580px auto;
			}
		}
	}

	#section2 h1 {
		font-size: 26px;
	}

	#section3 {
		.logo {
			height: 300px;
		}
	}

	#section4 {
		.cast {
			width: 100%;
			margin-left: auto;
		}
	}

	#section5 {
		.links {
			right: 50px;
		}

		footer {
			position: relative;
			bottom: auto;
			margin-top: 50px;
		}
	}
}

@media (max-width: 1024px) {

	#section1 {
		height: calc(100vw * 0.7);

		.layers .layer {
			&.layer2, &.layer4 {
				bottom: -10%;
			}
			&.layer5 {
				background-size: calc(100vw * 0.7) auto;
			}
		}
	}
	#section3 {
		.previewgrid {
			grid-template-columns: 200px 1fr;

			.preview {
				text-align: center;

				img {
					max-height: 300px;
				}
			}
		}

		.flakes {
			display: none;
		}
	}
	#section4 .wrapper {
		padding-top: 60px;

		.cast {
			grid-template-columns: 1fr 1fr;
			grid-gap: 30px;
		}
	}

	#section5 {
		.authorgrid {
			padding-right: 0;
		}

		.flakes, .wm {
			display: none;
		}
	}
}

@media (max-width: 580px) {
	.menu {
		display: none;
	}

	#section3 {
		.previewgrid {
			grid-template-columns: 1fr;
		}
		.logo {
			text-align: center;
			left: auto;
			background-position: center;
		}
	}

	#section4 .wrapper {
		.cast {
			grid-template-columns: 1fr;
		}
	}

	#section5 {
		.authorgrid {
			.person, .banner {
				grid-template-columns: 1fr;

				img {
					display: block;
					width: 350px;
					margin: 0 auto;
				}
			}
		}

		.links {
			position: relative;
			right: auto;
			bottom: auto;
			margin: 30px auto 0 auto;
		}
	}
}
.audio-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.audio-modal {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 40px 24px 24px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	width: min(90vw, 400px);

	audio {
		width: 100%;
	}
}

.audio-modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #333;

	&:hover {
		color: #000;
	}
}