/* Materialien
__________________________________________________________________________________________ */

body {
    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Hintergrund_Holz.svg') no-repeat center/cover;
    background-attachment: fixed;
    @media screen and (min-width: 1280px) {
        background-size: 95% auto;
    }
}

/*** 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) {

        > .container {
            .headline {
                padding-top: 10%;
                position: relative;
                &::before {
                    content: '';
                    width: 15rem;
                    height: 15rem;
                    border-radius: 100%;
                    background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Rahmen_Blau.webp') no-repeat center/contain;
                    position: absolute;
                    top: 5.625rem;
                    left: 50%;
                    margin-left: -3.5rem;
                }
            }
        }
    }
}

/*** Einleitung ***/

.section01 {
    padding: 0 0 6.25rem 0;

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

    .video {
        width: 100%;
        height: 23.75rem;
        position: relative;
        margin: 0 0 3.125rem 0;
        .small {
            display: none;
            position: relative;
            width: 15rem;
            height: 15rem;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Rahmen_Bunt.webp') no-repeat center/contain;
        }
        .vid {
            position: absolute;
            width: 23.75rem;
            height: 23.75rem;
            border-radius: 100%;
            overflow: hidden;
            top: 0;
            left: 50%;
            margin-left: -12.03125rem;
            &::before {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Rahmen_Video.webp') no-repeat center/contain;
                z-index: 2;
            }
            .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;
            }
            video {
                width: 21.75rem;
                height: 21.75rem;
                border-radius: 100%;
                margin: 0.9375rem 0 0 0.9375rem;
            }
        }

        @media screen and (min-width: 768px) {
            width: 580px;
            height: 500px;
            margin: 0 auto;
            margin-bottom: 3.125rem;
            .small {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
            }
            .vid {
                top: auto;
                left: 0;
                bottom: 0;
                margin: 0;
            }
        }

        @media screen and (min-width: 1024px) {
            position: absolute;
            top: -150px;
            right: -100px;
            margin: 0;
        }

        @media screen and (min-width: 1480px) {
            width: 625px;
            height: 550px;
            top: -350px;
        }
    }

    #c102.multicol.mc2 {
        @media screen and (min-width: 1024px) {
            width: calc(100% - 500px);
            > .col {
                width: 100%;
            }
            > .col:nth-child(2) {
                padding-top: 1.5625rem;
            }
        }
        @media screen and (min-width: 1280px) {
            > .col {
                width: calc(50% - 25px);
            }
            > .col:nth-child(2) {
                padding-top: 2.5rem;
            }
        }
        @media screen and (min-width: 1480px) {
            width: calc(100% - 600px);
            > .col {
                width: calc(50% - 25px);
            }
            > .col:nth-child(2) {
                padding-top: 5rem;
            }
        }
    }

}

/*** Material und Konstruktion ***/

.section02 {
    padding-bottom: 6.25rem;
    > .container {
        max-width: 1180px;
    }

    #c117 {
        text-align: center;
        h2 {
            max-width: 56.875rem;
            display: inline-block;
        }
        &::after {
            content: '';
            position: absolute;
            top: -10.625rem;
            right: -8.75rem;
            width: 28.125rem;
            height: 16.25rem;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Blaetter_02.svg') no-repeat center/contain;
            transform: scale(0.8);
        }

        @media screen and (min-width: 640px) {
            &::after {
                transform: scale(1);
                top: -7.5rem;
            }
        }

        @media screen and (min-width: 1024px) {
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -12.5rem;
                width: 18.75rem;
                height: 25.6875rem;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Blaetter_01.svg') no-repeat center/contain;
            }
            &::after {
                top: -6.25rem;
                right: 0;
            }
        }
    }

    #c105 {
        position: relative;
         &::after {
            content: '';
            position: absolute;
            top: -2.5rem;
            right: -7.8125rem;
            width: 6.875rem;
            height: 11.25rem;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Blaetter_03.svg') no-repeat center/contain;
        }
    }
}

/*** Verbindungen ***/

