@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/inter-tight-v9-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/inter-tight-v9-latin-300.woff2') format('woff2');
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--scale-form: scaleY(1.2);
	--font-color: #fff;
	--text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
	--bgcolor1: rgb(73 50 160 / 0.5);
	--bgcolor2: rgb(113 114 174 / 0.5);
	--bgcolor3: rgb(144 162 53 / 0.5);
	--bgcolor4: rgb(173 173 151 / 0.5);
	--bgcolor5: rgb(48 187 82 / 0.5);
}

html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	font-size: clamp(14px, 1.6vw, 22px);
	font-family: 'Inter Tight', Arial, sans-serif;
	font-weight: 300;
	color: var(--font-color);
	line-height: 1.5;
}

a {
	text-decoration: none;
	color: var(--font-color);
}

.slide {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-bottom: 1px solid #000;

	.content {
		h1 {
			font-size: 10em;
			line-height: 1em;
			margin-bottom: 0.3em;
			/*text-shadow: var(--text-shadow);*/
			font-family: 'Inter', sans-serif;
			transform: var(--scale-form);
			position: relative;
			left: -12px;
		}
		p {
			font-size: .85em;
			margin-bottom: 1.5em;
			text-align: justify;
			hyphens: auto;
			-webkit-hyphens: auto;
			-ms-hyphens: auto;
			text-shadow: var(--text-shadow);
		}
		img {
			width: auto;
			max-width: 100%;
			height: auto;
		}
		.main-logo {
			margin-bottom: 1.5em;
		}
	}

	&:not(#slide1) .content {
		position: relative;
		top: 50%;
		left: 41%;
		transform: translate(-50%, -50%);
		max-width: 600px;
		text-align: center;
		padding: 1em;

		p {
			font-size: 1em;
			margin-bottom: 1.5em;
			text-align: justify;
			hyphens: auto;
			-webkit-hyphens: auto;
			-ms-hyphens: auto;
			text-shadow: var(--text-shadow);
		}
	}

	.social-links {
		position: absolute;
		bottom: 5%;
		left: 55%;
		transform: translateX(20%);
		max-width: 450px;
		text-align: center;

		a {
			position: absolute;
			display: block;
			width: 25%;
			height: 100%;
			&.link1 {
				top: 0;
				left: 0;
			}
			&.link2 {
				top: 0;
				left: 25%;
			}
			&.link3 {
				top: 0;
				left: 50%;
			}
			&.link4 {
				top: 0;
				left: 75%;
			}
		}
		img {
			width: 300px;
			max-width: 100%;
			height: auto;
		}
		.title {
			font-size: 3.4em;
			line-height: 1em;
			font-family: 'Inter', sans-serif;
			opacity: .5;
			transform: var(--scale-form);
			padding-bottom: 7%;
		}
	}

	.footernav {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: var(--bgcolor1);
		text-align: center;

		ul {
			padding: 10px 0;
		}

		li {
			display: inline-block;
			padding: 0 10px;
			border-right: 1px solid var(--font-color);
			&:last-child {
				border-right: 0;
			}
			a {
				text-align: center;
				text-transform: uppercase;
				color: var(--font-color);
				font-size: 1em;
				transform: var(--scale-form);
				font-weight: 300;
				text-shadow: var(--text-shadow);
				text-decoration: none;
			}
		}
	}
}

.deco-corner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.wlz-logo {
	position: absolute;
	display: block;
	top: 3%;
	right: 1%;
	width: 194px;
	height: 110px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(images/01_WLZ_media_Logo.png);
}

.contact-info {
	position: absolute;
	top: 1%;
	left: 0;
	width: 100%;
	font-size: .85em;
	text-align: center;
	color: var(--font-color);
	background-color: var(--bgcolor1);
	padding: .5em;
	/* hide */
	display: none;
}

