@charset "UTF-8";
/*
 * Mobile-Layout-Fixes (nach style.css + dark-mode.css)
 * Lädt mit ?v=filemtime – umgeht aggressives CSS-Caching auf Phones.
 */

@media (max-width: 1068px) {
  nav.main-nav .nav-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }

  nav.main-nav .nav-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    order: unset !important;
    flex: unset !important;
  }

  nav.main-nav .nav-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: unset !important;
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    justify-content: flex-end !important;
  }

  nav.main-nav .nav-left {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: unset !important;
    flex: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  nav.main-nav.is-open .nav-left {
    display: flex !important;
    margin-top: 0.25rem !important;
    gap: 0.35rem !important;
  }

  nav.main-nav.is-open .nav-left > li {
    width: 100% !important;
  }

  nav.main-nav.is-open .nav-left > li.nav-more {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  nav.main-nav.is-open .nav-left > li:not(.nav-more) > a.nav-link,
  nav.main-nav.is-open .nav-left > li.nav-more .nav-more__menu .nav-link {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  nav.main-nav.is-open .nav-left .nav-more__menu {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.15rem 0 0 !important;
  }

  /* Dienste-Hero: kein Split-Grid mit schwebenden CTAs */
  #main-content #dienste-page .service-content > header.dienste.service-header.service-header--split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    overflow: visible !important;
  }

  #main-content #dienste-page .service-content > header.dienste .hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    height: auto !important;
    text-align: center !important;
  }

  #main-content #dienste-page .service-content > header.dienste .hero-text h1,
  #main-content #dienste-page .service-content > header.dienste .hero-text .intro,
  #main-content #dienste-page .service-content > header.dienste .hero-text .dienste-hero-cta {
    grid-area: unset !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #main-content #dienste-page .dienste-hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    gap: 0.65rem !important;
  }

  #main-content #dienste-page .dienste-hero-cta .btn {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* FAQ-Hero: Intro nicht in schmaler Spalte quetschen */
  #main-content #faq-page .service-content > header.faq.service-header.service-header--split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    overflow: visible !important;
  }

  #main-content #faq-page .service-content > header.faq .hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  #main-content #faq-page .service-content > header.faq .hero-text h1,
  #main-content #faq-page .service-content > header.faq .hero-text .intro {
    grid-area: unset !important;
    width: 100% !important;
    max-width: min(100%, 36ch) !important;
  }
}