/* Planung und Umsetzung
__________________________________________________________________________________________ */

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/02_Arbeitsbereiche/Planung_Umsetzung/Hintergrund_Planung-Umsetzung.webp') no-repeat center bottom/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 {
            justify-content: flex-end;
			.headline {
                padding: 5% 5% 0 12%;
				z-index: 3;
			}
		}

		.bubble-top {
			position: absolute;
			top: 12%;
			right: 0;
			width: 36.25rem;
			height: 20.375rem;
			z-index: 2;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Bubbles_oben.webp') no-repeat center/contain;
		}

		.bubble-bottom {
			position: absolute;
			bottom: -10%;
			right: 15%;
			width: 36.25rem;
			height: 20.375rem;
			z-index: 2;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Bubbles_unten.webp') no-repeat center/contain;
		}

		.bg-image {
			mask-image: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/form-maske_02.svg);	
			mask-size: 1920px auto;
			mask-repeat: no-repeat;
			mask-position: top right;
			&::before {
				content: none;
			}
		}

	}

    @media screen and (min-width: 1480px) {

		.bg-image {
			mask-size: 2560px auto;
		}

	}

}

@media (orientation: landscape) and (max-height: 700px) {
	.header__block {
		> .container {
			justify-content: center;
			.headline {
				padding: 0;
				img {
					max-height: 50vh;
				}
			}
		}

		.bubble-top, .bubble-bottom {
			display: none;
		}

		.bg-image {
			mask-image: none;
			&::before {
				background: rgba(0,0,0,0.5);
			}
		}
	}
}

/*** Visionen und Ziele ***/

.section01 {
    background: var(--white) url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Hintergrund_Section01.svg') no-repeat center 3.125rem/92.5rem auto;

    #c155 {
        text-align: center;
        h3 {
            max-width: 55rem;
            display: inline-block;
        }
    }

	@media screen and (min-width: 1480px) {
		min-height: 745px;

		#c155 {
			margin-top: 6.25rem;
		}
	}
}

/*** Ideenfindung und Reflexion ***/

.section02 {

    #c157 {
        text-align: center;
        h3 {
            max-width: 27.5rem;
            display: inline-block;
        }
    }

	#c160 {
		position: relative;
		&::before {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Kleckse.webp') no-repeat center/contain;
			mix-blend-mode: luminosity;
		}
		&::after {
			content: '';
			width: 90%;
			height: 80%;
			position: absolute;
			z-index: 1;
			top: 10%;
			left: 0;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Punkte.webp') no-repeat center/contain;
			mix-blend-mode: overlay;
		}

		.image {
			position: relative;
			&::after {
				content: '';
				width: 18%;
				height: 32%;
				position: absolute;
				z-index: 1;
				top: 0;
				right: 20%;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/02_Arbeitsbereiche/Planung_Umsetzung/Aufschrift-Baucontainer.webp') no-repeat center/contain;
				mix-blend-mode: multiply;
			}
		}
	}

    @media screen and (min-width: 1024px) {

		#c157 {
			margin: 0;
		}

        #c158.multicol.mc2.c35-65 {
            > .col:nth-child(1) {
                padding-top: 6.25rem;
            }
        }

    }

	@media screen and (min-width: 1280px) {
		#c157 {
			margin: 0 0 -3.125rem 0;
		}
	}

	@media screen and (min-width: 1480px) {

        #c158.multicol.mc2.c35-65 {
            > .col:nth-child(1) {
                padding-top: 9.375rem;
            }
        }

    }
    
}

/*** Fertigung und Montage ***/

.section03 {

	padding: 3.125rem 0;
    
    #c161 {
        text-align: center;
        h3 {
            max-width: 48.5rem;
            display: inline-block;
        }
    }

	#c162.multicol.mc2 {
		> .col:nth-child(2) {
			&::before {
				content: '';
				width: 4.6875rem;
				height: 6.25rem;
				position: absolute;
				top: 0;
				right: 0;
				background: url('/fileadmin/user_upload/02_Arbeitsbereiche/Planung_Umsetzung/DIN-Label.svg') no-repeat center/contain;
			}
		}
	}

	@media screen and (min-width: 1280px) {
		#c163 {
			left: -6.25rem;
			position: relative;
		}

		#c162.multicol.mc2 {
			> .col:nth-child(1) {
				&::before {
					content: '';
					width: 11.25rem;
					height: 6.875rem;
					position: absolute;
					top: 35%;
					right: 0;
					background: url('/fileadmin/user_upload/02_Arbeitsbereiche/Planung_Umsetzung/Pfeil_gestrichelt.svg') no-repeat center/contain;
				}
			}
			> .col:nth-child(2) {
				margin-top: -6.25rem;
			}
		}
	}

}