/* Mobile / touch — nav, menu overlay, page layout (loads last) */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html:has(body:not(.machbar-home)) {
  overflow-x: clip;
}

body:not(.machbar-home) {
  overflow-x: clip;
}

/* --- Nav bar --- */
.navbar-container {
  max-width: var(--machbar-nav-max);
  padding-left: var(--machbar-nav-pad-x);
  padding-right: var(--machbar-nav-pad-x);
  box-sizing: border-box;
}

.navbar_right {
  flex-shrink: 0;
  gap: 0;
}

#nav-toggle.lottie_hamburger {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.link-block.logo {
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iOS scroll lock while menu open */
body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

/* --- Full-screen menu overlay --- */
/*
 * Center when content fits; scroll when it does not (iPhone / landscape).
 * Flex spacers (::before/::after) avoid justify-content:center clipping.
 */
.navbar_content.is-open,
.navbar_content.is-opening,
.navbar_content.is-closing {
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  padding-top: max(72px, calc(env(safe-area-inset-top, 0px) + 56px));
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--machbar-nav-pad-x), env(safe-area-inset-left, 0px));
  padding-right: max(var(--machbar-nav-pad-x), env(safe-area-inset-right, 0px));
}

.navbar_content.is-open::before,
.navbar_content.is-opening::before,
.navbar_content.is-closing::before,
.navbar_content.is-open::after,
.navbar_content.is-opening::after,
.navbar_content.is-closing::after {
  content: "";
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  pointer-events: none;
}

.navbar_content .navigation_links {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

.navbar_content .navigation_socials {
  flex-shrink: 0;
}

.navbar_content .navigation_link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 0;
}

