/* ==========================================================================
   kyb-glow — Leuchtende Schaltflächen (kyb-btn--ghost und kyb-btn--primary)
   Nach dem Beispiel „glow-button": umlaufende Lichtkante, Fläche, und beim
   Überfahren ein weicher Lichtfleck, der dem Mauszeiger folgt und seine
   Farbe von --kyb-glow-start (links) nach --kyb-glow-ende (rechts) mischt.
   Farben nur aus der Marke: Neon-Grün, Dunkelgrau, Weiß — kein Blau.
   Ohne Zusatzbibliotheken. Aufbau setzt kyb-glow.js.
   ========================================================================== */

@property --kyb-glow-x { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --kyb-glow-y { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --kyb-glow-farbe { syntax: '<color>'; inherits: true; initial-value: #00ff82; }

.kyb-btn.kyb-glow {
  --kyb-glow-deckkraft: 0;
  --kyb-glow-dauer: .5s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
  background: transparent;
  transition: --kyb-glow-x .6s cubic-bezier(.22, 1, .36, 1), --kyb-glow-y .6s cubic-bezier(.22, 1, .36, 1),
              --kyb-glow-farbe .2s linear, box-shadow .3s ease, color .2s ease, filter .2s ease;
}

/* Dunkle Konturschaltfläche: Dunkelgrau, Kante Grün→Weiß, Fleck Grün→Weiß */
.kyb-btn--ghost.kyb-glow {
  --kyb-glow-flaeche: #1b1e24;
  --kyb-glow-schein-links: rgba(0, 255, 130, .85);
  --kyb-glow-schein-rechts: rgba(255, 255, 255, .55);
  --kyb-glow-start: #00ff82;
  --kyb-glow-ende: #e8fff3;
  color: var(--kyb-neon);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.kyb-btn--ghost.kyb-glow:hover, .kyb-btn--ghost.kyb-glow:focus-visible {
  background: transparent; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 255, 130, .16), 0 8px 22px rgba(0, 0, 0, .4);
}

/* Grüne Schaltfläche: Neon-Verlauf, Kante Weiß→Dunkelgrün, Fleck Weiß */
.kyb-btn--primary.kyb-glow {
  --kyb-glow-flaeche: var(--kyb-grad);
  --kyb-glow-schein-links: rgba(255, 255, 255, .95);
  --kyb-glow-schein-rechts: rgba(0, 255, 130, .9);
  --kyb-glow-start: #ffffff;
  --kyb-glow-ende: #c9ffe4;
  color: var(--kyb-stage);
  box-shadow: 0 8px 24px rgba(0, 255, 130, .22);
}
.kyb-btn--primary.kyb-glow:hover, .kyb-btn--primary.kyb-glow:focus-visible {
  filter: none; color: var(--kyb-stage);
  box-shadow: 0 12px 32px rgba(0, 255, 130, .35);
}

/* Umlaufende Lichtkante: rotierender Verlauf, von der Fläche bis auf 1,5 px verdeckt */
.kyb-glow__kante {
  position: absolute; inset: 0; z-index: -3;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.kyb-glow__kante::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%;
  aspect-ratio: 1; border-radius: 50%;
  translate: 0 -50%;
  background: linear-gradient(90deg, var(--kyb-glow-schein-links), var(--kyb-glow-schein-rechts));
  animation: kyb-glow-drehen 2.4s linear infinite;
}
@keyframes kyb-glow-drehen { to { rotate: 360deg; } }

/* Fläche */
.kyb-btn.kyb-glow::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -2;
  border-radius: calc(var(--r-btn, 12px) - 1.5px);
  background: var(--kyb-glow-flaeche);
}

/* Lichtfleck, folgt dem Zeiger */
.kyb-btn.kyb-glow::after {
  content: ""; position: absolute; left: -18px; top: -18px; z-index: -1;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--kyb-glow-farbe);
  opacity: var(--kyb-glow-deckkraft);
  transform: translate(var(--kyb-glow-x), var(--kyb-glow-y));
  filter: blur(20px);
  transition: opacity var(--kyb-glow-dauer) ease;
  pointer-events: none;
}
.kyb-btn.kyb-glow:hover, .kyb-btn.kyb-glow:focus-visible {
  --kyb-glow-deckkraft: .9;
  --kyb-glow-dauer: .25s;
}
.kyb-btn--primary.kyb-glow:hover { --kyb-glow-deckkraft: .75; }

@media (prefers-reduced-motion: reduce) {
  .kyb-glow__kante::before { animation: none; }
  .kyb-btn.kyb-glow::after { display: none; }
}

/* Störer-Schaltfläche (auf grünem Band) und Schaltflächen ohne Variante:
   dunkle Fläche wie die Konturschaltfläche, Lichtkante Grün→Weiß (17.09.2026) */
.k-stoerer__btn.kyb-glow,
.kyb-btn.kyb-glow:not([class*="kyb-btn--"]) {
  --kyb-glow-flaeche: var(--kyb-stage);
  --kyb-glow-schein-links: rgba(0, 255, 130, .9);
  --kyb-glow-schein-rechts: rgba(255, 255, 255, .7);
  --kyb-glow-start: #00ff82;
  --kyb-glow-ende: #e8fff3;
  color: var(--kyb-neon);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.k-stoerer__btn.kyb-glow:hover, .k-stoerer__btn.kyb-glow:focus-visible,
.kyb-btn.kyb-glow:not([class*="kyb-btn--"]):hover {
  background: transparent; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}