/* Team
__________________________________________________________________________________________ */

body {
    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Hintergrund_Bretter.svg') no-repeat center/cover;
    background-attachment: fixed;
}

/*** Header ***/

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

    @media screen and (min-width: 1280px) {
        height: calc(100vh + 6.25rem);
        > .container {
            .headline {
                position: relative;
                &::before {
                    content: '';
                    width: 282px;
                    height: 245px;
                    position: absolute;
                    top: -20%;
                    left: 10%;
                    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Strichmaennlein.svg') no-repeat center/contain;
                    z-index: 1;
                    transform: scale(0.8);
                }
                &::after {
                    content: '';
                    width: 267px;
                    height: 313px;
                    position: absolute;
                    bottom: -25%;
                    right: 5%;
                    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Strichmaennlein_Herz.svg') no-repeat center/contain;
                    z-index: 1;
                    transform: scale(0.8);
                }
            }
        }
    }
    @media screen and (min-width: 1480px) {
        > .container {
            .headline {
                &::before {
                    transform: scale(1);
                }
                &::after {
                    transform: scale(1);
                }
            }
        }
    }
}

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

/** H2 Überschriften **/

#c93, #c96 {
    @media screen and (min-width: 768px) {
        margin: 3.125rem 0 0 0;
    }
    @media screen and (min-width: 1280px) {
        margin: 6.25rem 0;
    }
    @media screen and (min-width: 1480px) {
        margin: 6.25rem 0 9.375rem 0;
    }
}

/*** Kreativität trifft Handwerdwerk ***/

#c98 {
    margin: 0 0 -2.5rem 0;
    h3 {
        max-width: 22.25rem;
    }
    @media screen and (min-width: 1280px) {
        margin: 0 0 -5rem 0;
    }
    @media screen and (min-width: 1480px) {
        padding-left: 5rem;
    }
}

.magischer-spiegel {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Form-Beige.svg') no-repeat bottom right/contain;
    .video {
        display: inline-block;
        width: 204px;
        height: 419px;
        position: relative;
        z-index: 1;
        margin: 0 0.9375rem 3.125rem 0.9375rem;
        &::before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/magischer-videospiegel.webp') no-repeat center bottom/contain;
        }
        .gras {
            pointer-events: none;
            position: absolute;
            width: 153px;
            height: 270px;
            left: -4.0625rem;
            bottom: -4.375rem;
            z-index: 3;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Gras_02.svg') no-repeat center bottom/contain;
        }
        .play {
            cursor: pointer;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 3;
			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;
			}
        }
        .glas {
			position: absolute;
			bottom: 10px;
			left: 0;
			width: 100%;
			height: 85%;
			z-index: 1;
			background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Glas.webp') no-repeat center/cover;
            mix-blend-mode: soft-light;
            clip-path: polygon(5% 0, 95% 0, 85% 100%, 15% 100%);
        }
        video {
            width: 100%;
            height: 85%;
            position: absolute;
            left: 0;
            bottom: 10px;
            clip-path: polygon(5% 0, 95% 0, 85% 100%, 15% 100%);
        }
    }

    .spiegel {
        display: none;
        width: 280px;
        height: 606px;
        position: relative;
        z-index: 1;
        margin: 0 0.9375rem;
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/magischer-spiegel.webp') no-repeat center bottom/contain;
        &::before {
            content: '';
            width: 10rem;
            height: 5.9375rem;
            position: absolute;
            top: -5rem;
            right: -4.375rem;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Pfeil.svg') no-repeat center bottom/contain;
            z-index: 1;
            opacity: 1;
            transition: opacity 0.5s;
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/magischer-spiegel-hover.webp') no-repeat center bottom/contain;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .gras {
            pointer-events: none;
            position: absolute;
            width: 450px;
            height: 383px;
            right: -140px;
            bottom: -110px;
            z-index: 3;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Gras_01.svg') no-repeat center bottom/contain;
        }
        .dots {
            position: absolute;
            width: 35rem;
            height: 18.75rem;
            top: 3.4375rem;
            left: 50%;
            margin-left: -19.5rem;
            z-index: -1;
            transform: scale(0);
            transition: transform 0.5s;
            &::before {
                content: '';
                width: 222px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/punkte_oben.svg') no-repeat center bottom/contain;
            }
            &::after {
                content: '';
                width: 222px;
                height: 100px;
                position: absolute;
                bottom: 0;
                right: 0;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/punkte_unten.svg') no-repeat center bottom/contain;
            }

        }

        &:hover {
            .dots {
                transform: scale(1);
            }
            &::before {
                opacity: 0;
            }
            &::after {
                opacity: 1;
            }
        }
    }

    @media screen and (min-width: 600px) {
        margin: 0 0 6.875rem 0;
        .spiegel {
            display: inline-block;
        }
    }
    @media screen and (min-width: 768px) {
        margin: 0;
        .spiegel {
            display: none;
        }
    }
    @media screen and (min-width: 1280px) {
        margin: 0 0 6.875rem 0;
        .spiegel {
            display: inline-block;
        }
    }
    @media screen and (min-width: 1480px) {
        width: 51.25rem;
        left: -6.25rem;
    }
}

/*** Talente mit Fantasie ***/

#c95.multicol.mc2 {
    > .col:nth-child(1) {
        order: 2;
    }
    > .col:nth-child(2) {
        order: 1;
    }
    @media screen and (min-width: 768px) {
        > .col:nth-child(1) {
        order: 1;
        }
        > .col:nth-child(2) {
            order: 2;
        }
    }
}

.inforahmen {
    position: relative;
    width: 600px;
    height: 813px;
    left: 50%;
    margin-left: -400px;
    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Inforahmen.webp') no-repeat center/contain;
    }
    &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Form-Gruen.svg') no-repeat right bottom 25px/440px auto;
    }
    .play {
        z-index: 3;
        cursor: pointer;
		position: absolute;
		width: 210px;
        height: 10rem;
        bottom: 270px;
        left: 50%;
        margin-left: 5px;
		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 {
        z-index: 1;
        width: 210px;
        height: 10rem;
        position: absolute;
        bottom: 270px;
        left: 50%;
        margin-left: 5px;
    }

    @media screen and (min-width: 1480px) {
        position: relative;
        width: 882px;
        height: 1195px;
        left: -150px;
        margin-left: 0;
        &::before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Inforahmen.webp') no-repeat center/contain;
        }
        &::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Team/Form-Gruen.svg') no-repeat right bottom 50px/660px auto;
        }
        .play {
            z-index: 3;
            cursor: pointer;
            position: absolute;
            width: 310px;
            height: 240px;
            bottom: 395px;
            right: 120px;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/play-icon.svg') no-repeat center/2.8125rem auto;
            left: auto;
            margin: 0;
            &.pause {
				background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/pause-icon.svg') no-repeat center/auto 1.875rem;
			}
        }
        video {
            z-index: 1;
            width: 310px;
            height: 240px;
            position: absolute;
            bottom: 395px;
            right: 120px;
            left: auto;
            margin: 0;
        }
    }
}