/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile-First Media Queries
   (Base = Mobile, min-width = größer)
   ═══════════════════════════════════════════ */

/* ── Mobile Base: Grids einspaltig ── */
.grid--3, .grid--2 { grid-template-columns: 1fr; }

/* ── Tablets ── */
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Desktop ── */
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .hero__inner { grid-template-columns: 1.05fr 1fr; }

  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }

  .testimonial { grid-template-columns: 0.8fr 1.2fr; }

  .checkout__grid { grid-template-columns: 1.5fr 1fr; }
  .order-summary { position: sticky; top: calc(var(--header-height) + 1rem); }
}

/* ── Mobile-Navigation (< 1024px): Hamburger + Overlay ── */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 999;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; gap: var(--space-md); text-align: center; }
  .nav__list a { font-size: var(--fs-h4); font-family: var(--font-heading); }
}

/* ── Footer auf kleineren Screens ── */
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .payment-method { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero { min-height: auto; padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl); }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .sticky-buy { display: flex; }
  .product { padding-bottom: 90px; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--space-sm); }
  .btn { width: 100%; }
  .hero__cta { width: 100%; }
}