/* ==========================================================================
   ads-monitoring.de – Mobile overlay for Sparkle export
   Extends Sparkle CSS. Desktop (>=768px) stays unchanged.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   Standard = phones (<480px) and small tablets (<768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  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,
  body#b > div,
  body#b .mobile-toolbar,
  body#b .mobile-toolbar * {
    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;
  }

  /* Un-pin Sparkle's fixed canvas widths / negative offsets */
  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(.menu-dropdown-1):not(.s23):not(.mobile-store-top):not(.s129):not(.s96):not(.s159):not(.s64),
  body#b [class*=" v"]:not(.menu-dropdown):not(.menu-dropdown-1):not(.s23):not(.mobile-store-top):not(.s129):not(.s96):not(.s159):not(.s64) {
    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 p,
  body#b li,
  body#b a,
  body#b span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
  }

  /* 7. Text & readability */
  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%;
  }

  /* Headlines a bit larger than body copy */
  body#b .f6,
  body#b .f7,
  body#b .f8,
  body#b .f13,
  body#b .f15,
  body#b .f16 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  body#b .f12 {
    font-size: 22px !important;
    line-height: 1.35 !important;
    color: #712177 !important;
  }

  /* Header bar */
  body#b [style*="background-color:#712177"],
  body#b .c13,
  body#b .c294,
  body#b .c340,
  body#b .c369,
  body#b .c400,
  body#b .c436,
  body#b .c474,
  body#b .c501,
  body#b .c528,
  body#b .c562,
  body#b .c242 {
    background-color: #712177;
    padding: 12px 16px;
    margin: 0 -16px 12px !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
  }

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

  /* 3. Images */
  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: 100% !important;
    height: auto !important;
  }

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

  body#b img[src*="monitoring_icon3-50"],
  body#b img[src*="monitoring_icon3-100"],
  body#b img[src*="monitoring_icon3-150"],
  body#b img[src*="monitoring_icon3-300"] {
    width: 96px !important;
    max-width: 96px !important;
    height: auto !important;
    margin: 16px auto;
    display: block;
  }

  body#b img.un2,
  body#b img.i3,
  body#b img[src*="chatgpt-image"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 58% !important;
    max-width: 220px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block;
    margin: 12px auto !important;
    object-fit: cover;
  }

  body#b img[src*="gruneshackchen"] {
    display: none !important;
  }

  body#b a[href*="apps.apple.com"],
  body#b a[href*="play.google.com"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px;
    margin: 10px 0;
    padding: 0;
  }

  body#b a[href*="play.google.com"] svg,
  body#b svg.i4,
  body#b svg.i8,
  body#b a[href*="apps.apple.com"] img,
  body#b img[src*="appstore-button"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
  }

  /* 5. Hero: stack image above text, smaller on phones */
  body#b .i3,
  body#b img[src*="chatgpt-image"] {
    width: 58% !important;
    max-width: 220px !important;
    height: auto !important;
    border-width: 3px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  body#b .mobile-store-top,
  body#b .mobile-store-top[class^="v"],
  body#b .mobile-store-top[class*=" v"],
  body#b [class^="v"].ps120.s129.c158,
  body#b [class*=" v"].ps120.s129.c158,
  body#b [class^="v"].ps90.s96.c119,
  body#b [class*=" v"].ps90.s96.c119,
  body#b [class^="v"].ps150.s159.c198,
  body#b [class*=" v"].ps150.s159.c198,
  body#b [class^="v"].ps58.s64.c78,
  body#b [class*=" v"].ps58.s64.c78,
  body#b .ps120.s129.c158,
  body#b .ps90.s96.c119,
  body#b .ps150.s159.c198,
  body#b .ps58.s64.c78,
  body#b .ps120.s129.c158 *,
  body#b .ps90.s96.c119 *,
  body#b .ps150.s159.c198 *,
  body#b .ps58.s64.c78 * {
    display: none !important;
  }

  .mobile-store-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 16px 0 8px;
  }

  .mobile-store-bottom a {
    display: block !important;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Index: hide the first Play/App Store pair under the hero */
  body#b .v3.s23.w1,
  body#b .s23,
  body#b .s23 *,
  body#b .s23 a,
  body#b .s23 a[href*="play.google.com"],
  body#b .s23 a[href*="apps.apple.com"],
  body#b .c34,
  body#b .c37,
  body#b svg.i4,
  body#b img.un6,
  body#b img.i6 {
    display: none !important;
  }

  /* Hide decorative empty color chips on mobile */
  body#b .s15:empty,
  body#b .s31:empty {
    display: none !important;
  }

  /* 6. Feature copy as stacked cards */
  body#b p:has(> .f17),
  body#b .f17 {
    display: block;
    background: #f4f7f9;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0 !important;
  }

  /* --------------------------------------------------------------------------
     1. Language nav  |  2. Main nav
     -------------------------------------------------------------------------- */
  .mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 0 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
  }

  .mobile-toolbar button {
    appearance: none;
    border: 1px solid #712177;
    background: #712177;
    color: #fff;
    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-lang-toggle {
    background: #fff;
    color: #712177;
  }

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

  body#b ul.menu-dropdown,
  body#b ul.menu-dropdown-1 {
    display: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 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(13, 17, 110, 0.12);
  }

  body#b ul.menu-dropdown.mobile-open,
  body#b ul.menu-dropdown-1.mobile-open {
    display: block !important;
  }

  ul.menu-dropdown > li,
  ul.menu-dropdown-1 > li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e6eef3;
  }

  ul.menu-dropdown > li:last-child,
  ul.menu-dropdown-1 > li:last-child {
    border-bottom: 0;
  }

  ul.menu-dropdown a,
  ul.menu-dropdown-1 a,
  ul.menu-dropdown .menu-content,
  ul.menu-dropdown-1 .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;
  }

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

  /* 8. Footer */
  body#b a[href="datenschutz.html"],
  body#b a[href="impressum.html"],
  body#b a[href="privacy-policy.html"] {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px !important;
  }
}

