@media (max-width: 1100px), (max-height: 780px) {

  /*  .taskBoard,
  .boardHeadline {
    max-width: 750px !important;
  }
*/
  .taskLists {
    flex-direction: column !important;
  }

  .taskCard {
    box-sizing: border-box !important;
    min-width: 252px !important;
  }

  .toDoTaskList,
  .inProgressTaskList,
  .awaitFeedbackTaskList,
  .doneTaskList {
    flex-direction: row !important;
    overflow-x: auto !important;
    margin-top: 0 !important;
  }


  .boardCategory {
    position: inherit !important;
  }


  .taskBoard,
  .boardHeadline {
    max-width: 650px !important;
  }

  .boardHeadline h1 {
    font-size: var(--font-size-41) !important;
  }
  .addTaskButton span,
  .addContact .addContactButtonDiv .cancelButton,
  .editContact .addContactButtonDiv .cancelButton {
    display: none !important;
  }

  .addTaskOverlay .taskSelector,
  .taskCardDetailedView .editTaskForm {
    flex-direction: column !important;
    overflow: auto !important;
    padding-right: 12px !important;
  }

  .addTaskOverlay {
    max-height: 80% !important;
    max-width: 500px !important;
  }
  .addTaskOverlay .taskSelectorLeft,
  .addTaskOverlay .taskSelectorRight {
    width: inherit !important;
    margin-right: 0 !important;
    gap: 12px !important;
  }

  .editTaskForm > div {
    width: inherit !important;
    margin-right: 0 !important;
  }

  .addTaskOverlay .confirmDiv {
    padding: 20px 18px 0 0 !important;
  }

  .addTaskOverlay .divider {
    display: none !important;
  }

  .contacts .contactDetailedInfo {
    margin-top: 20px !important;
    align-items: flex-start !important;
  }

  .contacts .contactHeadline {
    align-items: center !important;
  }

  .contacts .floatingContactName h2 {
    font-size: var(--font-size-27) !important;
  }

  .contacts .contactDetailedInfo {
    gap: 24px !important;
  }

  .contacts .floatingContactInformation {
    padding: 12px !important;
  }

  .addContact,
  .editContact {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  .addContact .contactHeader img,
  .editContact .contactHeader img {
    display: none !important;
  }

  .addContact .contactHeaderDiv,
  .editContact .contactHeaderDiv {
    width: 100% !important;
    border-radius: 30px 30px 0px 0px !important;
    max-height: 40% !important;
    margin-left: -1px !important;
    justify-content: flex-start !important;
    padding-top: 12px !important;
    margin-bottom: 40px !important;
  }

  .contactOverlay,
  .editContactOverlay {
    width: 50% !important;
    height: 80% !important;
  }

  .contactForm,
  .contactEditForm {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 0px !important;
  }

  .addContactForm,
  .editContactForm {
    width: 100% !important;
    position: relative !important;
    flex-direction: column !important;
    padding: 12px 12px 16px 12px !important;
    box-sizing: border-box !important;
  }

  .addContact .addContactForm .userIconDiv,
  .editContact .editContactForm .userIconDiv {
    position: absolute;
    top: -90px;
    margin: 0 !important;
    height: 100px !important;
    width: 100px !important;
  }

  .editContact .editContactForm .userIconDiv h2 {
    font-size: var(--font-size-41) !important;
  }

  .addContact .contactForm input,
  .addContact .contactForm input::placeholder,
  .editContact .contactEditForm input,
  .editContact .contactEditForm input::placeholder {
    font-size: var(--font-size-16) !important;
  }

  .addContactButtonDiv,
  .editContactButtonDiv {
    justify-content: flex-end !important;
  }

  .addContact .addContactFormIcon,
  .editContact .addContactFormIcon {
    height: 20px !important;
    width: 20px !important;
  }

  .addContact .nameIconDiv,
  .addContact .emailIconDiv,
  .addContact .phoneIconDiv,
  .editContact .nameIconDiv,
  .editContact .emailIconDiv,
  .editContact .phoneIconDiv {
    top: 6px !important;
  }

  .addContact .closeButtonDiv,
  .editContact .closeButtonDiv {
    top: 42px !important;
  }

  .addContact .closeButtonDiv img,
  .editContact .closeButtonDiv img {
    filter: brightness(0) invert(1);
  }

  .addContact .contactForm .contactNameInvalidDiv,
  .addContact .contactForm .contactEmailInvalidDiv,
  .addContact .contactForm .contactPhoneInvalidDiv,
  .editContact .contactEditForm .editContactNameInvalidDiv,
  .editContact .contactEditForm .editContactEmailInvalidDiv,
  .editContact .contactEditForm .editContactPhoneInvalidDiv {
    font-size: var(--font-size-10) !important;
    top: 44px !important;
  }
}

@media (max-width: 1000px) {
  .overlay {
    background: var(--main-color-darkblue) !important;
    opacity: 80% !important;
    z-index: 998 !important;
    animation: reduceBackground 1.5s ease-out forwards !important;
  }

  .privacyPolicy,
  .legalNotice,
  .help,
  .board,
  .addTask,
  .contacts {
    position: fixed !important;
    left: 0 !important;
    top: 82px !important;
    bottom: 80px !important;
  }

  .addTask .taskSelector {
    flex-direction: column !important;
    overflow-y: auto !important;
    align-items: center !important;
    margin-top: 20px !important;
  }

  .addTask .confirmDiv {
    padding: 20px 0 20px 0 !important;
  }

  .board {
    padding-left: 40px !important;
  }

  .header {
    padding: 10px !important;
  }

  .header .title,
  .addTask .taskSelector .divider,
  .addTask h1 {
    display: none !important;
  }

  .header .logoMobile {
    display: flex !important;
    position: absolute !important;
    left: 10px !important;
  }

  .header .popupMenu {
    top: 72px !important;
  }

  .privacyPolicy .privacyPolicyHeadline h1,
  .legalNotice .legalNoticeHeadline h1,
  .help .helpHeadline h1,
  .taskCardDetailedTitle {
    font-size: var(--font-size-41) !important;
  }

  .privacyPolicy h3,
  .legalNotice h3,
  .help h3,
  .addTaskOverlay > h1,
  .addTaskOverlay .createTaskButton {
    font-size: var(--font-size-21) !important;
  }

  .addTask label,
  .addTask .clearButton > span,
  .addTask .createTaskButton > span,
  .addTask .taskSelector input::placeholder,
  .addTask .taskSelector input,
  .addTask .taskSelector textarea::placeholder,
  .addTask .taskSelector textarea,
  .addTask .prioButtonsDiv button > span,
  .addTaskOverlay .clearButton > span,
  .addTaskOverlay .createTaskButton > span,
  .addTaskOverlay label,
  .addTaskOverlay .taskSelector input::placeholder,
  .addTaskOverlay .taskSelector input,
  .addTaskOverlay .taskSelector textarea::placeholder,
  .addTaskOverlay .taskSelector textarea,
  .addTaskOverlay .prioButtonsDiv button > span,
  .editTaskForm label,
  .editTaskForm input::placeholder,
  .editTaskForm input,
  .editTaskForm textarea::placeholder,
  .editTaskForm textarea,
  .editTaskForm .prioButtonsDiv button > span,
  .addContact .contactForm input {
    font-size: var(--font-size-16) !important;
  }

  .addTask .dropDownArrowDiv,
  .addTask .plusIconDiv,
  .addTaskOverlay .dropDownArrowDiv,
  .addTaskOverlay .plusIconDiv,
  .editTaskForm .dropDownArrowDiv,
  .editTaskForm .plusIconDiv {
    top: 10px !important;
  }

  .privacyPolicy p,
  .privacyPolicy li,
  .legalNotice p,
  .legalNotice li,
  .help p,
  .help span,
  .addTask .requiredInfoDiv span {
    font-size: var(--font-size-14) !important;
  }

  .addTask .requiredInfoDiv span,
  .addTaskOverlay .requiredInfoDiv span,
  .taskCardDetailedView .requiredInfoDiv span {
    font-size: var(--font-size-10) !important;
  }

  .navBar {
    display: none !important;
  }

  .navBarMobile {
    display: flex !important;
    width: 100% !important;
    background: var(--main-color-darkblue) !important;
    position: fixed !important;
    z-index: 1000 !important;
    bottom: 0 !important;
    justify-content: space-evenly !important;
    max-width: 100% !important;
  }

  .navBarBoardMobile {
    display: flex !important;
    height: 80px !important;
    align-items: center !important;
  }

  .navBarMenuMobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 10px !important;
    width: 75px !important;
    height: 75px !important;
    justify-content: center !important;
  }

  .navBarMenuMobile h5 {
    font-weight: normal !important;
  }

  .navBarActive {
    border-radius: 10px !important;
  }

  .login .loginArea,
  .signUp .signUpArea {
    padding: 40px 60px !important;
  }

  .login .emailInput,
  .login .passwordInput,
  .signUp .nameInput,
  .signUp .emailInput,
  .signUp .passwordInput,
  .signUp .confirmPasswordInput {
    min-width: 200px !important;
  }

  .login .signUpArea {
    display: none !important;
  }

  .login .signUpHeader {
    font-size: var(--font-size-16);
  }

  .login .signUpAreaForFooter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
  }

  .addTaskOverlay,
  .taskCardDetailedView {
    display: flex !important;
    max-height: 70% !important;
    top: calc(50% - 60px) !important;
    padding: 24px 20px !important;
  }

  .taskCardDetailedView {
    flex-direction: column !important;
  }

  .closeOverlayButtonDiv {
    top: 20px !important;
    right: 20px !important;
  }

  .addTaskOverlay .clearButton {
    min-width: 80px !important;
  }

  .addTaskOverlay .createTaskButton {
    min-width: 100px !important;
  }

  .taskCardMoveButton {
    visibility: visible !important;
  }

  .login .loginAreaFullScreenVision,
  .signUp .signUpAreaFullScreenVision {
    margin-top: 100px !important;
  }

  .contacts .contactBoard {
    height: calc(100% - 2px) !important;
  }

  .contacts .contactList {
    height: calc(100% - 40px) !important;
  }

  .contactOverlay,
  .editContactOverlay {
    width: 70% !important;
    top: calc(50% - 60px) !important;
  }

  .addContact .createContactButton,
  .editContact .saveContactButton,
  .editContact .deleteButton {
    font-size: var(--font-size-16) !important;
  }

  .addContact .createContactButton img,
  .editContact .saveContactButton img {
    height: 20px !important;
  }
}