/* ==========================================================================
   Anruf-Button „Unfall? Wir sind schnell für Sie da.“ (Klasse .btn--anruf)
   Doming (gewölbte, glänzende Oberfläche), pulsierende Aura, der Hörer springt
   alle 5 Sekunden aus dem Button, wird größer und klingelt.
   Gilt für alle Seiten; die Startseite hat für ihren Hero-Button eigene Zeiten.
   ========================================================================== */
.btn--anruf{position:relative;isolation:isolate;z-index:1;border-color:transparent;color:var(--ink-on-signal,#10202F);text-shadow:0 1px 0 rgba(255,225,200,.22);
  background:radial-gradient(120% 90% at 50% 118%,rgba(255,222,185,.5) 0%,rgba(255,222,185,0) 55%),linear-gradient(180deg,#FF9A55 0%,#FF6B1F 46%,#E6520B 100%);
  box-shadow:inset 0 1.5px 1px rgba(255,236,220,.38),inset 0 -5px 10px rgba(130,35,0,.32),inset 0 0 0 1px rgba(255,210,170,.14),0 3px 3px rgba(60,15,0,.3),0 0 20px 3px rgba(255,107,31,.42),0 10px 26px rgba(255,107,31,.32)}
.btn--anruf:hover{background:radial-gradient(120% 90% at 50% 118%,rgba(255,226,192,.55) 0%,rgba(255,226,192,0) 55%),linear-gradient(180deg,#FFA766 0%,#FF7A33 46%,#EE5D14 100%)}
/* Glanzkuppel oben: folgt der Button-Form, sehr transparent, läuft zu den Seiten und nach unten weich aus */
.btn--anruf::before{content:"";position:absolute;z-index:-1;left:1px;right:1px;top:1px;height:54%;pointer-events:none;
  border-radius:9px 9px 50% 50%/9px 9px 26% 26%;
  background:linear-gradient(180deg,rgba(255,244,234,.30) 0%,rgba(255,244,234,.12) 55%,rgba(255,244,234,0) 100%);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
/* Hörer: gleiche Größe wie bisher, mit Platz für das runde Schild beim Herausspringen */
.btn--anruf .icon{position:relative;z-index:1;flex:none;width:1.8rem;height:1.8rem;margin:-.2rem;padding:.2rem;border-radius:50%;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .btn--anruf{animation:anruf-aura 3.2s ease-in-out infinite}
  .btn--anruf .icon{animation:anruf-hoerer 5s 2.5s ease-in-out infinite}
}
@keyframes anruf-aura{
  0%,100%{box-shadow:inset 0 1.5px 1px rgba(255,236,220,.38),inset 0 -5px 10px rgba(130,35,0,.32),inset 0 0 0 1px rgba(255,210,170,.14),0 3px 3px rgba(60,15,0,.3),0 0 18px 2px rgba(255,107,31,.36),0 10px 26px rgba(255,107,31,.3)}
  50%{box-shadow:inset 0 1.5px 1px rgba(255,236,220,.38),inset 0 -5px 10px rgba(130,35,0,.32),inset 0 0 0 1px rgba(255,210,170,.14),0 3px 3px rgba(60,15,0,.3),0 0 36px 11px rgba(255,107,31,.62),0 12px 30px rgba(255,107,31,.42)}
}
@keyframes anruf-hoerer{
  0%,42%,100%{transform:none;background-color:rgba(255,255,255,0);color:var(--ink-on-signal,#10202F);box-shadow:0 0 0 0 rgba(0,0,0,0)}
  6%{transform:translate(-8px,-28px) scale(1.95);background-color:#fff;color:#FF6B1F;box-shadow:0 6px 14px rgba(4,18,36,.4)}
  9%{transform:translate(-8px,-28px) scale(1.95) rotate(-16deg)}
  12%{transform:translate(-8px,-28px) scale(1.95) rotate(15deg)}
  15%{transform:translate(-8px,-28px) scale(1.95) rotate(-14deg)}
  18%{transform:translate(-8px,-28px) scale(1.95) rotate(12deg)}
  21%{transform:translate(-8px,-28px) scale(1.95) rotate(-10deg)}
  24%{transform:translate(-8px,-28px) scale(1.95) rotate(8deg)}
  27%{transform:translate(-8px,-28px) scale(1.95) rotate(-5deg)}
  30%,34%{transform:translate(-8px,-28px) scale(1.95) rotate(0);background-color:#fff;color:#FF6B1F;box-shadow:0 6px 14px rgba(4,18,36,.4)}
}