@media (max-width: 479px) {
  body#b > div {
    padding: 0 16px 24px;
  }

  body#b a[href="datenschutz.html"],
  body#b a[href="impressum.html"],
  body#b a[href="privacy-policy.html"] {
    display: flex;
    width: 100%;
    min-height: 44px;
  }

  body#b a[href*="apps.apple.com"],
  body#b a[href*="play.google.com"] {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   480px–767px: two-up store buttons
   -------------------------------------------------------------------------- */
@media (min-width: 480px) and (max-width: 767px) {
  body#b .s23,
  body#b .s24,
  body#b .s25,
  body#b .s28 {
    display: none !important;
  }

  body#b .s35,
  body#b .s36,
  body#b .s37 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4%;
  }

  .mobile-store-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4%;
  }

  .mobile-store-bottom a {
    width: 48% !important;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Desktop: hide injected mobile chrome
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .mobile-toolbar,
  .mobile-store-bottom {
    display: none !important;
  }

  /* Match index.html menu x-position (42px). Images follow to the right. */
  body#b .ps250,
  body#b .ps288,
  body#b .ps400,
  body#b .ps331 {
    margin-left: 28px !important;
  }

  body#b .ps254,
  body#b .ps259 {
    margin-left: 0 !important;
  }
  body#b .ps254 {
    margin-left: 271px !important;
  }

  /* adhs-im-erwachsenenalter: first copy sits under the phone, not beside leftover menu slots */
  body#b .ps296.c367,
  body#b .c367 {
    margin-left: 0 !important;
    margin-top: 16px !important;
  }

  body#b .s288.c367 {
    width: 788px !important;
    min-width: 0 !important;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
  }

  body#b .c367,
  body#b .s284 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

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

  body#b .ps291 {
    margin-top: 12px !important;
  }

  body#b .ps265,
  body#b .ps271,
  body#b .ps272,
  body#b .ps273,
  body#b .ps274 {
    margin-left: 33px !important;
    margin-top: 16px !important;
  }
}