/* TAC-Firearms – Mobile Optimierungen (nur kleine Screens) */
/* Ziel: bessere Lesbarkeit/Bedienbarkeit auf Handy, Desktop-Design bleibt unberührt. */

@media (max-width: 640px) {
  /* Mobile Browser mögen fixed background oft nicht (Ruckeln/Zoom-Bugs) */
  body { background-attachment: scroll !important; }

  /* Header: Logos & Titel sauber skalieren */
  .header-inner{
    grid-template-columns: 90px 1fr 90px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .logo{ width: 82px !important; }

  /* Navigation: Buttons umbrechen statt overflow */
  .nav{
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 12px 12px !important;
  }
  .btn{
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Karten/Sections: etwas weniger Innenabstand */
  main{ padding: 18px 12px 26px !important; }
  .hero, .card, .footer-card { padding: 14px !important; }

  /* Footer: Rechtliche Links umbrechen + Buttons stapeln */
  .actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }
  .mini a{
    display: inline-block !important;
    margin: 0 10px 6px 0 !important;
    white-space: nowrap !important;
  }

  /* Kategorie-Badges/Preiszeile: mehr Luft */
  .price-row, .price { line-height: 1.25 !important; }

  /* Produkt-Detail Modal: auf Handy nutzen */
  .modal, #detailModal { padding: 10px !important; }
  .modal-content, .detail-modal, .detailModalContent{
    width: min(96vw, 920px) !important;
    max-height: 88vh !important;
    overflow: auto !important;
  }
  .details-grid, .detail-grid{
    grid-template-columns: 1fr !important;
  }
  .detail-image img, .details-image img{
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 420px) {
  .header-inner{
    grid-template-columns: 74px 1fr 74px !important;
  }
  .logo{ width: 64px !important; }

  /* Headline nicht zu riesig */
  .brand .title{
    font-size: 24px !important;
  }

  /* Buttons fingerfreundlich */
  .btn{
    padding: 11px 12px !important;
    font-size: 15px !important;
  }
}