/* responsive.css — Breakpoints fuer Tablet/Phone (iPad, iPhone).
   Werte spiegeln die --bp-* Tokens aus variables.css. */

/* Tablet und schmaler (iPad Hochformat ~768px) */
@media (max-width: 1024px) {
  .app-main { max-width: 100%; }
}

/* Phone / iPhone (<= 768px): einspaltig, groessere Touch-Targets, kein Zoom */
@media (max-width: 768px) {
  .app-header { padding: var(--sp-5) var(--sp-6); }
  .app-main { padding: var(--sp-7) var(--sp-5); gap: var(--sp-6); }

  .task-form__row { grid-template-columns: 1fr; }

  /* 16px verhindert Auto-Zoom auf iOS beim Fokus */
  .app-field input,
  .app-field select,
  .app-field textarea { font-size: 16px; }

  .app-btn { min-height: 44px; }
  .task-item__check { width: 24px; height: 24px; }

  /* Aktionen unter den Inhalt schieben statt daneben */
  .task-item { flex-wrap: wrap; }
  .task-item__actions { width: 100%; justify-content: flex-end; }
}

/* Sehr schmal (<= 430px, iPhone Hochformat) */
@media (max-width: 430px) {
  .app-header h1 { font-size: var(--fs-xl); }
  .app-header .app-tagline { display: none; }
}