:root {
  --bg-color: #4589ff;
  --ligth-blue: #005dff;
  --btn-hover: #005dff;
  --style: #d1d1d1;
  --menu: #42526e;
  --guest-log-in: #647188;
  --error: #ff8190;
  --icon: #a8a8a8;
  --arrow-hover: #e3eeff;
}

body {
  margin: 0;
  font-family: "Open sans", sans-serif;
}

.input-error {
  animation: shake 0.2s ease-in-out 2;
}

.input-error::placeholder {
  color: red !important;
}

@keyframes shake {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0px);
  }
}

.fade-out {
  animation: fadeOut 0.4s ease-out forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.error-msg {
  color: red;
  font-size: 0.8em;
  margin-top: 2px;
  min-height: 1em; /* sorgt dafür, dass sich das Layout nicht springt */
}
.modal-input-field.invalid {
  border-color: red;
}

.modal-input-dflex {
  display: flex;
  justify-content: space-between;
  width: 422px;
}

/* Buttons sind „unsichtbar“, nur Icons zeigen */
.subtask-container button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
}

.subtask-container .hover-content {
  display: none;
}

.subtask-container:hover .hover-content {
  display: flex;          
  align-items: center;
}

.subtask-container .edit-subtaskContent {
  display: none;
}

.subtask-container.editing-mode .edit-subtaskContent {
  display: flex;          
  align-items: center;
}

.subtask-container.editing-mode:hover .hover-content {
  display: none;
}

.subtask-container.editing-mode .subtask-dot {
  display: none;
}

.subtask-container.editing-mode {
  border-bottom: 1px solid #4589FF;
}

/* Liste ohne Standard-Punkte */
.edit-subtask-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Buttons sind „unsichtbar“, nur das Icon */
.edit-subtask-container button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* --- Hover-Content --- */
/* verstecken */
.edit-subtask-container .hover-content {
  display: none;
}
/* beim Hover einblenden */
.edit-subtask-container:hover .hover-content {
  display: flex;
  align-items: center;
}

/* --- Edit-Content (Save/Cancel) --- */
/* verstecken */
.edit-subtask-container .edit-subtaskContent {
  display: none;
}
/* im Bearbeiten-Modus einblenden */
.edit-subtask-container.editing-mode .edit-subtaskContent {
  display: flex;
  align-items: center;
}

/* wenn edit-mode aktiv, soll Hover-Content aus sein */
.edit-subtask-container.editing-mode:hover .hover-content {
  display: none;
}

/* Punkt ausblenden im Bearbeiten-Modus */
.edit-subtask-container.editing-mode .edit-subtask-dot {
  display: none;
}

/* Rahmen-Linie im Bearbeiten-Modus */
.edit-subtask-container.editing-mode {
  border-bottom: 1px solid #4589FF;
}

.visible-on {
  visibility: visible;
}

.visible-off {
  visibility: hidden;
}

@media (max-width: 768px) {
  .email {
    direction: rtl;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }
}