#slide1 {
	background-image: url(images/01_Background.jpg);

	.content {
		position: relative;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 700px;
		text-align: center;
		padding: 1em;

		.splittext {
			display: grid;
			grid-template-columns: 45% 20% 35%;
			grid-gap: 0;
			.links {
				margin-top: 20px;
				a {
					font-family: 'Inter Tight', Arial, sans-serif;
					display: block;
					font-weight: 300;
					text-decoration: none;
					color: var(--font-color);
					text-transform: uppercase;
					letter-spacing: -.02em;
					text-align: left;
					font-size: 1.3em;
					text-shadow: var(--text-shadow);
					transform: var(--scale-form);
					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}

	.slogan {
		position: absolute;
		bottom: 20%;
		left: 50%;
		transform: translateX(-90%);
	}
	.slogan img {
		max-width: 100%;
		height: auto;
	}

	.intro-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.deco-corner {
		background-image: url(images/01_Ecken.png);
	}
}

#slide2 {
	.content {
		left: 35%;
	}
}

#slide6, #slide7, #slide8, #slide9 {
	&:not(#slide1) .content {
		left: 53%;
		max-width: 1000px;

		.splittext {
			display: grid;
			grid-template-columns: 43% 10% 47%;
			grid-gap: 0;

			.video {
				margin-top: 300px;

				video {
					width: 100%;
					height: auto;

					img {
						position: relative;
						display: block;
					}
				}
			}
		}
	}

	&#slide7 {
		.content {
			.splittext {
				grid-template-columns: 45% 25% 35%;

				img {
					width: 100%;
					height: auto;
					margin-top: -120px;
					&.img2 {
						margin-top: 40px;
					}
				}
				h1 {
					font-size: 3em !important;
					transform: var(--scale-form);
					margin-bottom: 1em;
				}
			}
		}
		.social-links .title {
			opacity: 1;
			font-size: 1.2em;
			padding-bottom: 3%;
		}
	}

	&#slide8 {
		.content {
			left: 36%;
			max-width: 900px;

			h1, h2 {
				text-align: left;
				margin-bottom: 0;
			}
			h1 {
				opacity: .7;
			}
			h2 {
				font-size: 1.5em !important;
				transform: var(--scale-form);
				text-shadow: var(--text-shadow);
				margin: .3em 0;
			}
		}
		.form {
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 10px;

			.field {
				display: grid;
				grid-template-columns: 160px 1fr;
				grid-gap: 10px;
				align-content: start;
				justify-content: start;

				label, input {
					display: block;
					font-size: 1em;
					hyphens: auto;
					text-align: left;
				}
				label {
					text-shadow: var(--text-shadow);
				}
				input {
					width: 100%;
					height: auto;
					background: rgba(255, 255, 255, .4);
					border: 0 none;
					padding: 4px 12px;
					color: var(--font-color);
					&:focus {
						outline: 1px solid var(--font-color);
						border-radius: 2px;
					}
				}
				p:not(.hint) {
					display: none;
					margin-bottom: 0;
					color: #f00;
					font-size: .7em;
					padding: 0 10px;
				}
				.hint {
					display: block;
					margin-bottom: 0;
					color: var(--font-color);
					font-size: .7em;
				}
				&#field-send {
					text-align: left;
				}
				.submit-btn {
					display: inline-block;
					margin: 10px auto;
					color: var(--font-color);
					font-size: 1em;
					border: 0 none;
					background-color: #0d3ba7;
					padding: 8px 24px;
					cursor: pointer;
					&:hover {
						background-color: #0d3ba7;
					}
				}
				&.invalid {
					p {
						display: block;
					}
				}
			}
		}
	}
}

#slide2 {
	background-image: url(images/02_marketing_Background.jpg);
	.contact-info {
		background-color: var(--bgcolor2);
	}
}
#slide3 {
	background-image: url(images/03_branding_Background.jpg);
	.contact-info {
		background-color: var(--bgcolor3);
	}
}
#slide4 {background-image: url(images/04_social_media_Background.jpg);}
#slide5 {
	background-image: url(images/05_design_Background.jpg);
	.contact-info {
		background-color: var(--bgcolor4);
	}
}
#slide6 {background-image: url(images/06_video.jpg);}
#slide7 {background-image: url(images/07_ippen_media.jpg);}
#slide8 {
	background-image: url(images/08_contact.jpg);
	.contact-info {
		background-color: var(--bgcolor5);
	}
}
#slide9 {
	background-image: url(images/08_contact.jpg);
}

@media screen and (max-height: 1024px) and (min-width: 1281px) {
	.slide .content h1 {
		font-size: 8em !important;
	}
}
@media (max-width: 1280px) {
	.slide {
		height: auto;
		min-height: 100vh;
		padding: 4em 1em 8em;
		background-attachment: fixed;

		.content {
			top: auto !important;
			left: auto !important;
			transform: none !important;
			margin: 100px auto 40px auto;

			h1 {
				font-size: 5em;
			}
		}
		&:not(#slide1) .content {
			margin: 5% auto;
			background-color: rgba(0, 0, 0, .5);
		}
		.social-links {
			position: relative;
			bottom: auto;
			left: auto;
			transform: none;
			max-width: 700px;
			margin: 0 auto 40px auto;
			display: block;
		}
	}

	#slide1 {
		.slogan {
			position: relative;
			bottom: auto;
			left: auto;
			transform: none;
			max-width: 700px;
			margin: 0 auto 40px auto;
			display: block;
		}
	}
	#slide6, #slide7 {
		&:not(#slide1) .content {
			max-width: 600px;

			.splittext {
				grid-template-columns: 100%;
				grid-gap: 20px;

				.video {
					margin-top: 0;
				}

				img {
					margin-top: 0;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	body {
		font-size: clamp(15px, 4vw, 20px);
	}

	.wlz-logo {
		top: 1%;
		right: 1%;
		max-width: 94px;
		height: 54px;
	}

	.slide {
		.content {
			position: static;
			transform: none;
			width: 100%;
			margin: 0 auto;

			h1 {
				font-size: 2.2em;
				left: auto;
			}
			p {
				font-size: 1.1em;
			}
		}
		&:is(#slide1) .content .text {
			margin: auto -1em;
			padding: 1em;
			background-color: rgba(0, 0, 0, .5);
		}

		.social-links {
			.title {
				font-size: 2.2em;
			}
		}
	}

	#slide1 {
		.content {
			.splittext {
				grid-template-columns: 100%;
				grid-gap: 20px;
			}
		}
	}

	#slide8 {
		.content {
			h1, h2 {
				text-align: center;
			}
		}
	}
}