/* Werkhausmanagement
__________________________________________________________________________________________ */

/*** Header ***/

.header__block {
    width: 100%;
    height: 100vh;
    z-index: 1;
    position: relative;
    
    > .container {
        height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
    }

	.bg-image {
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Hintergrund-Werkhaus-Beulwitz.webp') no-repeat top center/cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        &::before {
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
			mix-blend-mode: multiply;
			background: linear-gradient(to bottom, rgba(132, 146, 163, 0.75), rgba(132, 146, 163, 0) 100%);
            background: rgba(0,0,0,0.5);
		}
    }

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

		height: calc(100vh + 6.25rem);

		.tuer {
			position: absolute;
			bottom: 0;
			right: 150px;
			width: 350px;
			height: 648px;
			z-index: 2;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Tuer.webp') no-repeat bottom 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) {

		.tuer {
			right: 220px;
			width: 450px;
			height: 833px;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Tuer.webp') no-repeat bottom center/contain;
		}

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

	}
}

@media (orientation: landscape) and (max-height: 700px) {
	.header__block {
		> .container {
			
			.headline {
				img {
					max-height: 50vh;
				}
			}
		}
		.tuer {
			display: none;
		}
		.bg-image {
			mask-image: none;
			&::before {
				content: '';
				background: rgba(0,0,0,0.5);
			}
		}
	}
}

section.content__block {
    z-index: 2;
    position: relative;
}

/*** Beteiligung und Integration ***/

.section01 {
	padding-bottom: 0;
	#c66.multicol.mc2.c60-40 {
		 > .col:nth-child(1) {
			padding: 50px 0 0 0;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Hintergrund-Fenster.webp') no-repeat center top/contain;
		 }
		 > .col:nth-child(2) {
			> div {
				position: relative;
				z-index: 1;
			}
			&::after {
				content: '';
				position: relative;
				display: block;
				width: 100%;
				height: 330px;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Illustration_Hocker.webp') no-repeat top left/contain;
				margin-top: -50px;
			}
			
		 }
	}

	.fenster {
		width: 100%;
		position: relative;
		z-index: 3;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		.fenster1 {
			display: none;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Fenster1.webp') no-repeat top center/contain;
				z-index: 1;
			}
		}
		.fenster2 {
			position: relative;
			display: inline-block;
			width: 225px;
			height: 300px;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Fenster2.webp') no-repeat top center/contain;
				z-index: 2;
			}
			.play {
				cursor: pointer;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/play-icon.svg') no-repeat center/2.8125rem auto;
				&.pause {
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/pause-icon.svg') no-repeat center/auto 1.875rem;
				}
			}
			video {
				clip-path: polygon(15% 15%, 97% 1%, 95% 95%, 5% 95%);
			}
		}
	}

	@media screen and (min-width: 480px) {
		
		.fenster {
			.fenster2 {
				width: 300px;
				height: 400px;
			}
		}
	}

	@media screen and (min-width: 1280px) {
		
		.fenster {
			max-width: 650px;
			margin: 0 auto;
			justify-content: space-between;
			.fenster1 {
				display: inline-block;
				position: relative;
				width: 250px;
				height: 335px;
				img {
					clip-path: polygon(15% 15%, 97% 1%, 95% 95%, 5% 95%);
				}
			}
			.fenster2 {
				width: 350px;
				height: 470px;
			}
		}
	}

	@media screen and (min-width: 1480px) {
		
		.fenster {
			max-width: 787px;
			.fenster1 {
				width: 300px;
				height: 400px;
			}
			.fenster2 {
				width: 450px;
				height: 600px;
			}
		}
	}

	@media screen and (min-width: 1480px) {
		#c66.multicol.mc2.c60-40 {
			> .col:nth-child(1) {

			}
			> .col:nth-child(2) {
				> div {

				}
				&::after {
					content: '';
					position: relative;
					display: block;
					width: 100%;
					height: 430px;
					background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Illustration_Hocker.webp') no-repeat top left/contain;
					margin-left: -100px;
				}
				
			}
		}
	}
	
}

/*** Nachhaltigkeit ***/

.section02 {
	
	#c70 {
		text-align: center;
		h3 {
			max-width: 600px;
			display: inline-block;
		}
	}
	
}

/*** Gesellschaftliche Teilhabe ***/

.section03 {
	
	#c78 {
		max-width: 580px;
		margin: 0 auto;
	}
	
	/** 1col **/
	#c77 {
		position: relative;
		padding: 6.25rem 0 0 0;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(100% - 220px);
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Werkhausmanagement/Muster-Mauer.svg') repeat top center/1460px auto;
			z-index: 0;
			transform: rotate(-3deg);
		}
		
		> div {
			position: relative;
			z-index: 1;
		}
		
		h3 {
			font-family: var(--font);
			font-size: 1.0625rem;
			font-weight: 700;
			letter-spacing: 0.18rem;
			text-transform: uppercase;
			margin: 0 0 1.5625rem 0;
			position: relative;
		}
	}
	
	/** Logos **/
	#c80 {
		transform: rotate(-3deg);
		margin: 3.75rem 0 0 0;
		.ce-image {
			.ce-gallery {
				.ce-outer {
					float: none;
					width: 100%;
					right: auto;
					.ce-inner {
						float: none;
						width: 100%;
						right: auto;
						.ce-row {
							width: calc(100% + 1.25rem);
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							.ce-column {
								width: calc(100%/2 - 20px);
								border: 1px solid #E7E7E7;
								margin: 0 20px 20px 0;
								text-align: center;
								height: 120px;
								background: var(--white);
								.image {
									display: inline-block;
									position: relative;
									width: 100%;
									height: 100%;
									padding: 40px 20px;
									img {
										object-fit: contain;
										width: 100%;
										height: 100%;
									}
								}

								@media screen and (min-width: 640px) {
									width: calc(100%/3 - 20px);
									height: 150px;
								}
								@media screen and (min-width: 960px) {
									width: calc(100%/4 - 20px);
									height: 180px;
								}
								@media screen and (min-width: 1024px) {
									width: calc(100%/5 - 20px);
								}

							}
						}
					}
				}
			}
		}
	}
	
}