/* Projekte
__________________________________________________________________________________________ */

/*** Header ***/

.header__block {
	
	height: 100vh;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;

    &::before {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: linear-gradient(to top, rgba(253, 238, 217, 1), rgba(253, 238, 217, 0) 80%);
			z-index: -1;
		}
	
	> .container {
		height: calc(100vh - 150px);
		display: flex;
		justify-content: center;
		align-items: center;
	}

    .bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100vh - 156px);
		z-index: 1;
		background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/06_Projekte/Spielraeume/Hintergrund_Spielraeume.webp') no-repeat center bottom/2560px auto;
        
	}

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

		> .container {
			height: calc(100vh - 200px);
			.headline {
                padding: 10% 0 0 10%;
			}
		}
    }
}

/*** Content ***/

.content__block {
	margin-top: calc(100vh - 150px);

	.section00 {
		min-height: auto;
		padding: 50px 0 0 0;

		&::before {
			content: '';
			position: absolute;
			top: -6.25rem;
			left: 0;
			height: 6.25rem;
			width: 100%;
			background: var(--blacktransparent);

			mask-image: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Weiss_02.svg);
			mask-size: 2560px auto;
			mask-repeat: no-repeat;
			mask-position: top center;
		}

		.scroll-down {
			position: relative;
			width: 100%;
			text-align: center;
            z-index: 1;
            #scroll-down {
                cursor: pointer;
				transition: transform 0.3s;
				&:hover {
					transform: scale(1.3);
				}
            }
		}

	}

    .section01 {
        padding: 50px 0 100px 0;

        .section-header {
            padding-left: 4.0625rem;
            &::before {
                content: '';
                width: 2.8125rem;
                height: 4.0625rem;
                position: absolute;
                top: -1.25rem;
                left: 0;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/06_Projekte/Spielraeume/nummer1.svg') no-repeat center/contain;
                z-index: 1;
            }
        }

        .slider-wrap {
            margin-top: 3.125rem;
        }

        @media screen and (min-width: 1024px) {
            padding: 100px 0 150px 0;
            .section-header {
                margin: -9.375rem 0 9.375rem 0;
            }
        }
    }

    .section02 {
        padding: 50px 0 100px 0;
        background: rgba(0,0,0,0.95);
        &::before {
			content: '';
			position: absolute;
			top: -6.25rem;
			left: 0;
			height: 6.25rem;
			width: 100%;
			background: rgba(0,0,0,0.8);

			mask-image: url(/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Border-Top-Weiss_02.svg);
			mask-size: 2560px auto;
			mask-repeat: no-repeat;
			mask-position: top center;
		}

        .section-header {
            display: inline-block;
            &::after {
                content: '';
                width: 2.8125rem;
                height: 4.0625rem;
                position: absolute;
                top: -1.25rem;
                right: -4.0625rem;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/06_Projekte/Spielraeume/nummer2.svg') no-repeat center/contain;
                z-index: 1;
            }
        }

        .slider-wrap {
            margin-top: 3.125rem;
        }

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

    .section03 {

		#c145 /* Rahmen */ {
			position: relative;

			&::before {
				content: '';
				width: 3.4375rem;
				height: 3.4375rem;
				position: absolute;
				bottom: 200px;
				left: 100px;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Schraube-Kreuzschlitz.webp') no-repeat center/contain;
			}
			&::after {
				content: '';
				width: 4.0625rem;
				height: 4.0625rem;
				position: absolute;
				bottom: 0;
				left: 250px;
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Senkkopfschraube.webp') no-repeat center/contain;
			}

			.headline-image {
				text-align: center;
				position: relative;

				h2 {
					position: relative;
					max-width: 48.8125rem;
					display: inline-block;
				}
			}

			@media screen and (min-width: 768px) {
				.headline-image {

					&::before {
						content: '';
						width: 1.875rem;
						height: 1.875rem;
						position: absolute;
						bottom: 50px;
						left: 30%;
						background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Schraube-Sternschlitz.webp') no-repeat center/contain;
					}

					h2 {
						&::after {
							content: '';
							width: 3.4375rem;
							height: 3.4375rem;
							position: absolute;
							top: 50px;
							right: 50px;
							background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Schraube-Kreuzschlitz.webp') no-repeat center/contain;
						}
					}
				}
			}

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

				.headline-image {
					h2 {
						&::before {
							content: '';
							width: 4.0625rem;
							height: 4.0625rem;
							position: absolute;
							top: -6.25rem;
							left: 7.8125rem;
							background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/Senkkopfschraube.webp') no-repeat center/contain;
						}
					}
				}

			}
		}

	}

}