/* ============================================================
   Bausteinlager „Deine neue Webseite" — sendeknopf.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-sendeknopf-20261029
   Der Knopf denkt mit: „Anfrage senden" → „Wird gesendet …" (Kreisel) → „Gesendet" (Haken zeichnet sich).
   Die Breite gleitet zum neuen Text, die Schrift blendet über, nichts springt.
   Läuft allein oder zusammen mit dem Tastknopf: <button class="tastknopf" data-sendeknopf>
     <span class="tk-flaeche">Anfrage senden</span></button>
   ============================================================ */
.sk-text{position:relative;display:inline-block;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:middle;
  transition:width .38s cubic-bezier(.3,1.25,.45,1);white-space:nowrap}
.sk-text > span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;transition:opacity .22s ease,top .3s cubic-bezier(.3,1.3,.45,1)}
.sk-text > span.-weg{opacity:0;top:-1.1em}
.sk-text > span.-kommt{opacity:0;top:1.1em}
.sk-icon{width:1.1em;height:1.1em;flex:none;overflow:visible}
.sk-kreisel{animation:skDreh .8s linear infinite;transform-origin:50% 50%}
@keyframes skDreh{to{transform:rotate(360deg)}}
.sk-haken path{stroke-dasharray:1;stroke-dashoffset:1;animation:skHaken .42s .08s cubic-bezier(.4,0,.2,1) forwards}
@keyframes skHaken{to{stroke-dashoffset:0}}
[data-sendeknopf].-fehler{animation:skWackel .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes skWackel{20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}100%{translate:0 0}}
[data-sendeknopf][aria-busy="true"]{cursor:progress}
.sk-ansage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .sk-text,.sk-text > span{transition:none}.sk-kreisel{animation-duration:2.4s}
  .sk-haken path{animation:none;stroke-dashoffset:0}[data-sendeknopf].-fehler{animation:none}
}