/* Startseite
__________________________________________________________________________________________ */

section.header__block {
	position: relative;
	width: 100%;
	z-index: 0;
	position: fixed;
	top: 0;
	left: 0;
	@media screen and (min-width: 1280px) {
		position: fixed;
		top: 0;
		left: 0;
	}
}

section.content__block {
	margin-top: 100vh;
	@media screen and (min-width: 1280px) {
		margin-top: calc(100vh + 6.25rem);
	}
}

/*** Header ***/

.header__block {
	
	height: 100vh;
	
	> .container {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Hintergrund_Startseite.webp') no-repeat center/cover;
		&::before {
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			mix-blend-mode: multiply;
			background: rgba(0,0,0,0.5);
		}
	}

	@media screen and (min-width: 1280px) {
		height: calc(100vh + 6.25rem);

		> .container {
			.headline {
				padding-left: 15%;
			}
		}

		.junge {
			position: fixed;
			left: -1.25rem;
			top: -5.625rem;
			width: 850px;
			height: 980px;
			z-index: 3;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Junge-Holzhaufen.webp') no-repeat bottom left/contain;
		}

		.bg-image {
			mask-image: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/form-maske_01.svg);	
			mask-size: 1920px auto;
			mask-repeat: no-repeat;
			mask-position: top left;
			&::before {
				background: linear-gradient(to bottom, rgba(132, 146, 163, 1), rgba(132, 146, 163, 0) 100%);
			}
		}

	}

	@media screen and (min-width: 1480px) {

		.junge {
			left: -2.5rem;
			top: 200px;
			width: 1150px;
		}

		.bg-image {
			mask-size: 2560px auto;
		}

	}
}

@media (orientation: landscape) and (max-height: 700px) {
	.header__block {
		> .container {
			.headline {
				img {
					max-height: 50vh;
				}
			}
		}

		.junge {
			display: none;
		}
		.bg-image {
			mask-image: none;
			&::before {
				background: rgba(0,0,0,0.5);
			}
		}
	}
}

/*** Unsere Philosophie ***/

.section01 {
	
	#c23{
		text-align: center;
		h3 {
			max-width: 40rem;
			display: inline-block;
		}
	}
	
	@media screen and (min-width: 1280px) {
		#c26 {
			left: -6.25rem;
			position: relative;
			width: calc(100% + 15.625rem);
		}
	}
}

/*** Arbeitsbereiche ***/

.section02 {

	#c25 {
		margin-top: -15%;
		text-align: center;
		h3 {
			display: inline-block;
			max-width: 436px;
		}
	}

	#c24 {
		margin-top: -7%;
		padding-right: 38%;
		text-align: center;
		h3 {
			display: inline-block;
			max-width: 358px;
		}
		
		@media screen and (min-width: 1280px) {
			margin-top: -10%;
		}
	}
	
	#c12.multicol.mc2 {
		& > .col {
			position: relative;
			p {
				max-width: 430px;
				margin: 0 auto;
			}
		}
		
		& > .col:nth-child(1) {
			&::after {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				top: 15%;
				left: 0;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Weisse-Form.svg') no-repeat center top/contain;
				z-index: -1;
			}
		}
	}
	
	@media screen and (min-width: 1280px) {
		#c24 {
			margin-top: -10%;
		}
		#c12.multicol.mc2 {
			& > .col:nth-child(2) {
				margin-top: -2%;
			}
		}
	}
	
}

/*** Leistungen ***/

.section03 {
	padding: 0;
	
	.illustration {
		background: var(--blacktransparent) url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Illustration-Rutsche.webp') no-repeat -550px 0/1900px auto;
		width: 100%;
		height: 500px;
		> .container {
			display: flex;
			height: 100%;
			align-items: flex-end;
		}
		.section-header {
			color: var(--white);
			margin: 0 0 3.125rem 0;
		}
	}
	
	.top {
		position: relative;
		z-index: 1;
		padding: 3.125rem 0;
		&::before {
			background-position: left;
		}
		
		#c28 {
			h3 {
				max-width: 26.875rem;
				display: inline-block;
			}
		}
	}
	
	.bottom {
		position: relative;
		z-index: 2;
		padding: 3.125rem 0 4.6875rem 0;
		
		#c35 {
			text-align: center;
			h3 {
				display: inline-block;
				max-width: 35.625rem;
			}
		}
		
		#c65.multicol.mc2 {
			> .col {
				margin: 0;
			}
		}
	}
	
	@media screen and (min-width: 768px) {

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			background: var(--white);
			height: calc(100% - 1340px);
			width: 100%;
		}
		
		.illustration {
			background: var(--blacktransparent) url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Illustration-Rutsche.webp') no-repeat top center/2230px auto;
			height: 1340px;
			> .container {
				height: 600px;
			}
		}
		
		.top {
			background: none;
			margin: -600px 0 0 0;
			&::before {
				content: none;
			}
			
			.wrap {
				width: 50%;
				.button-pfeil {
					a {
						min-height: 6.875rem;
					}
				}
			}
		}
		
		.bottom {
			background: none;
			#c34 {
				position: relative;
				&::before {
					content: '';
					position: absolute;
					top: 1.5625rem;
					left: -27.5rem;
					width: 18.125rem;
					height: 20rem;
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/blaetter_02.svg') no-repeat center/contain;
				}
			}
			
			#c65 {
				.button-pfeil {
					a {
						min-height: 6.875rem;
					}
				}
			}
		}
	}

	@media screen and (min-width: 1024px) {
		
		.bottom {
			padding: 3.125rem 0 6.25rem 0;
		}
		
	}

	@media screen and (min-width: 1280px) {
		.bottom {
			#c65.multicol.mc2 {
				padding-left: calc(100%/3);
			}
		}
	}
	
	@media screen and (min-width: 1480px) {
		&::after {
			height: calc(100% - 1550px);
		}
		
		.illustration {
			background-size: 2560px auto;
			height: 1550px;
			> .container {
				height: 700px;
			}
		}
		
		.top {
			margin: -700px 0 0 0;
		}
	}
}

