/* Flojekt-Todo: App-Stile, ergänzt Bootstrap 5.3 */

/* Layout */
.app-container {
  margin: 0 auto;
  max-width: 620px;
  padding: 0 1rem 3rem;
}

/* Eingabefeld */
.eingabe-wrapper {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  z-index: 10;
}

/* Tag-Filter-Chips */
.tag-chip {
  background: transparent;
  border: 1px solid #adb5bd;
  border-radius: 1rem;
  color: #6c757d;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  transition: all 0.15s ease;
}

.tag-chip:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}

.tag-chip.aktiv {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

/* Todo-Einträge */
.todo-item {
  transition: opacity 0.15s ease;
}

.todo-item:last-child {
  border-bottom: none !important;
}

/* Erledigte Todos */
.todo-erledigt .todo-text {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Löschen-Button: nur bei Hover sichtbar */
.todo-loeschen {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.todo-item:hover .todo-loeschen {
  opacity: 1;
}