/* CONTAINER */
.home .a-d-hero {
    overflow:unset;
    }

    /*BuchstabenWrapper*/
    body.home div.a-d-hero div.container-a,
    body.home div.a-d-hero div.container-d{
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
        z-index: 1;
        align-items: center;
        margin-top: -50px;
        }
        .a-d-hero div.container-a canvas{
            left: -90%; 
        }
        .a-d-hero div.container-d canvas{
            left: 90%; 
        }
        .home .hero-wrap > div p{
            margin-bottom: 0;
            bottom: 20px;
            position: absolute;
            transition: none;
            hyphens: none;
            -webkit-hyphens: none;
            -ms-hyphens: none;
            }
            .home div.a-d-hero p a{
                text-transform: uppercase;
                text-decoration: none;
                color:white;
                letter-spacing: var(--letterspacingversalien);
            }
            .home div.a-d-hero div.container-d p a{
                color: var(--neonGreen);
            }

        /*Trenner*/
        .hero-wrap .a-d-hero{
            flex-grow: 1;
            margin-bottom: 30px;
            height: 100%;
            }
            .hero-wrap .a-d-hero > .trenner{
                flex: 10% 0 0;
                width:5px;
                flex-grow: 0 !important;
                height:100%;
            }
            .hero-wrap .a-d-hero > .trenner .hero-trenner{
                transform: rotate(10deg);
                box-shadow: 40px 0 55px -20px rgb(0 0 0 / 40%), 15px 0 15px -10px rgb(0 0 0 / 15%);
                width: 50px;
                height: 100%;
                margin:0 auto;
                left:-50px;
            }
            .hero-wrap .a-d-hero > .trenner .hero-trenner:before,
            .hero-wrap .a-d-hero > .trenner .hero-trenner:after{
                content:"";
                width: 100%;
                height: 100%;
                position: absolute;
            }
            /*verdecken*/
            .hero-wrap .a-d-hero > .trenner .hero-trenner:after{
                background: var(--middleBlue);
            }
            /*Schatten*/
            .hero-wrap .a-d-hero > .trenner .hero-trenner:before{
                border-radius: 50%;
                background: black;
                opacity: 0.3;
                -webkit-filter: blur(60px);
                -webkit-transform: scale(0.5, 0.8);
                left: 45px;
            }

/* CURSOR */
.hover-cursor{
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: none;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-family: var(--fontFamilyBold);
    text-transform: uppercase;
    color: #1B2431 !important;
    letter-spacing: 0.1em;
    box-shadow: 0px 20px 20px #00000066;
    font-size: var(--paragraph);
    }
    .hover-cursor.active{
        display: flex;
        cursor: none;
    }
    #design-cursor{
        background: #BFF558;
    }
    #architektur-cursor{
        background: #FFFFFF;
    }

@media screen and (max-width: 1200px) {
    /*Cursor*/
    .hover-cursor{
        display:flex;
        top: 85px !important;
    }
    #architektur-cursor{
        right: 12% !important;
        left: auto !important;
    }
    #design-cursor{
        left: 25% !important;
    }

    body > .hover-cursor{
        display:none
    }
}

@media screen and (max-width: 834px) {
    body.home .hero-wrap {
        padding: 0;
        }

        body.home div.a-d-hero{
            flex-direction: column;
            margin-bottom: 0;
            }
            body.home div.a-d-hero.wp-block-columns:not(.is-not-stacked-on-mobile) div.container-a:not(:only-child),
            body.home div.a-d-hero.wp-block-columns:not(.is-not-stacked-on-mobile) div.container-d:not(:only-child){
                flex-basis: auto !important;
            }
            body.home div.a-d-hero div.container-a,
            body.home div.a-d-hero div.container-d{
                height: 30%;
                flex-direction: row;
                align-items: center;
                margin-top: 0;
                }
            body.home div.a-d-hero div.container-a{
                flex-direction: row-reverse;
            }

                .home .hero-wrap div p{
                    min-width: 320px;
                    margin-bottom: 40px;
                    position: relative;
                }
        
        .hover-cursor{
            top: 100px !important;
        }
        #architektur-cursor{
            right: 59% !important;
        }
        #design-cursor{
            left: 63% !important;
        }
        
        /*Trenner*/
        .hero-wrap .a-d-hero > .trenner{
            position: absolute;
            left: 47%;
            transform: rotate(65deg);
            top:12%;
            height: 65%;
        }
        
        /*Projekte & News*/
        .projekte-news-link{
            display:none
        }
}

@media screen and (max-width: 768px) {
    .hover-cursor{
        top: 80px !important;
    }
    #architektur-cursor{
        right: 63% !important;
    }
    #design-cursor{
        left: 67% !important;
    }    
}

@media screen and (max-width: 601px) {
    /*Text*/
    .home .hero-wrap div p{
        min-width: 280px;
        }
        .home .hero-wrap div p span{
            display:none;
        }
    /*Buchstabe*/
    .home .a-d-hero .rendered-letter {
        width: 110%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 150%;
        background-position: center;
        transition: none;
    }

    .home .a-d-hero .container-a .rendered-letter {
        margin-right: -15%;
        background-image: url(../images/rendered-a.png);
        left:-90%
    }
    .home .a-d-hero .container-d .rendered-letter {
        margin-left: -15%;
        background-image: url(../images/rendered-d.png);
        left: 90%;
    }
    /*Cursor*/
    .hover-cursor{
        top:60px !important;
        width: 70px;
        height: 70px;
    }
    #architektur-cursor{
        right: 63% !important;
    }
    #design-cursor{
        left: 64% !important;
    } 
}


@media screen and (max-width: 480px) {
    .home div.a-d-hero div p {
        min-width: 180px;
        } 
        .home div.a-d-hero div.container-d p a{
            -webkit-hyphens: none;
            -ms-hyphens: none;
            hyphens: none;
            }

    /*Cursor*/
    .hover-cursor{
        top:55px !important;
    }
    #architektur-cursor{
        right: 57% !important;
    }
    #design-cursor{
        left: 61% !important;
    } 
}

@media screen and (max-width: 428px) {
    /*Trenner*/
    .hero-wrap .a-d-hero > .trenner{
        top: 14%;
        height: 58%;
        left: 45%;
    }

    /*Cursor*/
    .hover-cursor{
        top:70px !important;
    }
    #architektur-cursor{
        right: 54% !important;
    }
    #design-cursor{
        left: 62% !important;
    } 
}

@media screen and (max-width: 375px) {
    /*Cursor*/
    #design-cursor{
        left: 65% !important;
    } 
}

@media screen and (max-width: 375px) {
    /*Cursor*/
    #design-cursor{
        left: 68% !important;
    } 
}