/* ── Tablet: single column ── */
@media (max-width: 900px) {
  .two-col-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: collapse grids, stack buttons ── */
@media (max-width: 640px) {
  main { padding: 12px 8px 4px; }

  .app-header h1 { font-size: 1.8rem; }

  .three-col-grid {
    grid-template-columns: 1fr;
  }

  .position-header,
  .position-zeile {
    grid-template-columns: 1fr 56px 66px 76px 76px 32px;
    gap: 5px;
  }

  .zielgruppen-toggle { gap: 8px; }

  .action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary, .btn-reset { width: 100%; text-align: center; }

  .checkboxen { flex-direction: column; gap: 12px; }

  .card { padding: 16px 14px; }
}

/* ── Small mobile ── */
@media (max-width: 400px) {
  main { padding: 8px 4px; }
  .card { padding: 14px 10px; }

  .app-header h1 { font-size: 1.5rem; }

  .position-header,
  .position-zeile {
    grid-template-columns: 1fr 48px 58px 66px 66px 28px;
    gap: 4px;
  }

  .zielgruppen-toggle { flex-direction: column; }
  .toggle-btn { min-height: 56px; }
}