/* Responsive compatibility layer – keeps the desktop design unchanged. */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }

@media screen and (max-width: 1024px) {
  .container, .section-wrapper { max-width: 100%; }
  .box-image, .content-image { max-width: 100%; height: auto; }
  .headslider, .contentslider { max-width: 100%; }
  input, textarea, select, button { max-width: 100%; }
}

@media screen and (max-width: 767px) {
  /* Prevent legacy Bootstrap rows/offsets from pushing content off screen. */
  .row { max-width: 100%; }
  [class*="col-"] { min-width: 0; }
  .section-content { margin-left: 0 !important; margin-right: 0 !important; }
  .content-box { padding-left: 15px; padding-right: 15px; }
  .text-wrapper-mobile { max-width: 100%; }

  /* Slider/reference images stack naturally on narrow displays. */
  .headslider, .contentslider, .referenz-carousel { width: 100% !important; float: none !important; }
  .thumb-img, .big-img { width: 100%; max-width: 100%; }
  .thumb-img img, .big-img img { width: 100%; height: auto; object-fit: cover; }

  /* Long contact/legal text must never create horizontal scrolling. */
  p, a, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-wrap: break-word; }

  /* Cookie notice remains usable instead of extending beyond viewport. */
  #alert { width: 100%; max-width: 100%; }
  #alert .row { margin-left: 0; margin-right: 0; }
}

@media screen and (max-width: 479px) {
  /* Preserve the visual hierarchy while fitting very small phones. */
  #brand { max-width: 100%; height: auto; }
  .owl-carousel img { max-width: 100%; height: auto; }
  .frame { max-width: 100%; }
  input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; box-sizing: border-box; }
}

/* Mobile sidepanel: keep the legacy menu completely off-canvas while closed.
   master.js calculates the old position from .sidebar-content, which can be wider
   than the actual capped sidepanel and leave part of it visible on some screens. */
@media screen and (max-width: 1024px) {
  .mobile-sidepanel:not(.sb-show) {
    left: -100vw !important;
  }

  .mobile-sidepanel.sb-show {
    left: 0 !important;
  }
}