/* =========================================================
   ROLLEX MOBILE
   Navigation + Mega Menu + mobile typography
   ========================================================= */

@media (max-width: 991.98px) {

  /* -------------------------------------------------------
     HEADER
     ------------------------------------------------------- */

  .main-nav {
    position: sticky;
    top: 0;
    z-index: 5000;
  }

  .main-nav > .container-fluid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .brand-logo {
    height: 34px !important;
    max-width: 145px !important;
  }

  .navbar-brand span {
    font-size: .9rem;
  }

  .navbar-toggler {
    padding: .45rem;
    border: 1px solid rgba(0, 103, 41, .18);
    border-radius: 12px;
  }

  #mainNavbar {
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .75rem 0 1.25rem;
  }

  /* -------------------------------------------------------
     MAIN MENU
     ------------------------------------------------------- */

  .rf-demo-mega {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .45rem;
  }

  .rf-demo-item {
    position: relative;
    width: 100%;
  }

  .rf-demo-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 46px;

    padding: .75rem .9rem;

    border-radius: 12px;

    background: rgba(0, 103, 41, .055);

    font-size: .78rem !important;
    line-height: 1.25;

    letter-spacing: .035em;

    white-space: normal;

    text-align: left;
  }

  /*
   * Kein Desktop Hover-Menü mobil.
   */
  .rf-demo-panel,
  .rf-demo-panel--wide {
    position: static !important;

    display: none;

    width: 100% !important;
    max-width: none !important;

    margin: .4rem 0 0;

    padding: .75rem;

    grid-template-columns: 1fr !important;

    border: 0;
    border-radius: 14px;

    box-shadow: none;

    background: #f7faf8;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto !important;
  }

  /*
   * Nur explizit geöffnete Elemente anzeigen.
   */
  .rf-demo-item.open > .rf-demo-panel {
    display: grid !important;
  }

  /*
   * Hover darf mobil nichts öffnen.
   */


  .rf-demo-item.open > .rf-demo-panel,
  .rf-demo-item.open > .rf-demo-panel.mobile-open {
    display: grid !important;
  }

  /* -------------------------------------------------------
     MEGA MENU CONTENT
     ------------------------------------------------------- */

  .rf-demo-intro {
    padding: .85rem;
    border-radius: 13px;
  }

  .rf-demo-kicker {
    font-size: .62rem;
  }

  .rf-demo-intro h3 {
    font-size: 1.15rem !important;
    line-height: 1.2;
  }

  .rf-demo-intro p {
    font-size: .84rem;
    line-height: 1.5;
  }

  .rf-demo-cta {
    padding: .65rem .8rem;
    font-size: .8rem;
  }

  .rf-demo-col {
    gap: .15rem;
  }

  .rf-demo-col h4 {
    margin: .4rem 0;
    font-size: .92rem;
  }

  .rf-demo-col a {
    padding: .55rem .35rem;
    font-size: .82rem;
    line-height: 1.35;
  }

  .rf-demo-product-grid {
    grid-template-columns: 1fr !important;
    gap: .5rem;
  }

  .rf-product-tile {
    grid-template-columns: auto 1fr;
    align-items: center;

    min-height: 0;

    padding: .7rem;

    border-radius: 13px;
  }

  .rf-menu-image-wrap {
    width: 42px;
    min-height: 42px;
    margin: 0;
  }

  .rf-menu-image-wrap img {
    max-width: 38px !important;
    max-height: 38px !important;
  }

  .rf-product-tile strong {
    font-size: .85rem;
  }

  .rf-product-tile small {
    font-size: .72rem;
  }

  /* -------------------------------------------------------
     GENERAL MOBILE TYPOGRAPHY
     ------------------------------------------------------- */

  .section-spacing {
    padding: 2.5rem 0;
  }

  main > section > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .section-head h2,
  .section-body h1,
  .section-body h2 {
    font-size: clamp(
      1.65rem,
      7vw,
      2.25rem
    ) !important;

    line-height: 1.1;
  }

  .section-head span {
    font-size: .72rem !important;
    line-height: 1.4;
  }

  .product-card h3,
  .news-card-body h3,
  .rf-contact-card h3 {
    font-size: 1.12rem !important;
    line-height: 1.25;
  }

  .section-body,
  .section-body p,
  .lead {
    font-size: .95rem !important;
    line-height: 1.6;
  }

  .product-card {
    padding: 1.25rem;
    border-radius: 18px;
  }

  .rf-accordion-header {
    min-height: 64px;
    padding: 1rem 1.1rem;
    font-size: .98rem !important;
  }

  .rf-accordion-body {
    padding: 0 1.1rem 1.2rem;
    font-size: .9rem;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 575.98px) {

  .brand-logo {
    height: 30px !important;
  }

  .navbar-brand span {
    display: none;
  }

  .rf-demo-link {
    font-size: .74rem !important;
  }

  .section-head h2,
  .section-body h1,
  .section-body h2 {
    font-size: 1.65rem !important;
  }

  .section-head h2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
