/* ============================================================
   Bausteinlager „Deine neue Webseite" — flussleiste.css (31.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-flussleiste-20261031 · eigene Umsetzung, kein fremder Code
   Handy-Leiste unten (Anrufen, WhatsApp, Termin …) mit einem Tropfen, der flüssig von Punkt zu Punkt fließt.
   Die Leiste selbst hat eine Mulde, in der der Tropfen sitzt; Mulde und Tropfen dehnen sich beim Wandern.
   EINBAU:
     <nav class="flussleiste" data-flussleiste aria-label="Kontakt">
       <a class="fl-punkt" href="tel:+49…" data-start><svg …/><span>Anrufen</span></a>
       <a class="fl-punkt" href="https://wa.me/49…" target="_blank" rel="noopener"><svg …/><span>WhatsApp</span></a>
       <a class="fl-punkt" href="#termin" data-abschnitt="#termin"><svg …/><span>Termin</span></a>
     </nav>
   Farben: --fl-tropfen (Standard --signal), --fl-flaeche (Leiste, deckend – sonst scheint Text durch), --fl-text, --fl-aktiv (Schrift/Icon im Tropfen).
   data-start = Ruheplatz des Tropfens (Hauptaktion). data-abschnitt = Tropfen wandert dorthin, solange dieser Abschnitt im Bild ist.
   data-platz-fuer="#formular" an der Leiste = sie macht Platz, solange dieses Element im Bild ist.
   REGELN: kein transform auf Text (nur das Icon hebt sich), Leiste ≥ 44 px Trefferfläche je Punkt, reduzierte Bewegung = springt.
   ============================================================ */
.flussleiste{
  --fl-tropfen:var(--signal,#306CC0);--fl-flaeche:#FFFFFF;--fl-rand:rgba(20,30,40,.10);
  --fl-text:var(--tinte,#14213A);--fl-aktiv:#fff;--fl-h:64px;--fl-d:50px;
  position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:55;
  display:flex;height:var(--fl-h);padding:0 6px;isolation:isolate;
  -webkit-tap-highlight-color:transparent;font:inherit
}
.flussleiste .fl-grund{position:absolute;left:0;top:calc(var(--fl-d) * -.5);width:100%;height:calc(100% + var(--fl-d) * .5);z-index:-2;overflow:visible;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(10,20,30,.18)) drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.flussleiste .fl-grund path{fill:var(--fl-flaeche);stroke:var(--fl-rand);stroke-width:1}
.flussleiste .fl-tropfen{position:absolute;top:calc(var(--fl-d) * -.36);left:0;height:var(--fl-d);width:var(--fl-d);border-radius:999px;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),var(--fl-tropfen);
  box-shadow:0 10px 20px -8px var(--fl-tropfen),0 -1px 0 rgba(255,255,255,.5) inset,0 -6px 12px rgba(0,0,0,.12) inset}
.flussleiste .fl-punkt{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:0 4px 9px;
  color:var(--fl-text);text-decoration:none;font-size:12px;font-weight:700;line-height:1.1;letter-spacing:.01em;border-radius:18px;position:relative}
.flussleiste .fl-punkt svg{width:24px;height:24px;flex:none;transition:transform .35s cubic-bezier(.3,1.5,.5,1),color .25s}
.flussleiste .fl-punkt span{white-space:nowrap;transition:color .25s}
.flussleiste .fl-punkt.-hier svg{transform:translateY(calc(var(--fl-d) * -.52));color:var(--fl-aktiv)}
.flussleiste .fl-punkt:focus-visible{outline:3px solid var(--fl-tropfen);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.flussleiste .fl-punkt:hover span{text-decoration:underline;text-underline-offset:3px}}
/* Während getippt wird (Tastatur offen), macht die Leiste Platz – sie verdeckt sonst Felder und den Senden-Knopf */
.flussleiste{transition:translate .3s ease}
body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .flussleiste,.flussleiste.-platz{translate:0 140%}
@media (min-width:900px){.flussleiste[data-nur-handy]{display:none}}
@media (prefers-reduced-motion:reduce){.flussleiste .fl-punkt svg,.flussleiste .fl-punkt span{transition:none}}