/* Projekte (Detailseite)
__________________________________________________________________________________________ */

body {
    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/06_Projekte/Hintergrund-Bretter.svg') no-repeat center/cover;
    background-attachment: fixed;
}

main {
    padding-top: 150px;
     @media screen and (min-width: 1280px) {
        padding-top: 250px;
     }
}

/*** Header ***/

.header__block {
    padding-bottom: 100px;
    .section-header {
        font-family: var(--font);
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: 0.18rem;
        text-transform: uppercase;
        margin: 0;
        position: relative;
    }
    @media screen and (min-width: 1024px) {
        h1 {
            max-width: 45.625rem;
        }
    }
}

/*** Slider ***/

.section01 {
    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_03.svg);
		mask-size: 2560px auto;
		mask-repeat: no-repeat;
		mask-position: top center;
	}
    &::after {
		content: '';
		position: absolute;
		bottom: -6.25rem;
		left: 0;
		height: 6.25rem;
		width: 100%;
		background: var(--blacktransparent);

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

/*** Beschreibung ***/

.section02 {
    padding: 150px 0 50px 0;
    .multicol {
        position: relative;
        width: 100%;
        .col {
            width: 100%;
            position: relative;
        }
        .col.description {
            margin: 0 0 50px 0;
        }
        .col.info {
            min-height: 540px;
            display: flex;
            justify-content: center;
            align-items: center;
            &::after {
                content: '';
                width: 600px;
                height: 540px;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -300px;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/06_Projekte/Hintergrund-Projektinfos.svg') no-repeat center/contain;
                z-index: -1;
            }
        }
    }

    @media screen and (min-width: 768px) {
        .multicol {
            .col {
                width: 50%;
            }
            .col.description {
                .button-pfeil {
                    text-align: right;
                }
            }
        }
    }

    @media screen and (min-width: 1024px) {
        .multicol {
            .col.description {
                width: 60%;
                padding: 50px 50px 0 0;
            }
            .col.info {
                width: 40%;
                &::after {
                content: '';
                    margin-left: -250px;
                }
            }
        }
    }

    @media screen and (min-width: 1480px) {
        .multicol {
            .col.description {
                padding: 50px 150px 0 150px;
            }
            .col.info {
                &::after {
                content: '';
                    margin-left: -300px;
                }
            }
        }
    }
}