/*Global Setup*/

*{
    font-family:'Neue Haas Grotesk Display Pro', sans-serif;
}


/* Background and child setup */

body{
    background-color: #663d39;

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    cursor: none;       /* Cursor */


    /* Deaktiviert Text Auswahl im Browser */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* mainframe for the whole structure */

.mainbody{
    width: 85%;
    height: 95vh;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* textarea for the title*/

.title{
    width: 100%;
    height: 100%;
    rotate: 0deg;

    font-size: clamp(12rem, 10vw + 10rem, 24rem);
    font-weight: bold;
    letter-spacing: 0px;
    line-height: calc(0.8em + 0.1vw);
    writing-mode: horizontal-tb;
    color: #362724;
    text-align: center;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    animation:titel-intro 2s forwards;
    /* transition-duration: 0.5s; */
}
.title:hover{
    color: #b9322e;
    letter-spacing: 3px;
    justify-content: flex-end;
    transition-duration: 0.5s;
}


/* textarea for the red section */

.redbox{
    
    padding-left: 3%;
    padding-bottom: 20px;
    padding-top: 20px;
    margin: 0%;
    height: 40%;
    width: 100%;
    
    font-family: Calibri,'Gill Sans', 'Gill Sans MT',  'Trebuchet MS', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);         /*clamp(1.5rem, 3vw, 2.5rem)*/
    font-weight: bold;
    line-height: clamp(1rem, 3vw, 2rem);        /*clamp(1rem, 3vw, 2rem)*/
    background-color: #b9322e;
    z-index: 2;
    
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;

    animation-name: redbox-intro;
    animation-duration: 3s;

    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
.redbox:hover{
    width: 65%;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.red1{
    color: #362724;
    animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    letter-spacing: 0px;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
}
.red1:hover{
    color: #663d39;
    letter-spacing: 3px;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
}

#customCursor {
    display:initial; /* Versteckt den benutzerdefinierten Cursor */
}

/* Style für den runden Cursor */

#customCursor {
    width: 40px;
    height: 40px;
    /* border-radius: 50%; */
    background-color: #362724;
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: #362724;
    pointer-events: none;
    z-index: 1000;
    display: block;  /* Immer sichtbar, außer in Tablet-View */
    animation-name: curs-rot;
    animation-duration: 4s;
    animation-iteration-count: infinite;


}
@keyframes curs-rot {
    0% {
        rotate: 0deg;
        animation-timing-function: linear;
    }
    100% {
        rotate: 360deg;
    }
}


/*Tablet-Mode*/

@media (max-width: 900px) { 
    
    body{
        cursor: auto;
    }
    
    .mainbody{
        rotate: 180deg;
        height: 95vh;

        flex-direction: row-reverse;
        align-items:flex-start;
        justify-content: flex-end;
        writing-mode: horizontal-tb;
    }
    .title{
        padding-top: 0%;
        padding-bottom: 0%;
        height: 100%;
        width: 50vw;
        rotate: 0deg;

        font-size: 30vw;
        text-align: left;
        writing-mode: vertical-rl;
        line-height: 25vw;

        display: flex;
        flex-direction: row;
        transform-origin: center;
        animation:titel-intro 2s;
    }
    .redbox{
        
        height: 25%;
        width: 100%;
        rotate: 180deg;
        padding-left: 2%;
        
        font-size: 3vw;
        line-height: 3vw;
        
        flex-direction: column;
        align-items: left;
    }
    .redbox:hover{
        height: 20%;
    }
    .title:hover{
        justify-content: flex-end;
    }
}

#customCursor {
    display: none; /* Versteckt den benutzerdefinierten Cursor */
}


/*Phone-Mode*/

@media screen and (max-width: 600px) { 
    .mainbody{
        height: 95vh;
        width: 80%;
        padding: 5%;
        rotate: 180deg;

        writing-mode: horizontal-tb;
        
        flex-direction: column-reverse;
        align-items:center;
        justify-content: flex-end;
    }
    .title{
        height: auto;
        
        font-size: 35vw;
        line-height: 30vw;
    }
    .redbox{
        height: 40%;
        width: 100%;
        padding-left: 5%;
        rotate: 180deg;
        
        font-size: 4vw;
        line-height: 4vw;

        flex-direction: column;
        align-items: left;
    }
    .redbox:hover{
        height: 40%;
    }
}


/* Animation Keyframes */

@keyframes titel-intro{
    0%{
        transform: translate(0, -1000px);
        opacity: 0;
        
    }
    70%{
        opacity: 0.7;
    }
    100%{
        transform:translate(0px,0);
        opacity: 1;

    }
}
@keyframes redbox-intro{
    0%{
        transform: translate(0px, 500px);
        opacity: 0;
    }
    70%{
        opacity: 0.7;
        transform: translate(0px, 0px);
    }
    100%{
        transform:translate(0px,0px);
        opacity: 1;  
    }
}




/* ---------------------------------------------------- */