/* ═══════════ DER KNOPF-SCHIMMER ══════════════════════════════════
   Ein Licht zieht durch den Knopf, dann ruht er. Bewusst OHNE
   Schwebe-Bindung: auf dem Handy gibt es kein Zeigen, ein reiner
   Hover-Effekt erreicht die Haelfte der Besucher nie.

   DIE ZAHLEN STAMMEN VON WOHNEN-PSD.DE, dort am 25.08. am laufenden
   Knopf gemessen (`btnShine` auf `.ui-btn::before`). Meine erste
   Fassung hatte dieselbe Mechanik und wirkte trotzdem falsch - als
   "Balken", zu schwach. Der Vergleich zeigt, warum:

       dort            meine erste Fassung
       3 s             9 s            <- dreimal so lang
       ease-in-out     linear         <- gleichfoermig = mechanisch
       Deckkraft .45   .20            <- weniger als die Haelfte
       Breite 55 %     42 %
       Neigung -18°    -12°
       55 % laufen,    durchgehend    <- ohne Ruhe kein Rhythmus
       45 % Ruhe

   Der Durchlauf dauert also 1,65 s und danach liegt der Knopf 1,35 s
   still. Nicht die Mechanik war das Problem, sondern das Tempo.

   EIN UNTERSCHIED BLEIBT: dort ist das Licht fest weiss (`rgba(255,
   255,255,.45)`), was auf dem lachsfarbenen Knopf dort passt. Die
   Hauptknoepfe hier sind WEISS - weisses Licht darauf waere
   unsichtbar. Deshalb kommt die Farbe aus `currentColor`: heller
   Knopf hat dunklen Text, dunkler Knopf hellen, die Textfarbe weiss
   also immer, wie herum der Knopf steht. Keine Klassenliste, die beim
   naechsten neuen Knopf vergessen wird - genau daran war eine
   Vorfassung gescheitert (weisser Nav-Knopf bekam weisses Licht).

   Zwei Dinge sind nicht verhandelbar:
   1. Nur `transform` - das laeuft auf der GPU und kostet kein Layout.
   2. `animation-play-state:paused` steht NACH der Kurzschreibweise,
      sonst setzt `animation:` sie wieder auf running.
   Der Beobachter (emknopfatem2) gibt `em-sicht` nur Knoepfen im Bild -
   61 Dauer-Animationen waren am 15.08. die gemessene Ursache fuers
   Scroll-Ruckeln dieser Site. */

/* Alle fuenf Knopf-Systeme der Site. `input[type=submit]` steht bewusst
   NICHT dabei: ein input kann keine Pseudo-Elemente tragen, die Regel
   waere dort wirkungslos. Vor der Aufnahme geprueft (25.08., live):
   keiner dieser Knoepfe hat ein belegtes ::before und bei keinem ragt
   ein Kind ueber den Rand - `overflow:hidden` schneidet also nichts ab. */
.btn,
.dg-knopf,
.button,
.button-secondary,
.em-nav-cta,
.em-nav-cta2,
.thero-btn,
.thero-btn2,
.thero-headcta{position:relative;overflow:hidden}

.btn::before,
.dg-knopf::before,
.button::before,
.button-secondary::before,
.em-nav-cta::before,
.em-nav-cta2::before,
.thero-btn::before,
.thero-btn2::before,
.thero-headcta::before{
  content:"";position:absolute;top:0;left:0;
  width:55%;height:100%;
  pointer-events:none;z-index:1;
  background:linear-gradient(100deg,
    transparent 0%, currentColor 50%, transparent 100%);
  opacity:.45;
  transform:translateX(-180%) skewX(-18deg);
  animation:em-schimmer 3s ease-in-out infinite;
  animation-play-state:paused}

.btn.em-sicht::before,
.dg-knopf.em-sicht::before,
.button.em-sicht::before,
.button-secondary.em-sicht::before,
.em-nav-cta.em-sicht::before,
.em-nav-cta2.em-sicht::before,
.thero-btn.em-sicht::before,
.thero-btn2.em-sicht::before,
.thero-headcta.em-sicht::before{animation-play-state:running}

/* 55 % laufen, 45 % ruhen - der Rhythmus ist der eigentliche Effekt. */
@keyframes em-schimmer{
  0%   {transform:translateX(-180%) skewX(-18deg)}
  55%  {transform:translateX(320%)  skewX(-18deg)}
  100% {transform:translateX(320%)  skewX(-18deg)}
}

@media (prefers-reduced-motion:reduce){
  .btn::before,
  .dg-knopf::before,
  .button::before,
  .button-secondary::before,
  .em-nav-cta::before,
  .em-nav-cta2::before,
  .thero-btn::before,
  .thero-btn2::before,
  .thero-headcta::before{display:none}
}