/* ============================================
   RESPONSIVE STYLES - newsletter-tools.de
   Neues Design-System 2026
   Mobile-First Breakpoints:
   480px, 768px, 1024px, 1280px, 1536px
   ============================================ */

/* ============================================
   BASE (Mobile-First defaults)
   ============================================ */
.container {
  padding: 0 var(--spacing-md);
}

.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
  grid-template-columns: 1fr;
}

/* ============================================
   Extra Small: max 480px (phones portrait)
   ============================================ */
@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.375rem;
    --text-2xl: 1.125rem;
  }

  .container {
    padding: 0 var(--spacing-sm);
  }

  h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  h2 {
    font-size: var(--text-xl);
  }

  .btn-lg {
    width: 100%;
    justify-content: center;
  }

  /* Hero Section */
  .hero-section {
    padding: var(--spacing-xl) 0;
  }

  .hero-content {
    text-align: center;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

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

  .stat-number {
    font-size: var(--text-2xl);
  }

  /* Tables scroll horizontal */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table {
    min-width: 500px;
  }

  /* Forms */
  .form-row {
    flex-direction: column;
  }

  .form-group {
    width: 100%;
  }
}

/* ============================================
   Small: 481px - 768px (phones landscape, small tablets)
   ============================================ */
@media (min-width: 481px) {
  .container {
    max-width: 540px;
    margin: 0 auto;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Medium: 769px - 1024px (tablets)
   ============================================ */
@media (min-width: 769px) {
  .container {
    max-width: 720px;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   Large: 1025px - 1280px (desktops)
   ============================================ */
@media (min-width: 1025px) {
  .container {
    max-width: 960px;
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   XL: 1281px - 1536px (large desktops)
   ============================================ */
@media (min-width: 1281px) {
  .container {
    max-width: 1140px;
  }

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

/* ============================================
   2XL: 1537px+ (extra large screens)
   ============================================ */
@media (min-width: 1537px) {
  .container {
    max-width: var(--container-max);
  }
}

/* ============================================
   COMPONENT-SPECIFIC RESPONSIVE RULES
   ============================================ */

/* Hero Section Responsive */
.hero-section {
  padding: var(--spacing-3xl) 0;
}

@media (max-width: 1024px) {
  .hero-section {
    padding: var(--spacing-2xl) 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image {
    order: -1;
    max-width: 400px;
    margin: 0 auto var(--spacing-xl);
  }

  .hero-buttons {
    justify-content: center;
  }
}

/* Stats Section */
.stats-section {
  padding: var(--spacing-2xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .stat-number {
    font-size: var(--text-2xl);
  }
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* Vergleichstabelle */
.vergleich-section {
  padding: var(--spacing-2xl) 0;
}

.vergleich-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--spacing-md));
  padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
  .vergleich-table {
    font-size: var(--text-sm);
  }

  .vergleich-table th,
  .vergleich-table td {
    padding: var(--spacing-sm);
  }

  .vergleich-table .anbieter-name {
    min-width: 120px;
  }
}

/* Blog/Artikel Grid */
.artikel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .artikel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .artikel-grid {
    grid-template-columns: 1fr;
  }
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   UTILITY RESPONSIVE CLASSES
   ============================================ */

/* Hide/Show based on breakpoint */
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hide-sm { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hide-md { display: none !important; }
}

@media (min-width: 1025px) {
  .hide-lg { display: none !important; }
}

/* Show only on specific breakpoints */
@media (min-width: 481px) {
  .show-xs-only { display: none !important; }
}

@media (max-width: 480px), (min-width: 769px) {
  .show-sm-only { display: none !important; }
}

@media (max-width: 768px), (min-width: 1025px) {
  .show-md-only { display: none !important; }
}

@media (max-width: 1024px) {
  .show-lg-only { display: none !important; }
}

/* Text alignment responsive */
@media (max-width: 768px) {
  .text-center-mobile { text-align: center; }
}

/* Spacing adjustments */
@media (max-width: 768px) {
  .section {
    padding: var(--spacing-xl) 0;
  }

  .section-lg {
    padding: var(--spacing-2xl) 0;
  }
}

/* Cookie Banner responsive */
@media (max-width: 768px) {
  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-banner .btn-group {
    width: 100%;
    justify-content: center;
  }
}

/* Back to top responsive */
@media (max-width: 480px) {
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: var(--spacing-md);
    right: var(--spacing-md);
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .cta-box,
  .hero-cta,
  .mobile-menu-toggle,
  .search-btn,
  .back-to-top,
  .cookie-banner {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: black;
    background: white;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .testbericht-layout {
    display: block;
  }

  .article-section {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  img {
    max-width: 100% !important;
  }
}