/* ============================================================
   Bausteinlager „Deine neue Webseite" — tastknopf.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-tastknopf-20261029
   Ein Knopf, den man wirklich drückt: Fläche liegt auf einer Wand, beim Drücken sinkt sie ein,
   beim Loslassen federt sie zurück. Eigene Umsetzung (Idee: physische Knöpfe), kein fremder Code.
   EINBAU:
     <a class="tastknopf" href="tel:+49…"><span class="tk-flaeche"><svg …/>Jetzt anrufen</span></a>
     <button class="tastknopf -hell" type="button"><span class="tk-flaeche">Mehr erfahren</span></button>
   Farben: kommen ohne Zutun aus glas.css (--signal, --signal-hell, --signal-tief). Eigene Farbe für
   einen einzelnen Knopf: data-farbe="#2F4F46" (tastknopf.js rechnet Licht, Wand und Schriftfarbe).
   Größen: .-klein / .-gross. Rund statt Kapsel: style="--tk-r:14px".
   REGELN: Kein stehendes transform auf Text — die Fläche sinkt über `top`, nicht über transform.
   :hover nur unter (hover:hover) and (pointer:fine). Reduzierte Bewegung: keine Übergänge.
   ============================================================ */
.tastknopf{
  --tk-farbe:var(--signal,#306CC0);
  --tk-hell:var(--signal-hell,#3A86E0);
  --tk-kante:var(--signal-tief,#1F4E8C);
  --tk-text:#fff;
  --tk-tiefe:6px;
  --tk-r:999px;
  --tk-schatten:rgba(10,20,30,.34);
  position:relative;display:inline-flex;vertical-align:top;
  margin:0 0 var(--tk-tiefe);padding:0;border:0;background:none;
  border-radius:var(--tk-r);color:var(--tk-text);text-decoration:none;
  font:inherit;font-weight:700;line-height:1.1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none
}
/* Wand unter der Fläche und weicher Schatten auf dem Untergrund (kein Text darin) */
.tastknopf::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:var(--tk-kante);
  transform:translateY(var(--tk-tiefe));
  box-shadow:0 calc(var(--tk-tiefe) + 10px) 22px -8px var(--tk-schatten),0 2px 0 rgba(0,0,0,.08);
  transition:box-shadow .16s ease
}
.tk-flaeche{
  position:relative;top:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:54px;min-width:44px;padding:0 1.55em;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),
    linear-gradient(180deg,var(--tk-hell),var(--tk-farbe));
  background-color:var(--tk-farbe);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:top .18s cubic-bezier(.22,1.6,.4,1),box-shadow .18s ease
}
.tk-flaeche svg{width:1.2em;height:1.2em;flex:none}
.tastknopf:active .tk-flaeche,.tastknopf.-gedrueckt .tk-flaeche{
  top:calc(var(--tk-tiefe) - 1px);transition-duration:.05s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 3px 8px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06)
}
.tastknopf:active::before,.tastknopf.-gedrueckt::before{box-shadow:0 calc(var(--tk-tiefe) + 2px) 8px -6px var(--tk-schatten),0 1px 0 rgba(0,0,0,.08)}
@media (hover:hover) and (pointer:fine){
  .tastknopf:hover .tk-flaeche{top:-1px}
  .tastknopf:hover::before{box-shadow:0 calc(var(--tk-tiefe) + 14px) 26px -8px var(--tk-schatten),0 2px 0 rgba(0,0,0,.08)}
}
.tastknopf:focus-visible{outline:none}
.tastknopf:focus-visible .tk-flaeche{outline:3px solid var(--tinte,#14213A);outline-offset:3px}
/* Heller Knopf (zweite Wahl neben dem Signalknopf) */
.tastknopf.-hell{--tk-farbe:#F4F6F8;--tk-hell:#FFFFFF;--tk-kante:#C9D0D8;--tk-text:var(--tinte,#14213A);--tk-schatten:rgba(10,20,30,.22)}
.tastknopf.-klein .tk-flaeche{min-height:44px;padding:0 1.1em;font-size:.92em}
.tastknopf.-klein{--tk-tiefe:4px}
.tastknopf.-gross .tk-flaeche{min-height:64px;padding:0 1.9em;font-size:1.12em}
.tastknopf.-gross{--tk-tiefe:8px}
.tastknopf[disabled],.tastknopf[aria-disabled="true"]{cursor:default;opacity:.55}
@media (prefers-reduced-motion:reduce){.tk-flaeche,.tastknopf::before{transition:none}}

/* Korrektur 30.10.2026: am PC überschreibt :hover sonst das Einsinken */
@media (hover:hover) and (pointer:fine){.tastknopf:hover:active .tk-flaeche,.tastknopf.-gedrueckt:hover .tk-flaeche{top:calc(var(--tk-tiefe) - 1px);transition-duration:.05s}}