/* Mobile Bedienung: deckende Flaechen und kontextabhaengiger Vergleichsbutton. */

/* "hidden" muss auch bei vorhandenen display-Regeln verlaesslich greifen. */
.mobile-sticky-cta[hidden],
.mobile-menu[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  /* Keine durchscheinenden Inhalte und keine Weichzeichnung beim Wischen. */
  .nav-shell,
  .site-header.scrolled .nav-shell,
  .mobile-menu.glass {
    background: #fff;
    border-color: #d7e6ef;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-shell {
    transition: box-shadow .2s ease;
  }

  .hero .trust-row > span,
  .hero-award-item {
    background: #fff;
  }

  /* Text und Karten bleiben beim schnellen mobilen Scrollen sofort lesbar. */
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 660px) {
  .mobile-sticky-cta {
    display: none;
    position: fixed;
    z-index: 999;
    left: 10px;
    right: 10px;
    bottom: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding: 7px;
    border: 1px solid #d7e6ef;
    border-radius: 18px;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 28px rgba(8, 38, 66, .16);
    transition: none;
  }

  .mobile-sticky-cta:not([hidden]) {
    display: block;
  }

  .mobile-sticky-cta .btn {
    box-shadow: none;
  }

  /* Sprungziele werden nicht vom festen Header verdeckt. */
  #tarife,
  #leistungen,
  #beispiel,
  #faq {
    scroll-margin-top: 90px;
  }
}