/* Von Kindern für Kinder 
__________________________________________________________________________________________ */

/*** Mädchen ***/

.figure__block {
    display: none;
    @media screen and (min-width: 1280px) {
        display: block;
        pointer-events: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 3;
        right: 0;
        bottom: 0;
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Maedchen.webp') no-repeat bottom right/540px auto;
    }
    @media screen and (min-width: 1480px) {
        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Maedchen.webp') no-repeat bottom right/640px auto;
    }
}

/*** 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/Von-Kindern-fuer-Kinder/Hintergrund-Kinder-fuer-Kinder.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 (orientation: portrait) {
        .container {
            .headline {
                .dsk {
                    display: none;
                }
                .mbl {
                    display: block;
                }
            }
        }
    }

    @media (orientation: landscape) {
        .container {
            .headline {
                .dsk {
                    display: block;
                }
                .mbl {
                    display: none;
                }
            }
        }
    }
    */

    @media screen and (min-width: 1280px) {
        height: calc(100vh + 6.25rem);
        /*
        .container {
            align-items: flex-end;
            .headline {
                .dsk {
                    display: block;
                }
                .mbl {
                    display: none;
                }
            }
        }
        */

        > .container {
            .headline {
                padding-top: 25vh;
                padding-right: 30%;
            }
        }

        .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) {

         > .container {
            .headline {
                padding-right: 25%;
            }
        }

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

	}
}

@media (orientation: landscape) and (max-height: 700px) {
	.header__block {
		> .container {
			
			.headline {
				img {
					max-height: 50vh;
				}
			}
		}

		.bg-image {
			mask-image: none;
			&::before {
				content: '';
				background: rgba(0,0,0,0.5);
			}
		}
	}
}

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

/*** Kreative Mitmachaktionen ***/

.section01 {
    padding-bottom: 100px;
	#c83 {
        position: relative;
        z-index: 1;
        &::after {
            content: '';
            width: 8.5rem;
            height: 8.5rem;
            position: absolute;
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/deko-form-gruen.svg') no-repeat center/contain;
            top: -4.6875rem;
            left: -4.6875rem;
            z-index: -1;
        }
    }

    @media screen and (min-width: 768px) {
        padding-bottom: 100px;
    }

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

/*** Handwerkliche Fähigkeiten ***/

.section02 {
    padding: 0;

    .top {
        background: var(--lightyellow);
        position: relative;
        img {
            max-width: 790px;
            position: relative;
        }
    }

    .bottom {
        background: var(--lightyellow);
        padding: 0 0 50px 0;
        .container {
            max-width: 39.6875rem;
        }
    }

    
	#c85 {
        text-align: right;
        margin: 0 0 1.5625rem 0;
        h3 {
            max-width: 30rem;
            display: inline-block;
        }
    }

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

        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Hintergrund-Formen.webp') no-repeat center/1920px auto;
        background-attachment: fixed;
        padding: 0;

        .top {
            background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Hintergrund-Loch.svg') no-repeat top center/2560px auto;
            height: 455px;
            position: relative;
            img {
                max-width: 790px;
                position: relative;
                top: -150px;
            }

            &::after {
                content: '';
                position: absolute;
                bottom: -7.8125rem;
                left: 0;
                width: 580px;
                height: 326px;
                background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Kleckse.webp') no-repeat center/contain;
                z-index: 1;
                filter: grayscale(1);
            }
        }

    }


}

/*** Orte des Miteinanders ***/

.section03 {
    padding-top: 100px;

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

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

        background: url('/typo3conf/ext/bau_werk13/Resources/Public/Images/03_Leistungen/Von-Kindern-fuer-Kinder/Hintergrund-Ranis-frueher.webp') no-repeat center/2560px auto;
        background-attachment: fixed;

    }
}

/*** Footer ***/

footer {
    @media screen and (min-width: 1280px) {
        background: none;
        z-index: 10;
    }
}