@media (min-width:790px){
    .mobil-hidden{
        display: block !important;
    }
}

@media (max-width: 790px){
    
    .reesponsive-detail-contact-button{
        display: none !important;
    }

    .responsive-contact-buttons{
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: fixed;
        bottom: 10px;
        right: 10px;
    }

    .contact-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
    }

    .summary-container{
        padding: 0 !important;
    }

    .close-contact-info{
        display: block !important;
    }

    .summary-container{
        font-size: 16px;
    }
    
    .summaryHeader{
        width: 100% !important;
    }

    .contentSummary{
        width: 80%;
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .summary-container {
        display: flex;
        width: 100%;
        height: 80vh;
        align-items: center;
        justify-content: center;
    }

    .summaryRows{
        width: 100% !important;
    }

    .summaryRow1{
        gap: 8px;
    }

    .summaryRow3{
        gap: 8px;
    }

    .addTasksBtn{
        padding: 0 !important;
        height: auto;
    }

    .btnGray{
        display: flex;
        align-items: center;
    }

    .clearBtn{
        padding: 0 8px;
        width: 125px;
    }

    .responsive-create-acc{
        display: flex;
        justify-content: space-between;
        gap: 128px;
        margin: 0 0 30px 0;
    }

    .responsive-create-acc p{
        font-weight: bolder;
    }

    .createAccountDiv{
        display: none;
    }

    .loginDiv{
        width: 100% !important;
        margin: 0 0 30px;
    }

    .loginData{
        width: 90% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .loginData form{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .loginButtons{
        flex-direction: column;
        align-items: center;
        gap: 16px;
        height: 48px;
        margin: 0;
    }

    .loginButtons button{
        align-items: center;
        display: flex;
        justify-content: center;
        font-size: small;
        width: 100%;
    }

    .backBtn{
        top: 10px;
        left: 10px;
    }

    .signUpDiv{
        width: 100%;
        margin: 0 !important;
    }

    .contact-div{
        display: none !important;
    }

    .media-contact-div{
        display: flex !important;
        align-items: center;
        justify-content: end;
        width: 100%;
        padding: 0 16px;
    }

    .media-contact-div button{
        border-radius: 50%;
        width: 56px !important;
    }


}

@media (max-width: 550px){

    .tasksInRow{
        justify-content: center;
    }

    .taskRow{
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .taskDetailMain{
        padding: 0 16px;
    }

    .dataInput input{
        padding: 0;
        width: 100%;
    }

    .coloumContainer{
        padding: 0 16px;
    }

    .cloumn1 ,.input-container, .detailInfos , .taskDetailMain , .detailCategory , .contacts-container , .showContacts , .detailBtns , .detailHeader , .smallInputField , .descriptionInput , .cloumn2 , .coloumn2NoSubtasks , .selectPrio , .selectPrio form , .selectPrio label , .boardHeaderSearch , .signUpDiv {
        width: 100% !important;
    }

    .selectPrio label , .boardHeaderSearch{
        padding: 0 !important;
    }

    .selectPrio form{
        gap: 4px !important;
    }

    .boardHeaderInputs{
        width: 100% !important;
        gap: 8px;
    }

    .initials{
        width: 30px;
        height: 30px;
        padding: 8px;
    }

    .contacts{
        width: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 81vh;
    }

    .dataInput{
        align-items: center;
        width: 90%;
    }

    .signUpDiv{
        margin: 16px;
    }

    .contacts{
        min-width: 100% !important;
    }

    header img{
        width: 60px;
        height: 60px;
        margin: 16px;
    }

    .summaryHeader {
        flex-direction: column;
        align-items: unset !important;
        margin: 32px;
    }

    .secondHeader {
        order: 1; /* Verschiebt das p-tag an die zweite Position */
    }

    .sepreratorHeader {
        order: 2; /* Verschiebt den Separator an die letzte Position */
        width: 59px !important;
        height: 3px !important;
        margin-top: 10px;
    }
    
    .secondHeader {
        font-size: 16px !important;
    }

    .board-container{
        padding: 0 16px !important;
        width: 100%;
        height: 80vh;
    }

    .boardHeader{
        margin: 8px 0;
        gap: 16px;
    }

    .legalNotice, .privacyPolicy{
        padding: 0 0 16px!important;
    }

}

@media (max-width: 400px){

    .btnGray{
        padding: 16px;
    }

    .contentSummary{
        width: 100%;
        padding: 8px;
    }

    .showContacts{
        padding: 0 !important;
        max-height: 69vh !important;
    }

    .responsive-create-acc , .login-links-container{
        gap: 60px;
    }

    .loginButtons {
        gap: 16px;

    }
}

/* Neue Höhen-bezogene Media Queries */
@media (max-height: 800px) {
    .taskRows {
        height: 55vh !important;
    }

    .showContacts {
        height: 65vh;
    }

    .board-container {
        height: 70vh;
    }
}

@media (max-height: 600px) {
    .taskRows {
        height: 45vh !important;
    }

    .nav-container {
        height: 60px;
    }

    .nav-container a img {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 1100px) {
    .addTasksBtn {
        order: 2;
        margin-left: auto;
        justify-content: space-between !important;
    }

    .required {
        order: 1;
        margin-top: auto;
    }

    .coloumn2NoSubtasks {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
}