.section03 {

    @media screen and (min-width: 768px) {
        padding: 6.25rem 0;
    }

    #c119 {
        text-align: center;
        h2 {
            max-width: 25rem;
            display: inline-block;

            &::before {
                content: '';
                width: 4.0625rem;
                height: 4.0625rem;
                position: absolute;
                top: -5rem;
                left: -7.5rem;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Senkkopfschraube.webp') no-repeat center/contain;
            }
            &::after {
                content: '';
                width: 3.4375rem;
                height: 3.4375rem;
                position: absolute;
                bottom: 3.4375rem;
                right: -4.375rem;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Schraube-Kreuzschlitz.webp') no-repeat center/contain;
            }
        }
        @media screen and (min-width: 768px) {
            text-align: right;
            padding-right: 100px;
        }
        @media screen and (min-width: 1280px) {
            padding-right: 150px;
        }
    }

    #c120.multicol.mc2 {
        margin-top: -11.25rem;
        > .col:nth-child(1) {
            order: 2;
        }
        > .col:nth-child(2) {
            order: 1;
        }
        @media screen and (min-width: 768px) {
            margin-top: 0;
            > .col:nth-child(1) {
            order: 1;
            width: calc(100% - 300px);
            padding-top: 100px;
            max-width: 880px;
            }
            > .col:nth-child(2) {
                order: 2;
                margin-top: -200px;
                width: 300px;
            }
        }
        @media screen and (min-width: 1280px) {
            &::after {
                content: '';
                width: 1.875rem;
                height: 1.875rem;
                position: absolute;
                bottom: 0;
                right: 0;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Schraube-Sternschlitz.webp') no-repeat center/contain;
            }
        }
        @media screen and (min-width: 1480px) {
            margin-top: 0;
            > .col:nth-child(1) {
            width: calc(100% - 600px);
            }
            > .col:nth-child(2) {
                margin-top: -150px;
                width: 600px;
            }
        }
    }

    .video-holzrahmen {
        position: relative;
        display: inline-block;
        width: 37.5rem;
        height: 40.3125rem;
        transform: scale(0.8);
        left: 50%;
        margin-left: -20.625rem;
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Holzstueck.webp') no-repeat center/contain;
        }
        &::before {
            content: '';
            position: absolute;
            top: 4.375rem;
            right: 4.375rem;
            width: 24.0625rem;
            height: 24.0625rem;
            z-index: 0;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Rahmen_Video_02.webp') no-repeat center/contain;
            z-index: 3;
        }
        .play {
            cursor: pointer;
            position: absolute;
            top: 4.375rem;
            right: 4.375rem;
            width: 24.0625rem;
            height: 24.0625rem;
            z-index: 4;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/Layout/play-icon.svg') no-repeat center/2.8125rem auto;
        }
        video {
            position: absolute;
            width: 21.75rem;
            height: 21.75rem;
            border-radius: 100%;
            z-index: 2;
            top: 5.3125rem;
            right: 5.3125rem;
        }
        @media screen and (min-width: 768px) {
            left: auto;
            margin: 0;
            right: 100px;
        }
        @media screen and (min-width: 1280px) {
            right: 240px;
        }
        @media screen and (min-width: 1480px) {
            transform: scale(1);
            right: auto;
        }
    }

    /* Texte */

    #c106 {
        @media screen and (min-width: 1024px) {
            position: relative;
            &::before {
                content: '';
                width: 1.875rem;
                height: 1.875rem;
                position: absolute;
                top: -70px;
                left: 100px;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Schraube-Sternschlitz.webp') no-repeat center/contain;
            }
            p {
                max-width: 36.25rem;
            }
        }
    }

    #c107 {
        @media screen and (min-width: 1024px) {
            position: relative;
            display: flex;
            justify-content: flex-end;
            &::before {
                content: '';
                width: 4.0625rem;
                height: 4.0625rem;
                position: absolute;
                top: -5rem;
                right: -5rem;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Senkkopfschraube.webp') no-repeat center/contain;
            }
            p {
                max-width: 26.25rem;
            }
        }
    }

}

/*** Illustration ***/

.section.illustration {
    height: 400px;
    padding: 0;
    margin-top: 100px;
    &::after {
        content: '';
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: calc(100% + 100px);
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Illustration_Seile-Netze.webp') no-repeat center top/1900px auto;
        z-index: 2;
    }

    @media screen and (min-width: 768px) {
        height: 965px;
        margin-top: 200px;
        &::after {
            top: -200px;
            height: calc(100% + 200px);
        }
    }

    @media screen and (min-width: 1480px) {
        height: 1272px;
        margin-top: 300px;
        &::after {
            content: '';
            position: absolute;
            top: -300px;
            left: 0;
            width: 100%;
            height: calc(100% + 300px);
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/04_Ueber-Uns/Materialien/Illustration_Seile-Netze.webp') no-repeat center top/2560px auto;
            z-index: 2;
        }
    }
}

/*** Seile und Netze ***/

.section04 {
    padding: 50px 0;
    min-height: auto;
    #c118 {
        text-align: center;
        h2 {
            max-width: 29.125rem;
            display: inline-block;
        }
    }

    @media screen and (min-width: 768px) {
        > .container {
            padding-right: 40%;
            margin-top: -550px;
        }
        #c108 {
            column-count: 1;
        }
    }

    @media screen and (min-width: 1024px) {
        > .container {
            margin-top: -600px;
        }
    }

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

        }
        #c108 {
            column-count: 2;
            p {
                break-inside: avoid;
            }
        }
    }

    @media screen and (min-width: 1480px) {
        > .container {
            padding-right: 550px;
            margin-top: -750px;
        }
        #c108 {
            column-count: 2;
        }
    }

    /*
    @media screen and (min-width: 1480px) {
        > .container {
            margin-top: -750px;
            padding-right: 35%;
        }
    }
        */
}

/*** Weitere Inhalte ***/

.section05 {

    @media screen and (min-width: 1024px) {
        padding-top: 9.375rem;
    }
    
    #c114 {
        @media screen and (min-width: 1480px) {
            padding-left: 6.25rem;
            padding-top: 6.25rem;
        }
    }

}