/* Responsive: erste Media-Queries */

/* Responsive Media Queries */
@media (max-width: 768px) {
  .header-inner { padding: 12px 16px; gap: 12px; }
  .logo { font-size: 24px; }
  .search-wrap { min-width: 120px; max-width: 100%; order: 2; width: 100%; }

  .tabs {
    display: flex;
    overflow-x: auto;
    width: 100%;
    order: 3;
    padding: 3px;
    gap: 4px;
    border-radius: var(--radius-sm);
  }
  .tab { white-space: nowrap; font-size: 12.5px; padding: 6px 10px; }
  main { padding: 18px 16px 60px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 12px; }
  .detail-head { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .detail-poster { width: 150px; min-width: 150px; height: 225px; }
  .detail-title { font-size: 38px; text-align: center; }
  .detail-stats { justify-content: center; gap: 16px; }
  .detail-actions { justify-content: center; }
  #devToolDrawer { width: 100%; right: -100%; }
  #devToolDrawer.open { right: 0; }
}

@media (max-width: 480px) {
  .detail-poster { width: 130px; min-width: 130px; height: 195px; }
  .detail-title { font-size: 32px; }
}