/* ============================================================
   digitalantrieb / 11 - WHATSAPP

   Ein eigenes Stylesheet, weil der Button auf der Startseite
   UND auf allen Unterseiten steht. Zwei Fassungen in zwei
   Dateien waeren zwei Fassungen, die auseinanderlaufen.

   Das Zeichen ist als Inline-SVG gezeichnet, nicht von einem
   Meta-Server geladen. Sonst haette ausgerechnet der Button,
   der Datenschutz kosten kann, schon beim Seitenaufruf Daten
   uebertragen - und zwar bei jedem Besucher, auch bei denen,
   die nie darauf klicken.
   ============================================================ */

.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 60;

  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  padding: 0.85rem 1.15rem;
  border-radius: var(--r-round);
  text-decoration: none;

  /* Das WhatsApp-Gruen, nicht die Markenfarbe: der Button soll
     sofort als das erkannt werden, was er ist. Ein orangefarbener
     WhatsApp-Button wird uebersehen. */
  background: #25D366;
  color: #07261A;

  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform var(--d-l3) var(--e-out),
              box-shadow var(--d-l3) var(--e-out);
}

.wa:hover,
.wa:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.wa:focus-visible {
  outline: 2px solid var(--chalk);
  outline-offset: 3px;
}

.wa svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* Auf schmalen Bildschirmen bleibt nur das Zeichen. Der Text
   wuerde dort ueber die halbe Breite laufen und den Inhalt
   verdecken, den er bewerben soll. */
@media (max-width: 40rem) {
  .wa {
    padding: 0.9rem;
    gap: 0;
  }
  .wa__text { display: none; }
  .wa svg { width: 24px; height: 24px; }
}

/* Der Button darf den Fussbereich nicht dauerhaft verdecken.
   Am Seitenende tritt er zurueck, sobald der Footer sichtbar
   ist: dort stehen Telefonnummer und Adresse ohnehin. */
.wa.is-weg {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

html[data-motion="off"] .wa { transition: none; }

/* Waehrend der Eroeffnung ist der Button noch nicht da. Er
   wuerde sonst als einziges Element auf der schwarzen Flaeche
   stehen und die Inszenierung vorwegnehmen. Der Uebergang
   laeuft ueber dieselbe Klasse wie das Zuruecktreten im
   Fussbereich, nur umgekehrt. */
html[data-motion="on"]:not(.is-ready) .wa {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.wa {
  transition: transform var(--d-l3) var(--e-out),
              box-shadow var(--d-l3) var(--e-out),
              opacity 0.5s var(--e-out);
}