/*** Projekte ***/

.section04 {
	padding: 0;
	z-index: 2;
	background: none;
	
	.section-header {
		padding-top: 3.125rem;
	}
	
	.background {
		background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Hintergrund_Holz-Loecher.webp') no-repeat top left/960px auto;
		background-position: -100px 0;
		background-size: 960px auto;
		position: relative;
	}
	
	.top {
		padding-top: 300px;
		#c32 {
			text-align: center;
			h3 {
				display: inline-block;
				max-width: 46.875rem;
			}
		}
	}
	
	.bottom {
		background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Hintergrund_Holz.webp') repeat-y top center/960px auto;
		padding-bottom: 1.5625rem;
	}
	
	@media screen and (min-width: 480px) {
		
		.background {
			background-position: -120px 0;
			background-size: 1200px auto;
		}
		
		.top {
			padding-top: 400px;
		}
		
		.bottom {
			background-size: 1200px auto;
		}
	}
	
	@media screen and (min-width: 640px) {
		
		.background {
			background-position: left top;
		}
	}
	
	@media screen and (min-width: 768px) {
		
		.background {
			background-position: center top;
			background-size: 1920px auto;
		}
		
		.top {
			padding-top: 0;
			> .container {
				display: flex;
				justify-content: flex-end;
				.wrap {
					width: 50%;
				}
			}
		}
		
		.bottom {
			background-size: 1920px auto;
			background: none;
		}
		
	}
	
	@media screen and (min-width: 880px) {
		
		.bottom {
			/*padding-top: 150px;*/
			
			.button-pfeil {
				margin-top: -150px;
			}
		}
	}
	
	@media screen and (min-width: 1024px) {
		
		.bottom {
			padding-bottom: 50px;
		}
	}
	
	@media screen and (min-width: 1180px) {
		
		.bottom {
			/*padding-top: 75px;*/
		}
		
	}
	
	@media screen and (min-width: 1480px) {
		
		.bottom {
			/*padding-bottom: 100px;*/
		}
	}

	@media screen and (min-width: 1920px) {
		
		.background {
			position: relative;
			&::before {
				content: '';
				width: 12vw;
				height: 100%;
				top: 0;
				left: 0;
				background: var(--lightyellow2);
				position: absolute;
				z-index: -1;
			}
			&::after {
				content: '';
				width: 12vw;
				height: 100%;
				top: 0;
				right: 0;
				background: var(--lightyellow2);
				position: absolute;
				z-index: -1;
			}
		}
	}

	@media screen and (min-width: 2500px) {
		
		.background {
			&::before {
				content: '';
				width: 15vw;
			}
			&::after {
				content: '';
				width: 15vw;
			}
		}
	}

	
}

/*** Kontakt ***/

.section05 {
	
	#c27 {
		margin-bottom: 0;
	}
	
	.button-pfeil {
		.arrow {
			.pfeil {
				stroke: var(--white);
			}
		}
		.dots {
			circle, ellipse {
				fill: var(--white);
			}
		}
	}

	@media screen and (min-width: 1024px) {
		padding: 0;
	}
}

footer {
	@media screen and (min-width: 1024px) {
		padding: 0 0 1.25rem 3.125rem;
		height: 840px;
		background: var(--blacktransparent) url('/typo3conf/ext/bau_werk13/Resources/Public/Images/01_Startseite/Hintergrund_Footer.webp') no-repeat left bottom/1920px auto;
	}
	@media screen and (min-width: 1480px) {
		height: 1120px;
		background-size: 2560px auto;
	}
}