/* ==========================================================================
   dr-hultzsch.de – Mobile overlay for Sparkle export
   Desktop (>=768px) stays unchanged.
   ========================================================================== */

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

@media (max-width: 959px) {
  html,
  body#b {
    overflow-x: hidden !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    zoom: 1 !important;
    --z: 1 !important;
    --s: 100vw !important;
    font-size: 16px;
  }

  body#b {
    --f: 1 !important;
  }

  body#b,
  body#b > div,
  body#b .mobile-toolbar,
  body#b .mobile-toolbar *,
  body#b ul.menu-dropdown,
  body#b ul.menu-dropdown * {
    pointer-events: auto !important;
  }

  body#b > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    padding: 0 16px 24px;
  }

  body#b div {
    max-width: 100%;
    box-sizing: border-box;
  }

  body#b [class*="ps"] {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }

  body#b [class*=" s"],
  body#b [class^="s"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body#b [class^="v"]:not(.menu-dropdown):not(#m1),
  body#b [class*=" v"]:not(.menu-dropdown):not(#m1) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    vertical-align: top;
  }

  body#b [class^="c"],
  body#b [class*=" c"] {
    overflow: visible !important;
    height: auto !important;
    pointer-events: auto !important;
  }

  body#b [class^="shm"] {
    display: none !important;
    float: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body#b p,
  body#b li,
  body#b a,
  body#b span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
  }

  body#b [class^="f"],
  body#b [class*=" f"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  body#b p {
    margin: 0 0 12px !important;
    max-width: 100%;
  }

  body#b .f3 {
    font-size: 18px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.4 !important;
  }

  body#b .mobile-header-bar,
  body#b .c8,
  body#b .c27,
  body#b .c90,
  body#b .c106 {
    background-color: #712177 !important;
    padding: 12px 16px !important;
    margin: 0 -16px 12px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    min-height: 48px !important;
  }

  body#b .f3,
  body#b .f17,
  body#b .f57,
  body#b .f65 {
    font-size: 18px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.4 !important;
    color: #fff !important;
  }

  body#b .f19,
  body#b .f20,
  body#b .f26,
  body#b .f59,
  body#b .f67 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }

  body#b .mobile-menu-host {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body#b img,
  body#b picture,
  body#b svg {
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body#b picture.i2 {
    display: block !important;
    width: auto !important;
    height: auto !important;
  }

  body#b img[src*="monitoring_icon3"],
  body#b img[src*="placeholder-"] {
    width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    display: inline-block;
    margin: 8px 8px 8px 0;
  }

  body#b img[src*="hultzsch-"],
  body#b img.i4 {
    width: 58% !important;
    max-width: 200px !important;
    height: auto !important;
    display: block;
    margin: 12px auto !important;
  }

  body#b img[src*="600994"],
  body#b img.i5,
  body#b img.i9,
  body#b img.i10,
  body#b img.i27,
  body#b img[src*="tmp_376a"],
  body#b img[src*="aerger2"] {
    width: 70% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block;
    margin: 16px auto !important;
  }

  body#b img.i50,
  body#b img[src*="hey_mama"] {
    width: 252px !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 16px auto 8px !important;
  }

  body#b .ps190,
  body#b .s213,
  body#b .c191 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  body#b .ps190 .p33 {
    text-align: center !important;
    margin: 0 auto 8px !important;
  }

  body#b .ps190 .p33:last-child {
    margin-bottom: 16px !important;
  }

  body#b .ps190 .f100 {
    display: none !important;
  }

  .mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #712177;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-toolbar button {
    appearance: none;
    border: 1px solid #fff;
    background: #fff;
    color: #712177;
    font-family: Lato, "Istok Web", sans-serif;
    font-size: 16px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
  }

  .mobile-toolbar .mobile-nav-toggle {
    font-size: 22px;
  }

  body#b ul.menu-dropdown,
  body#b ul#m1,
  body#b ul#m1:not(.mobile-open) > li {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body#b ul.menu-dropdown.mobile-open,
  body#b ul#m1.mobile-open {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 16px 12px !important;
    padding: 0 !important;
    background: #fff;
    border: 1px solid #cddee8;
    border-radius: 8px;
    overflow: hidden !important;
    z-index: 1001;
    box-shadow: 0 8px 24px rgba(113, 33, 119, 0.12);
  }

  body#b ul.menu-dropdown.mobile-open > li,
  body#b ul#m1.mobile-open > li {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e6eef3;
    box-shadow: none !important;
  }

  body#b ul.menu-dropdown > li:last-child {
    border-bottom: 0;
  }

  body#b ul.menu-dropdown a,
  body#b ul.menu-dropdown .menu-content {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 0 16px;
    box-sizing: border-box;
  }

  body#b ul.menu-dropdown p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #0d116e !important;
  }

  body#b a.btn1,
  body#b a.btn2,
  body#b a.btn3,
  body#b a.btn4,
  body#b a.btn3.s25,
  body#b a[href="impressum.html"],
  body#b a[href="datenschutzerklarung.html"],
  body#b a[href="seite-4.html"],
  body#b a[href="therapie.html"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px !important;
    height: auto !important;
    min-width: 160px !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 24px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    box-sizing: border-box;
  }
}

@media (max-width: 479px) {
  body#b a.btn1,
  body#b a.btn2,
  body#b a[href="impressum.html"],
  body#b a[href="datenschutzerklarung.html"] {
    display: flex;
    width: 100%;
    min-height: 44px;
  }
}

@media (min-width: 960px) {
  .mobile-toolbar {
    display: none !important;
  }

  body#b .s204 {
    min-height: 0 !important;
    height: auto !important;
  }

  body#b .s212 {
    width: 400px !important;
    min-width: 400px !important;
    height: 562px !important;
    min-height: 562px !important;
  }

  body#b img.i50,
  body#b img[src*="hey_mama"] {
    left: 0 !important;
    width: 400px !important;
    height: 562px !important;
    max-width: none !important;
  }

  body#b .ps190 {
    margin-left: 390px !important;
    margin-top: 12px !important;
  }

  body#b .s213,
  body#b .c191 {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body#b .ps190 .p33 {
    text-align: center !important;
    margin: 0 0 6px !important;
  }

  body#b .ps190 .f100 {
    display: none !important;
  }
}