/* ==========================================================================
   bern-heizung.ch – Responsive Styles (Mobile First)
   Breakpoints: 480px / 768px / 1024px / 1280px
   ========================================================================== */

/* ---- Kleine Smartphones ---- */
@media (min-width: 480px) {
  .option-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .field--row { grid-template-columns: 1fr 1fr; }
}

/* ---- Tablets ---- */
@media (min-width: 768px) {
  .container { padding: 0 32px; }
  .section { padding: 88px 0; }

  .hero { padding: 56px 0 72px; }

  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .systems-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }

  .tax-cta { flex-wrap: nowrap; }

  .klima-band { padding-bottom: 88px; }
  .klima-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 44px;
  }
  .klima-card__action { align-items: center; }

  .cookie-banner__content { display: flex; align-items: center; gap: 24px; }
  .cookie-banner__text { flex: 1; }
  .cookie-banner__actions { margin-top: 0; flex-direction: column; min-width: 180px; }
  .cookie-btn { width: 100%; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }

  .sticky-cta { display: none; }
}

/* ---- Desktop ---- */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.04fr 0.96fr; gap: 56px; }
  .hero { padding: 64px 0 88px; }

  .header-trust { display: flex; gap: 22px; }

  .form-card { padding: 32px 30px 28px; }

  .usp-grid { grid-template-columns: repeat(4, 1fr); }
  .systems-grid { grid-template-columns: repeat(4, 1fr); }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }

  .tax-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .about-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; }

  .final-cta__inner { padding: 104px 0; }
}

/* ---- Grosse Screens ---- */
@media (min-width: 1280px) {
  .hero-grid { gap: 72px; }
}

/* ---- Kleine Geräte: kompakter Header-CTA ---- */
@media (max-width: 480px) {
  .header-cta { padding: 10px 14px; font-size: 0.88rem; }
  .header-cta .lucide { display: none; }
}

/* ---- Sehr kleine Geräte ---- */
@media (max-width: 360px) {
  .option-grid { grid-template-columns: 1fr; }
  .option-card { min-height: 0; flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 14px; }
}

/* ---- Mobile: Sticky CTA Platz schaffen ---- */
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  body.has-sticky-cta { padding-bottom: 78px; }
}