/* =========================================
   German Modal Verbs – Responsive Adjustments
   ========================================= */

@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .nav-link {
    white-space: nowrap;
  }

  .main {
    padding: 1rem 1rem 3rem;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .match-list {
    grid-template-columns: 1fr;
  }

  .exercise-controls {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 1rem;
  }

  .exercise-card {
    padding: 1rem;
  }

  .fillblank-input {
    width: 6.5rem;
  }

  .fillblank-input.wide {
    width: 9rem;
  }
}