/* ===========================================================================
   MyMuell.de — Bausteine, die auf mehreren Seiten vorkommen
   ===========================================================================
   Hier steht, was nicht zu einer einzelnen Seite gehoert. Diese Datei wird
   ueber partials/kopf-assets.php auf jeder Seite geladen.
   Seiteneigene Dateien werden danach eingebunden und koennen ueberschreiben.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Der aktive Menuepunkt
   --------------------------------------------------------------------------
   Das Theme zeichnet ihn nicht aus — weder oben noch im aufgeklappten Menue
   auf dem Telefon, wo alle Punkte gleich aussahen.
   -------------------------------------------------------------------------- */
.navbar-nav .nav-link.active { color: #e55b13; }

@media (max-width: 991.98px) {
  /* Im aufgeklappten Menue steht heller Text auf dunklem Grund. Ein Balken
     am linken Rand traegt hier weiter als eine Farbaenderung allein.
     Das Theme setzt dort color:#fff mit !important — dagegen hilft nur
     dieselbe Auszeichnung. */
  .offcanvas-nav .navbar-nav .nav-link.active {
    color: #fdba74 !important;
    position: relative;
  }
  .offcanvas-nav .navbar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: #f78b77;
  }
}


.chat-live-badge {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .4rem .9rem .4rem .6rem;
      background: rgba(247,139,119,.15);
      color: #d76a58;
      border-radius: 100px;
      /* .75rem statt .82: liegt damit auf der Stufe der Auszeichnungs-
         zeilen und nicht dazwischen. */
      font-size: .75rem; font-weight: 600;
      margin-bottom: 1rem;
    }

.chat-live-badge .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #2e7d32;
      animation: chatPulse 2s infinite;
    }

@keyframes chatPulse {
      0%   { box-shadow: 0 0 0 0 rgba(46,125,50,.55); }
      70%  { box-shadow: 0 0 0 10px rgba(46,125,50,0); }
      100% { box-shadow: 0 0 0 0 rgba(46,125,50,0); }
    }

/* --------------------------------------------------------------------------
   Hinweis "Neu"
   --------------------------------------------------------------------------
   Eigene Auszeichnung statt der Kombination aus bg-soft-orange und
   text-orange: die beiden ergaben oranger Text auf hellrosa Grund, ein
   Kontrast von 2,2 zu 1. Lesbar wird Text ab 4,5 zu 1.

   Der dunkle Grund traegt weisse Schrift mit 5,2 zu 1 und faellt dabei
   staerker auf — was bei einem Neuheitshinweis ja der Zweck ist.
   -------------------------------------------------------------------------- */
.mm-neu {
  display: inline-block;
  background: #c2410c;
  color: #fff;
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: .2em .8em;
  border-radius: 50rem;
  vertical-align: 0.12em;
  margin-right: .55rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Feste Leiste beim Scrollen
   --------------------------------------------------------------------------
   Das Theme setzt sie auf rgba(255,255,255,.97), also drei Prozent
   durchsichtig. Beim Scrollen blitzt dadurch der Inhalt dahinter durch —
   besonders auffaellig neben einem Modulkopf, der selbst stehen bleibt.
   -------------------------------------------------------------------------- */
.banner--stick.transparent,
.banner--stick:not(.navbar-dark) {
  background: #ffffff;
}