/* Mobile-only adaptation for the legacy tzb template. Desktop rules are untouched. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 21px; line-height: 1.6; }

  #container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 16px 24px;
    margin: 0 auto;
    overflow: visible !important;
  }

  #left_border, #slideshow { display: none !important; }

  /* Explicitly bind the legacy logo asset. The template's later background shorthand
     can otherwise reset background-size if it wins the cascade. */
  #container #logo {
    float: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: min(100%, 434px) !important;
    max-width: calc(100vw - 32px) !important;
    height: min(140px, calc((100vw - 32px) * 0.32258)) !important;
    min-height: 0 !important;
    aspect-ratio: 434 / 140;
    margin: 8px auto 12px !important;
    background-image: url(../../templates/tzb/images/tanztherapie_logo.jpg) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  #main {
    display: flex;
    flex-direction: column;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    gap: 16px;
  }

  /* Use Joomla/Bootstrap's existing accessible menu button on mobile. */
  #menu {
    order: 0;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 4px !important;
    overflow: visible !important;
  }
  #menu .moduletable._menu,
  #menu nav {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #menu .moduletable._menu .navbar-toggler.navbar-toggler-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid #075b68 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #075b68 !important;
    cursor: pointer;
  }
  #menu .moduletable._menu .navbar-toggler.navbar-toggler-right:focus-visible {
    outline: 3px solid #075b68;
    outline-offset: 2px;
  }
  #menu .moduletable._menu .navbar-toggler.navbar-toggler-right .icon-menu { display: none !important; }
  #menu .moduletable._menu .navbar-toggler.navbar-toggler-right::before {
    content: "";
    display: block;
    width: 20px;
    height: 16px;
    background: linear-gradient(to bottom,
      #075b68 0 3px, transparent 3px 6.5px,
      #075b68 6.5px 9.5px, transparent 9.5px 13px,
      #075b68 13px 16px);
  }
  #menu .moduletable._menu .navbar-toggler.navbar-toggler-right[aria-expanded="true"] { background-color: #eef5f6; }
  #menu .navbar-collapse.collapse:not(.show) { display: none !important; }
  #menu .navbar-collapse.collapsing { display: block !important; }
  #menu .navbar-collapse.show,
  #menu .navbar-collapse.collapse.show {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #menu ul.mod-menu,
  #menu ul.mod-menu li,
  #menu ul.mod-menu li ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
  }
  #menu ul.mod-menu { padding-top: 6px !important; }
  #menu ul.mod-menu li { border-bottom: 1px solid #d7e2e5; }
  #menu ul.mod-menu li ul { padding-left: 14px !important; }
  #menu ul.mod-menu li a,
  #menu ul.mod-menu li a:link,
  #menu ul.mod-menu li a:visited {
    display: block;
    margin: 0 !important;
    padding: 9px 10px !important;
    color: #075b68 !important;
    font-size: 21px !important;
    font-weight: 600;
    line-height: 1.35 !important;
    text-decoration: none;
  }
  #menu ul.mod-menu li.active > a {
    color: #004b57 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Put article text before its associated image; retain a small reading gutter. */
  #content, #content_full {
    order: 1;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    overflow: visible !important;
    text-align: left;
  }
  #photo {
    order: 2;
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    overflow: visible !important;
    text-align: left;
  }
  #photo img, #content img, #content_full img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Unwrap the legacy scripted pane so the document uses ordinary browser scrolling. */
  .jScrollPaneContainer, #pane, .scroll-pane, .mobiledev {
    position: static !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .jScrollPaneTrack, .jScrollCap, .jScrollPaneDrag,
  .jScrollPaneDragTop, .jScrollPaneDragBottom,
  a.jScrollArrowUp, a.jScrollArrowDown { display: none !important; }
  #pane > *, #pane > * > * { position: static !important; }
  .jScrollPaneContainer { z-index: auto !important; }

  #content table, #content_full table {
    max-width: 100% !important;
    height: auto !important;
  }
  #content p, #content_full p, #content li, #content_full li {
    font-size: 1.2em;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  #content h1, #content_full h1 { font-size: 1.45em; line-height: 1.25; }
  #content h2, #content_full h2 { font-size: 1.25em; line-height: 1.3; }
  #footer {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 20px 0 0 !important;
  }
}