/* ============================================================
   Thomas Mündlein Reinigung – Responsive Styles
   Mobile First: Breakpoints 1180 / 1024 / 768 / 480 px
   ============================================================ */

/* --- Navigation (max 1180px) ---
   Logo + Nav + CTA brauchen zusammen ~1112px; darunter auf
   Burger-Menü umschalten statt Header überlaufen/umbrechen zu lassen. */
@media (max-width: 1180px) {
  .logo { flex-shrink: 1; min-width: 0; }

  .main-nav   { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[hidden]       { display: none; }
  .mobile-nav:not([hidden]) { display: flex; }
}

/* --- Tablet / kleiner Desktop (max 1024px) --- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: span 2; }

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

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

  .contact-section-grid { grid-template-columns: 1fr; }

  .mechanism-steps { gap: 0; }
}

/* --- Tablet (max 768px) --- */
@media (max-width: 768px) {
  :root {
    --spacing-xl: 3.5rem;
    --spacing-xxl: 5rem;
  }

  /* Hero */
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-service-grid { grid-template-columns: repeat(3, 1fr); }

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

  /* Problem */
  .problem-grid { grid-template-columns: 1fr; }

  /* Mechanismus */
  .mechanism-steps {
    flex-direction: column;
    gap: 0.75rem;
  }
  .step-arrow { transform: rotate(90deg); margin: 0 auto; }

  /* Zielgruppen */
  .zielgruppen-split { grid-template-columns: 1fr; }

  /* Ablauf */
  .steps { grid-template-columns: 1fr; gap: 1.25rem; }

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

  /* Trust Features */
  .trust-feature { flex-basis: 100%; }
  .cert-badge { flex-direction: column; text-align: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-brand p { max-width: none; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }

  /* Buttons: bei wenig Platz umbrechen statt Layout zu sprengen */
  .btn { white-space: normal; text-align: center; }

  /* CTA */
  .cta-group { flex-direction: column; align-items: center; }
  .cta-group .btn { width: 100%; max-width: 360px; }

  /* Hero actions */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .section { padding: 3rem 0; }
}

/* --- Mobil (max 480px) --- */
@media (max-width: 480px) {
  :root {
    --spacing-xl: 2.5rem;
  }

  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.4rem; }

  .logo-mark { width: 50px; max-height: 38px; }
  .logo-text { font-size: 0.9rem; }

  .hero { padding: 2rem 0 2.5rem; }

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

  .branchen-grid { grid-template-columns: 1fr; }

  .problem-grid { grid-template-columns: 1fr; }

  .zielgruppe-panel { padding: 2rem 1.5rem; }

  .contact-section-form { padding: 1.5rem; }

  .btn-lg { padding: 0.875rem 1.5rem; font-size: 0.975rem; }

  .site-header .header-inner { height: 60px; }

  .mechanism-steps { gap: 0.5rem; }
  .step-arrow { font-size: 1.2rem; }

  .trust-features { gap: 0.75rem; }
}