/* ============================================================
   anruf.css - Fester Anruf-Knopf (18.09.2026)

   Warum: Ein Teil der Kundschaft ruft lieber an, als ein Formular
   auszufuellen. Der Knopf schwebt deshalb dauerhaft unten und ist auf
   jeder Seite mit einem Griff erreichbar - auf dem Telefon waehlt ein
   Tippen sofort, am Rechner steht die Nummer zum Abtippen.

   Gestaltung wie die uebrigen Knoepfe der Seite: Pille, Glasflaeche,
   Lichtkante; das Hoerersymbol sitzt im Pine-Kreis wie die Zeichen auf
   der Preisseite. Farben laufen ueber dieselben Variablen wie der
   Rest, der Knopf kippt also mit hellem und dunklem Modus mit.
   ============================================================ */

.anruf-knopf{
  position:fixed;z-index:70;
  right:clamp(1rem,2.5vw,2rem);
  bottom:clamp(1rem,2.5vw,2rem);
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.6rem 1.4rem .6rem .6rem;
  border-radius:999px;border:0;
  background:rgba(var(--night-rgb),.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  color:var(--snow);text-decoration:none;
  font-family:var(--body);line-height:1.15;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  transition:transform .5s var(--lux,ease),box-shadow .5s var(--lux,ease),background .4s var(--lux,ease),opacity .35s var(--lux,ease);
}
.anruf-knopf:hover{
  transform:translateY(-2px);
  background:rgba(var(--night-rgb),.78);
  box-shadow:0 24px 46px -22px rgba(0,0,0,.65);
}
.anruf-knopf:active{ transform:translateY(1px) scale(.99) }
.anruf-knopf:focus-visible{ outline:3px solid var(--gold);outline-offset:3px }

/* Hoerer im gefuellten Kreis - dasselbe Zeichen wie in der Fusszeile */
.anruf-kreis{
  flex:0 0 auto;position:relative;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--pine);
}
.anruf-kreis svg{
  width:21px;height:21px;fill:none;stroke:#FFFFFF;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.anruf-text{display:flex;flex-direction:column;gap:.15rem}
.anruf-text small{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--snow-rgb),.62);
}
.anruf-text b{ font-size:1.02rem;font-weight:600;white-space:nowrap }

/* Ein leiser Puls beim ersten Erscheinen macht auf den Knopf
   aufmerksam, ohne zu blinken. */
.anruf-kreis::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--pine);opacity:0;
  animation:anrufPuls 3.4s ease-out 2s 3;
}
@keyframes anrufPuls{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.9);opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .anruf-knopf{transition:none}
  .anruf-kreis::after{animation:none}
}

/* Telefon: der Knopf bleibt rechts unten, wo der Daumen liegt, und
   laesst Platz fuer die Bedienleiste des Geraets. Mittig ginge nicht -
   dort steht auf der Startseite der Scroll-Hinweis. */
@media (max-width:700px){
  .anruf-knopf{
    right:.9rem;
    bottom:calc(env(safe-area-inset-bottom, 0px) + .9rem);
    padding:.5rem 1.15rem .5rem .5rem;
  }
  .anruf-kreis{width:40px;height:40px}
  .anruf-text b{font-size:.95rem}
  .anruf-text small{font-size:.6rem}
}

/* Auf der Startseite ruecken der Scroll-Hinweis und der Anruf-Knopf
   sonst uebereinander - der Hinweis steigt deshalb etwas hoeher. */
@media (max-width:700px){
  body:has(.hero) .scroll-hint{ bottom:5.6rem }
}

/* Im hellen Modus eine helle Scheibe mit dunkler Schrift */
html[data-thema="hell"] .anruf-knopf{
  background:rgba(251,250,247,.86);
  color:#17191A;
  box-shadow:0 18px 40px -26px rgba(23,25,26,.45);
}
html[data-thema="hell"] .anruf-knopf:hover{ background:rgba(251,250,247,.96) }
html[data-thema="hell"] .anruf-text small{ color:rgba(23,25,26,.6) }


/* Waehrend die Schnellbuchung im Bild steht, tritt der Knopf zurueck
   (siehe thema.js). Er verschwindet weich, damit es nicht blinkt. */
.anruf-knopf.tritt-zurueck{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}


/* Bei offenem Menue tritt der Knopf ebenfalls zurueck - sonst liegt er
   auf der Abdunklung und zieht die Aufmerksamkeit vom Menue weg. */
body.menue-offen .anruf-knopf{
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}