/* Responsive — Tablet ≤900px, Handy ≤600px */

/* Übergangszone 901–1180px: Navbar würde sonst umbrechen (getestet), obwohl
   weder Mobile- noch Full-Desktop-Breite vorliegt. */
@media (min-width: 901px) and (max-width: 1180px) {
  .primary-nav ul { gap: 1.1rem; }
  .header-actions { gap: 0.85rem; }
  .header-phone span { display: none; }
  .btn { padding: 0.85rem 1.35rem; font-size: 0.9375rem; white-space: nowrap; }
}

@media (max-width: 900px) {
  .primary-nav > ul, .header-phone, .header-actions > .btn { display: none; }
  .burger-toggle { display: block; }
  .header-actions { gap: 0; }

  /* Desktop-Dropdown-Reset: hover/focus-within-Transform darf hier nicht mehr greifen */
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu {
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
  }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-content, .hero-media { grid-column: 1 / -1; }
  .hero-media { order: -1; aspect-ratio: 16/10; }

  .offset-grid, .service-card,
  .related-services, .related-card,
  .footer-grid, .stat-row {
    grid-column: auto !important;
  }
  .offset-grid { grid-template-columns: 1fr 1fr; }
  .service-card { grid-column: span 1 !important; margin-top: 0 !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .related-services { grid-template-columns: 1fr 1fr; }

  .split { grid-template-columns: 1fr; }
  .split-media, .split-text,
  .split.is-reversed .split-media, .split.is-reversed .split-text {
    grid-column: 1 / -1;
  }
  .split-media { order: -1; }
  .split.is-reversed .split-media { order: -1; }
  .split-media img { aspect-ratio: 16/10; }

  .contact-bar-inner { justify-content: flex-start; }
}

@media (max-width: 600px) {
  :root { --fs-body: 1.0625rem; }

  .wrap { padding-inline: 1.25rem; }

  .offset-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .related-services { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }

  .hero-lede { font-size: 1.05rem; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }

  .contact-bar-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .breakout { min-height: 20rem; }
  .breakout-content { padding: 1.75rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .slide { aspect-ratio: 4/5; }

  .btn { width: 100%; justify-content: center; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
}