@charset "UTF-8";
/* RM Time — WhatsApp-Knopf. Ersatz für das Elfsight-Widget 35304fd7. */

.rmw {
  --rmw-bubble-bg: #000;
  --rmw-bubble-fg: #fff;
  /* 44px: dasselbe Mass wie das Cookie-Abzeichen von Usercentrics
     (gemessen am Live-Shop, .privacyButton, 44x44 bei 40px Rand).
     Der Knopf soll danebenstehen, nicht herausstechen. */
  --rmw-bubble-size: var(--rmw-stapel-groesse, 44px);

  --rmw-panel-w: 360px;
  --rmw-panel-bg: #fff;
  --rmw-chat-bg: #702020;
  --rmw-text: #111;
  --rmw-send: #25d366;

  --rmw-font: "Josefin Sans", sans-serif;

  position: fixed;
  z-index: 9998;
  font-family: var(--rmw-font);
  line-height: normal;
}
.rmw *,
.rmw *::before,
.rmw *::after { box-sizing: border-box; }

/* ---------- Knopf ---------- */
/* ---------------------------------------------- Spalte unten rechts
   Der Pfeil „nach oben" gehört dem Theme, steht aber in derselben Ecke.
   Damit beide gleich gross und mittig übereinander sitzen, bestimmt
   diese Datei die Spalte für beide.

   Der Pfeil blendet sich über `transform: translateY()` ein — `bottom`,
   `right`, `width` und `height` sind statisch und dürfen deshalb gesetzt
   werden, ohne die Animation zu stören (am Live-Shop geprüft).

   Reihenfolge: unten der Pfeil, darüber WhatsApp. Der Pfeil fährt beim
   Scrollen von unten herein; läge er oben, würde er dabei hinter dem
   WhatsApp-Knopf durchlaufen.

   Die Randwerte spiegeln das Cookie-Abzeichen auf der Gegenseite
   (gemessen: 40px am Rechner, 24px am Handy). */

:root {
  --rmw-stapel-groesse: 44px;
  --rmw-stapel-luft: 12px;

  /* Beide Knöpfe sind schwarz. Auf dem schwarzen Fussbereich der Seite
     verschwindet der Kreis sonst vollständig und es schwebt nur noch das
     weisse Zeichen — es sieht dann nicht mehr nach einem Knopf aus.
     Der haarfeine helle Ring trennt ihn dort vom Hintergrund und ist auf
     hellem Grund praktisch unsichtbar. */
  --rmw-ring: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.rmw,
body .scroll-up-button { right: var(--rmw-x, 40px); }

body .scroll-up-button {
  width: var(--rmw-stapel-groesse);
  height: var(--rmw-stapel-groesse);
  bottom: var(--rmw-y, 40px);
}

/* Der Pfeil besteht aus zwei Teilen: aussen ein durchsichtiges, eckiges
   div, darin der sichtbare runde Knopf. Groesse und Ring gehoeren an den
   inneren Knopf — am aeusseren div ergaebe der Ring ein Quadrat um einen
   Kreis. */
body .scroll-up-button > .btn {
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), var(--rmw-ring);
}

.rmw {
  bottom: calc(var(--rmw-y, 40px) + var(--rmw-stapel-groesse) + var(--rmw-stapel-luft));
}

.rmw__bubble {
  width: var(--rmw-bubble-size);
  height: var(--rmw-bubble-size);
  border: 0;
  border-radius: 100px;
  /* Kein Polster: die Blase zentriert ihren Inhalt ohnehin per Flexbox.
     Mit box-sizing: border-box fraesse ein Polster von 16px bei einer
     44px-Blase die Innenflaeche auf 12px zusammen — das Zeichen wurde
     dadurch schmalgedrueckt statt kleiner zu werden. */
  padding: 0;
  background: var(--rmw-bubble-bg);
  color: var(--rmw-bubble-fg);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15), var(--rmw-ring);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.rmw__bubble svg {
  width: 24px; height: 24px;
  flex: none;            /* sonst darf Flexbox das Zeichen stauchen */
  display: block; fill: currentColor;
}
.rmw__bubble:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), var(--rmw-ring); }
.rmw__bubble:focus-visible { outline: 2px solid var(--rmw-send); outline-offset: 3px; }

/* Aufmerksamkeits-Wippen alle 10 s, wie im Original */
.rmw__bubble--wave { animation: rmw-wave 900ms ease-in-out; }
@keyframes rmw-wave {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
}

/* ---------- Fenster ---------- */
.rmw__panel {
  position: absolute;
  right: 0;
  bottom: calc(var(--rmw-bubble-size) + 12px);
  width: var(--rmw-panel-w);
  max-width: calc(100vw - 2 * var(--rmw-x, 20px));
  border-radius: 16px;
  overflow: hidden;
  background: var(--rmw-panel-bg);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  transform-origin: bottom right;
  transform: scale(0.9) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 180ms ease, opacity 180ms ease, visibility 180ms;
}
.rmw--open .rmw__panel {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.rmw__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(17, 17, 17, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rmw__close:hover { color: var(--rmw-text); }
.rmw__close svg { width: 12px; height: 12px; display: block; }

.rmw__head { padding: 20px; background: var(--rmw-panel-bg); }
.rmw__name { font-size: 16px; font-weight: 700; line-height: 20px; color: var(--rmw-text); }
.rmw__caption {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: rgba(17, 17, 17, 0.55);
}

.rmw__chat { background: var(--rmw-chat-bg); padding: 10px 20px 12px; }
.rmw__time {
  text-align: right;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 12px;
}
.rmw__msg { position: relative; display: inline-block; max-width: 247px; margin-left: 9px; }
.rmw__tail { position: absolute; left: -9px; top: 0; width: 9px; height: 17px; color: #fff; }
.rmw__tail svg { display: block; width: 9px; height: 17px; }
.rmw__bubbletext {
  background: #fff;
  color: var(--rmw-text);
  border-radius: 0 16px 16px 16px;
  padding: 6px 14px;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rmw__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 20px;
  background: var(--rmw-panel-bg);
}
.rmw__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--rmw-text);
  padding: 3px 0;
}
.rmw__input::placeholder { color: rgba(17, 17, 17, 0.45); }
.rmw__send {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  padding: 6px;
  background: var(--rmw-send);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rmw__send:hover { filter: brightness(1.06); }
.rmw__send svg { width: 100%; height: 100%; display: block; fill: currentColor; }

@media (max-width: 767px) {
  /* Am Handy rückt die ganze Spalte näher an den Rand — genau wie das
     Cookie-Abzeichen, das dort ebenfalls von 40px auf 24px wechselt. */
  .rmw,
  body .scroll-up-button { right: var(--rmw-x-mobile, 24px); }

  body .scroll-up-button { bottom: var(--rmw-y-mobile, 24px); }

  .rmw {
    bottom: calc(var(--rmw-y-mobile, 24px) + var(--rmw-stapel-groesse) + var(--rmw-stapel-luft));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rmw__bubble, .rmw__panel { transition: none; }
  .rmw__bubble--wave { animation: none; }
}