/* =========================================================
   ROLLEX Mega Menu - VISUAL / CONTRAST FIX v2.2
   Muss nach mega-menu.css und mega-menu-layout.css geladen werden.
   ========================================================= */

/* ---------- Kontrast: Seitennavigation / Sprache / Kontakt ---------- */
.rf-page-anchor-list a:hover,
.rf-page-anchor-list a:focus,
.rf-page-anchor-list a.is-active {
  background: var(--brand, #006729) !important;
  color: #fff !important;
  border-color: var(--brand, #006729) !important;
}

.rf-page-anchor-list a:hover *,
.rf-page-anchor-list a:focus *,
.rf-page-anchor-list a.is-active * {
  color: #fff !important;
}

.rf-left-floating-bar .rf-left-floating-btn:hover,
.rf-left-floating-bar .rf-left-floating-btn:focus,
.rf-left-floating-bar .rf-left-floating-btn.active {
  background: var(--brand, #006729) !important;
  border-color: var(--brand, #006729) !important;
  color: #fff !important;
}

.rf-left-floating-bar .rf-left-floating-btn:hover *,
.rf-left-floating-bar .rf-left-floating-btn:focus *,
.rf-left-floating-bar .rf-left-floating-btn.active * {
  color: #fff !important;
}

.rf-left-floating-bar .rf-left-floating-btn:not(.active) {
  background: rgba(255,255,255,.94);
}

.rf-floating-contact-button,
.rf-floating-contact-button:hover,
.rf-floating-contact-button:focus,
.btn-brand,
.btn-brand:visited,
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
  color: #fff !important;
}

.rf-floating-contact-button {
  background: var(--brand, #006729) !important;
}

.rf-floating-contact-button:hover,
.rf-floating-contact-button:focus,
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active {
  background: var(--brand-dark, #004d1f) !important;
  border-color: var(--brand-dark, #004d1f) !important;
}

.rf-floating-contact-button *,
.rf-floating-contact-button:hover *,
.rf-floating-contact-button:focus *,
.btn-brand *,
.btn-brand:hover *,
.btn-brand:focus *,
.btn-brand:active * {
  color: #fff !important;
}

.btn-brand,
.btn-brand:visited {
  background: var(--brand, #006729) !important;
  border-color: var(--brand, #006729) !important;
}

.active.bg-success,
.btn-success,
.badge.bg-success {
  color: #fff !important;
}

/* ---------- Desktop: ruhiger, technischer, bildorientierter ---------- */
@media (min-width: 992px) {
  .rf-demo-panel,
  .rf-demo-panel--wide {
    gap: 1rem !important;
    padding: 1.15rem !important;
    border-radius: 24px !important;
    background: rgba(247, 253, 250, .98) !important;
  }

  .rf-demo-intro {
    min-width: 0;
    padding: 1.35rem !important;
    border-radius: 20px !important;
  }

  .rf-demo-product-grid {
    gap: .72rem !important;
    min-width: 0;
    align-content: start;
  }

  .rf-product-tile {
    min-width: 0;
    min-height: 0;
    padding: .72rem .78rem .82rem !important;
    gap: .34rem !important;
    align-content: start;
    grid-auto-rows: max-content;
    border-radius: 15px !important;
    border-color: rgba(0, 103, 41, .13) !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 5px 14px rgba(9,28,17,.035);
  }

  .rf-product-tile:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0, 103, 41, .30) !important;
    box-shadow: 0 10px 24px rgba(9,28,17,.09) !important;
  }

  .rf-product-tile > .rf-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: .2rem .48rem !important;
    border-radius: 999px;
    font-size: .61rem !important;
    line-height: 1.1;
    white-space: nowrap;
  }

  .rf-product-tile > .rf-menu-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 58px !important;
    height: 58px !important;
    margin: .05rem 0 .08rem !important;
  }

  .rf-product-tile > .rf-menu-image-wrap img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 92% !important;
    max-height: 56px !important;
    object-fit: contain;
  }

  .rf-product-tile > strong,
  .rf-product-tile > small {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  .rf-product-tile > strong {
    margin-top: .05rem;
    font-size: .88rem !important;
    line-height: 1.2 !important;
  }

  .rf-product-tile > small {
    font-size: .73rem !important;
    line-height: 1.3 !important;
  }

  /* Reine Bildkacheln ohne Titel/Text bewusst kompakter. */
  .rf-product-tile--visual-only {
    min-height: 116px !important;
  }

  .rf-product-tile--visual-only > .rf-menu-image-wrap {
    min-height: 70px !important;
    height: 70px !important;
    margin-top: .12rem !important;
  }

  .rf-product-tile--visual-only > .rf-menu-image-wrap img {
    max-height: 68px !important;
  }

  .rf-product-tile--no-text > strong {
    margin-top: .12rem;
  }
}

/* ---------- Mobile: kompakte Produktzeilen statt Mini-Desktopkarten ---------- */
@media (max-width: 991.98px) {
  .rf-demo-product-grid {
    gap: .5rem !important;
  }

  .rf-product-tile {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: .72rem !important;
    row-gap: .15rem !important;
    min-height: 0 !important;
    padding: .62rem .68rem !important;
    border-radius: 12px !important;
    align-items: start !important;
    align-content: center !important;
    background: #fff !important;
  }

  .rf-product-tile > .rf-menu-image-wrap {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    width: 64px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-content: center !important;
  }

  .rf-product-tile > .rf-menu-image-wrap img {
    width: auto !important;
    height: auto !important;
    max-width: 60px !important;
    max-height: 52px !important;
    object-fit: contain;
  }

  .rf-product-tile > .rf-menu-badge,
  .rf-product-tile > strong,
  .rf-product-tile > small {
    grid-column: 2 !important;
    min-width: 0;
  }

  .rf-product-tile > .rf-menu-badge {
    grid-row: 1 !important;
    justify-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: .16rem .4rem !important;
    font-size: .56rem !important;
  }

  .rf-product-tile > strong {
    grid-row: 2 !important;
    font-size: .84rem !important;
    line-height: 1.2 !important;
  }

  .rf-product-tile > small {
    grid-row: 3 !important;
    font-size: .72rem !important;
    line-height: 1.28 !important;
  }

  /* Bild-only auf Mobile bleibt ebenfalls sauber. */
  .rf-product-tile--visual-only {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    padding: .55rem !important;
  }

  .rf-product-tile--visual-only > .rf-menu-badge,
  .rf-product-tile--visual-only > .rf-menu-image-wrap {
    grid-column: 1 !important;
  }

  .rf-product-tile--visual-only > .rf-menu-badge {
    grid-row: 1 !important;
    justify-self: start !important;
  }

  .rf-product-tile--visual-only > .rf-menu-image-wrap {
    grid-row: 2 !important;
    width: 100% !important;
  }
}