/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* ── Tablet & Small Desktop (max 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;
    --text-7xl: 3.5rem;
  }

  /* Layout */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .layout-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .layout-split--reverse { direction: ltr; }
  .layout-sidebar { grid-template-columns: 1fr; }

  /* Header */
  .nav { display: none; }
  .header__cta { display: none; }
  .header__mobile-toggle { display: flex; }

  /* Topbar */
  .topbar__right { display: none; }

  /* Hero */
  .hero--split .container { grid-template-columns: 1fr; }
  .hero--split .hero__image { display: none; }

  /* Feature grids */
  .features--4col { grid-template-columns: repeat(2, 1fr); }

  /* Store cards */
  .store-cards { grid-template-columns: repeat(2, 1fr); }

  /* Process steps */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .process-steps::before { display: none; }

  /* Stats */
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* Blog grid */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing cards */
  .pricing-cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .pricing-card--featured { transform: none; }

  /* Contact cards */
  .contact-cards { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer__about { padding-right: 0; }

  /* Case cards */
  .case-cards { grid-template-columns: repeat(2, 1fr); }

  /* Download cards */
  .dl-cards { grid-template-columns: repeat(2, 1fr); }

  /* CTA Banner */
  .cta-banner { padding: var(--space-10); }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2.25rem;
    --text-6xl: 2.5rem;
    --container-padding: var(--space-4);
  }

  /* Section spacing */
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .section-lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }

  /* Grid */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Topbar - hide on mobile */
  .topbar { display: none; }

  /* Hero */
  .hero { min-height: 500px; }
  .hero--full { min-height: 70vh; }
  .hero__title { font-size: var(--text-4xl); }
  .hero__text { font-size: var(--text-lg); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .page-hero { padding: var(--space-10) 0 var(--space-8); }
  .page-hero__title { font-size: var(--text-3xl); }

  /* Features */
  .features,
  .features--2col,
  .features--4col {
    grid-template-columns: 1fr;
  }

  /* Benefits */
  .benefits { grid-template-columns: 1fr; }

  /* Store cards */
  .store-cards { grid-template-columns: 1fr; }

  /* Process steps */
  .process-steps { grid-template-columns: 1fr; }

  /* Trust badges */
  .trust-badges {
    gap: var(--space-6);
    justify-content: center;
  }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-item__question {
    padding: var(--space-4);
    font-size: var(--text-sm);
  }
  .faq-item__answer { padding: 0 var(--space-4) var(--space-4); }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
  .stat__number { font-size: var(--text-3xl); }

  /* Gallery */
  .gallery { grid-template-columns: 1fr; }

  /* Author bio */
  .author-bio { flex-direction: column; text-align: center; }

  /* Section headers */
  .section-title { font-size: var(--text-3xl); }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom .container { flex-direction: column; gap: var(--space-4); text-align: center; }
  .footer__legal { justify-content: center; }

  /* CTA Banner */
  .cta-banner {
    padding: var(--space-8);
    border-radius: var(--radius-lg);
  }
  .cta-banner__title { font-size: var(--text-2xl); }
  .cta-banner__actions { flex-direction: column; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; }
  .newsletter-section { padding: var(--space-8); }

  /* Comparison table */
  .comparison-table { font-size: var(--text-xs); }
  .comparison-table th,
  .comparison-table td {
    padding: var(--space-3);
  }

  /* Breadcrumbs */
  .breadcrumbs { font-size: var(--text-xs); }

  /* Pagination */
  .pagination { gap: var(--space-1); }
  .pagination__link { width: 36px; height: 36px; }

  /* Filter tabs */
  .filter-tabs { gap: var(--space-1); }
  .filter-tab { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

  /* Stats bar */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }

  /* Case cards */
  .case-cards { grid-template-columns: 1fr; }

  /* Download cards */
  .dl-cards { grid-template-columns: 1fr; }

  /* Guide cards */
  .guide-cards { grid-template-columns: 1fr; }

  /* Projekt-Check */
  .projekt-check { padding: var(--space-6); }
  .projekt-check .step-indicators { gap: var(--space-1); }
  .projekt-check .step-indicator { width: 32px; height: 32px; font-size: var(--text-xs); }
  .projekt-check .step-connector { width: 20px; }
  .projekt-check .form-grid { grid-template-columns: 1fr; }
  .projekt-check .step-navigation { flex-direction: column; gap: var(--space-3); }
  .projekt-check .step-navigation__buttons { width: 100%; }
  .projekt-check .step-navigation__buttons .btn { flex: 1; }

  /* Use cases */
  .use-cases { grid-template-columns: repeat(2, 1fr); }

  /* Konzept cards */
  .konzept-cards { grid-template-columns: 1fr; }

  /* Timeline */
  .timeline { padding-left: var(--space-8); }
  .timeline__dot { left: calc(-1 * var(--space-8) + 10px); }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  html { font-size: 14px; }

  .hero { min-height: 400px; }
  .hero__title { font-size: var(--text-3xl); }

  .section-title { font-size: var(--text-2xl); }

  .icon-card { padding: var(--space-6); }

  .cta-banner { padding: var(--space-6); }
  .cta-banner__title { font-size: var(--text-xl); }

  .pricing-card { padding: var(--space-6); }

  .use-cases { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr; }
}