/* ============================================================
   pleyer ai - Schnellkontakt-Knoepfe (Telefon, E-Mail, WhatsApp)
   Block <nav class="kontakt-knoepfe"> am Ende des <body> jeder Seite.

   Desktop: fest am rechten Rand, vertikal mittig, gestapelt.
   Unter 721 px: unten rechts ueber der Sticky-CTA (premium.css,
   .sticky-cta: unten 16 px, mindestens 48 px hoch, z-index 55).

   Ebenen: Sticky-CTA 55 < Knoepfe 60 < Banner 150 < Audio-Dialog 200.
   Farben, Radien und Easings kommen aus den Tokens in premium.css.
   Kein <style>-Tag, kein style-Attribut: siehe CSP in der .htaccess.
   ============================================================ */
.kontakt-knoepfe {
  position: fixed;
  z-index: 60;
  top: 50%;
  right: max(12px, env(safe-area-inset-right, 0px));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 200ms var(--ease-out);
}

.kontakt-knoepfe a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--fg);
  background-color: rgba(14, 14, 14, 0.72);
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transition:
    color 200ms var(--ease-out),
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    transform 200ms var(--ease-out);
}

.kontakt-knoepfe svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.kontakt-knoepfe a:hover {
  color: var(--bg);
  background-color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.kontakt-knoepfe a:active {
  transform: scale(0.96);
}

/* Sichtbarer Fokusrahmen, auch auf dem hellen Hover-Grund */
.kontakt-knoepfe a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}

@media (max-width: 720px) {
  .kontakt-knoepfe {
    top: auto;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(16px + 48px + 12px + env(safe-area-inset-bottom, 0px));
    transform: none;
  }
}

/* Gesetzt von kontakt.js, solange ein Kontaktformular im Bild ist: auf dem Handy wuerden die
   Knoepfe sonst die rechte Kante der Felder verdecken. Auf dem Desktop stehen sie neben dem Formular. */
@media (max-width: 720px) {
  .kontakt-knoepfe.is-pausiert {
    opacity: 0;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-knoepfe,
  .kontakt-knoepfe a {
    transition: none;
  }
  .kontakt-knoepfe a:hover,
  .kontakt-knoepfe a:active {
    transform: none;
  }
}

@media print {
  .kontakt-knoepfe {
    display: none;
  }
}