.navbar_content .navigation_link--lang {
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.navbar_content .social_linkblock {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scroll-reveal stripe: safe area on notched phones */
body:not(.machbar-home) .section-navbar.is-revealed {
  padding-top: env(safe-area-inset-top, 0px);
}

body:not(.machbar-home) .section-navbar.is-revealed .navbar-container {
  padding-top: max(var(--machbar-nav-pad-y), calc(env(safe-area-inset-top, 0px) + 8px));
  padding-bottom: var(--machbar-nav-pad-y);
}

/* --- Case pages --- */
@media screen and (max-width: 991px) {
  /* Clip + leftover 100vw bleed was shoving the whole case to the right in device mode. */
  html:has(body.machbar-case),
  body.machbar-case {
    overflow-x: hidden;
    max-width: 100%;
  }

  body.machbar-case #section_header.section-header,
  body.machbar-case #section_header.section-header.micromata,
  body.machbar-case #section_header.section-header.nordschritt,
  body.machbar-case #section_header.section-header.sonor,
  body.machbar-case #section_header.section-header.zwocar,
  body.machbar-case #section_header.section-header.plenty,
  body.machbar-case #section_header.section-header.diemausapp,
  body.machbar-case #section_header.section-header.klaerschilf {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  body.machbar-case .machbar-case-body,
  body.machbar-case .machbar-case-body .container,
  body.machbar-case .machbar-case-body .w-container,
  body.machbar-case .machbar-case-body .w-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.machbar-case .machbar-case-body .container.horizontal {
    display: block !important;
    flex-direction: column !important;
  }

  body.machbar-case .machbar-case-body .machbar-grid-row.w-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.machbar-case .machbar-case-body .machbar-grid-row.w-row::before,
  body.machbar-case .machbar-case-body .machbar-grid-row.w-row::after {
    content: none !important;
    display: none !important;
  }

  body.machbar-case .machbar-case-body .w-col,
  body.machbar-case .machbar-case-body .w-col-6,
  body.machbar-case .machbar-case-body .w-col-4,
  body.machbar-case .machbar-case-body .column-1,
  body.machbar-case .machbar-case-body .column-2,
  body.machbar-case .machbar-case-body .column-1-3ergrid,
  body.machbar-case .machbar-case-body .column-2-3ergrid,
  body.machbar-case .machbar-case-body .column-3-3ergrid,
  body.machbar-case .machbar-case-body .text-block,
  body.machbar-case .machbar-case-body .machbar-grid-column {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
  }

  body.machbar-case .machbar-case-body .filler-block {
    display: none !important;
  }

  body.machbar-case .section-2-images,
  body.machbar-case .section-3-images,
  body.machbar-case .section-3-images.micromata,
  body.machbar-case .section-paragraph,
  body.machbar-case .section-1-image,
  body.machbar-case .section-1-video,
  body.machbar-case .section-2-video {
    padding-left: var(--machbar-content-pad-x);
    padding-right: var(--machbar-content-pad-x);
  }

  body.machbar-case .section-intro {
    padding-left: var(--machbar-content-pad-x);
    padding-right: var(--machbar-content-pad-x);
  }

  /* Same content inset as case body — do not add pad on .container (Webflow section
     already has pad; stacking both made teasers narrower than the grid). */
  body.machbar-case .section-next-projects {
    padding-left: var(--machbar-content-pad-x);
    padding-right: var(--machbar-content-pad-x);
  }

  body.machbar-case .section-next-projects .container.centered,
  body.machbar-case .section-next-projects .container.centered.machbar-content-column {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  body.machbar-case .section-next-projects .machbar-case-next-row.w-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.machbar-case .section-next-projects .machbar-case-next-row.w-row::before,
  body.machbar-case .section-next-projects .machbar-case-next-row.w-row::after {
    content: none !important;
    display: none !important;
  }

  body.machbar-case .section-next-projects .machbar-case-next-row .w-col,
  body.machbar-case .section-next-projects .machbar-case-next-row .w-col-6,
  body.machbar-case .section-next-projects .machbar-case-next-row .column-1,
  body.machbar-case .section-next-projects .machbar-case-next-row .column-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    min-width: 0;
  }

  body.machbar-case .section-next-projects .case_link_block,
  body.machbar-case .section-next-projects .caseteaser {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --machbar-nav-pad-y: 16px;
  }

  .navbar_content .navigation_link {
    width: auto;
    max-width: 92vw;
    font-size: clamp(1.45rem, 6.5vw, 2rem);
    line-height: 1.12;
    margin-bottom: 8px;
  }

  .navbar_content .navigation_link.home.w--current,
  .navbar_content .navigation_link.machbarhome,
  .navbar_content .navigation_link.machbarhome.w--current {
    width: auto;
    max-width: 92vw;
  }

  .navbar_content .nav_divider {
    margin-bottom: 6px;
  }

  .navbar_content .navigation_socials {
    padding-top: 16px;
  }

  .navbar_content .navigation_link--lang {
    margin-top: 0.35rem;
    margin-bottom: 0;
  }
}

/* Short viewports / landscape phones — denser + always scrollable */
@media screen and (max-height: 560px), (max-width: 991px) and (orientation: landscape) {
  .navbar_content.is-open,
  .navbar_content.is-opening,
  .navbar_content.is-closing {
    padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 44px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }

  .navbar_content .navigation_link {
    font-size: clamp(1.2rem, 5.5vh, 1.75rem);
    line-height: 1.1;
    margin-bottom: 4px;
  }

  .navbar_content .navigation_socials {
    padding-top: 10px;
  }

  .navbar_content .social_icon {
    width: 28px;
    height: 28px;
  }

  .navbar_content .social_linkblock {
    min-width: 40px;
    min-height: 40px;
  }
}

@media screen and (max-width: 479px) {
  .navbar-text-link {
    display: none;
  }

  /* Projekte sticky anchors must stay visible (they also use .navbar-text-link) */
  body.machbar-projekte .navbar-projekte-anchors .navbar-projekte-anchor.navbar-text-link {
    display: inline-block;
  }

  .headline.logo {
    font-size: 30px;
    line-height: 36px;
  }

  #nav-toggle.lottie_hamburger {
    width: 35px;
    height: 35px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 10px;
  }

  .navbar_content.is-open,
  .navbar_content.is-opening,
  .navbar_content.is-closing {
    padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 52px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar_content .nav-stagger-item {
    transform: none !important;
  }
}

/* Leistungen / Services links — tap targets on touch/mobile (half the previous gap) */
@media (pointer: coarse), (max-width: 767px) {
  .leistungen a.machbar-service-link,
  .machbar-sl-sidebar a.machbar-service-link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 28px;
    margin-block: 0.1rem;
    padding-block: 0.25rem;
    padding-inline: 0.15rem;
  }

  .leistungen {
    margin-bottom: 28px;
  }
}