/* =============================================
   RESPONSIVE — Breakpoints
   Tablet:  < 1024px
   Mobile:  < 768px
   Small:   < 480px
   ============================================= */

@media (max-width: 1024px) {
  :root { --section-padding: var(--space-16) 0; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root {
    --text-3xl: 1.5rem;
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
    --section-padding: var(--space-12) 0;
  }

  /* Header: Burger-Menü zeigen */
  .site-nav { display: none; }
  .site-header__burger { display: flex; }

  /* Grids → einspaltiger Stack */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .site-footer__legal ul { flex-wrap: wrap; }

  /* Bilder */
  .img-hero { height: 300px; }
  .img-section { height: 240px; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--space-4); }
  .btn--lg { padding: var(--space-3) var(--space-6); }
}