/* 📱 Responsive Layout Anpassungen */

/* Navigation mobil stapeln */
@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    gap: 1em;
  }

  .main-nav a {
    font-size: 1em;
  }

  .nav-wrapper {
    padding: 1em 1.2em;
    border-radius: 1em;
  }

  .site-header img.header-img {
    max-width: 100%;
    height: auto;
  }
}

/* Grid-Anpassung für kleine Displays */
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }

  .couple-card {
    width: 100%;
    height: auto;
  }

  .couple-card img {
    height: auto;
  }

  .modal-content img {
    width: 90%;
    height: auto;
  }
}

/* Textgrößen für kleinere Displays */
@media (max-width: 480px) {
  h1 {
    font-size: 2.2em;
  }

  h2, h3 {
    font-size: 1.3em;
  }

  .content {
    padding: 1.2em;
  }

  .overlay {
    font-size: 0.85em;
  }

  .ship-status {
    font-size: 0.65em;
  }
}