/* ============================================================
   geoquality.ai — Button-Library (.gq-btn)
   Drop-in, scoped unter .gq-btn. Aus dem offiziellen Handoff
   (static/design-system/geoquality-buttons.html). Font auf Brand-
   Stack (Inter) gemappt statt Geist. Site-weit wiederverwendbar.
   Varianten: --ak (violet→magenta primary), --kt (magenta→amber),
   --ea (indigo→violet), --ghost (obsidian). Sizes: --sm / (default) / --lg.
   Slots: .gq-btn__arrow (→), .gq-btn__play (▷).
   ============================================================ */
.gq-btn {
  --gq-btn-grad:   linear-gradient(118deg, #8B5CF6 0%, #FF3D81 100%);
  --gq-btn-glow:   rgba(255, 61, 129, 0.28);
  --gq-btn-glow-2: rgba(139, 92, 246, 0.20);
  --gq-btn-text:   #FFFFFF;
  --gq-btn-radius: 14px;
  --gq-btn-ease:   cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 26px;
  border: 0;
  background: var(--gq-btn-grad);
  border-radius: var(--gq-btn-radius);
  /* !important: Button-Textfarbe darf NICHT von Page-Link-Styles wie
     `.glossar-page a { color }` überschrieben werden (Komponenten-Integrität). */
  color: var(--gq-btn-text) !important;
  font: 600 15px/1 'Inter', system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0  8px 32px var(--gq-btn-glow),
    0  2px  6px var(--gq-btn-glow-2),
    0  2px  8px rgba(0, 0, 0, 0.30),
    inset  0  1px 0 rgba(255, 255, 255, 0.22),
    inset  0 -1px 0 rgba(0,   0,   0,   0.16);

  transition:
    transform  .65s var(--gq-btn-ease),
    box-shadow .65s var(--gq-btn-ease),
    filter     .65s var(--gq-btn-ease);
}

.gq-btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 55%;
  transform: translateX(-180%) skewX(-20deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
  animation: gq-btn-shimmer 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gq-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.06) 100%);
}

.gq-btn > * { position: relative; z-index: 1; }

.gq-btn__arrow,
.gq-btn__play {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  display: inline-block;
  transition: transform .45s var(--gq-btn-ease);
}
.gq-btn__arrow { margin-left: -2px; }
.gq-btn__play  { margin-right: -2px; font-size: 0.92em; opacity: 0.92; }

/* ── Varianten ─────────────────────────────────────────── */
.gq-btn--ak {
  --gq-btn-grad:   linear-gradient(118deg, #8B5CF6 0%, #FF3D81 100%);
  --gq-btn-glow:   rgba(255, 61, 129, 0.28);
  --gq-btn-glow-2: rgba(139, 92, 246, 0.22);
}
.gq-btn--kt {
  --gq-btn-grad:   linear-gradient(95deg, #FF3D81 0%, #FFB155 100%);
  --gq-btn-glow:   rgba(255, 177, 85, 0.26);
  --gq-btn-glow-2: rgba(255, 61, 129, 0.22);
}
.gq-btn--ea {
  --gq-btn-grad:   linear-gradient(118deg, #5B8FF9 0%, #8B5CF6 100%);
  --gq-btn-glow:   rgba(139, 92, 246, 0.30);
  --gq-btn-glow-2: rgba(91, 143, 249, 0.22);
}
.gq-btn--ghost {
  --gq-btn-grad: #0A0D18;
  --gq-btn-glow: transparent;
  --gq-btn-glow-2: transparent;
  --gq-btn-text: #F0EEE6;
  background: var(--gq-btn-grad);
  box-shadow:
    0 0 0 1px rgba(240, 238, 230, 0.14) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
}
.gq-btn--ghost::after {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0) 100%);
}
.gq-btn--ghost::before { opacity: 0.35; }

/* ── Sizes ─────────────────────────────────────────────── */
.gq-btn--sm {
  padding: 10px 18px;
  font-size: 13px;
  gap: 8px;
  --gq-btn-radius: 12px;
}
.gq-btn--lg {
  padding: 18px 32px;
  font-size: 17px;
  gap: 12px;
  --gq-btn-radius: 16px;
}

/* ── States ────────────────────────────────────────────── */
.gq-btn:hover {
  transform: translateY(-1.5px);
  filter: saturate(1.05) brightness(1.025);
  box-shadow:
    0 16px 48px var(--gq-btn-glow),
    0  4px 14px var(--gq-btn-glow-2),
    0  4px 12px rgba(0, 0, 0, 0.32),
    inset 0  1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
.gq-btn:hover .gq-btn__arrow { transform: translateX(2px); }
.gq-btn:hover .gq-btn__play  { transform: scale(1.04); }

.gq-btn--ghost:hover {
  transform: translateY(-1.5px);
  filter: none;
  background: #0E1322;
  box-shadow:
    0 0 0 1px rgba(240, 238, 230, 0.22) inset,
    0 8px 22px rgba(0, 0, 0, 0.42);
}

.gq-btn:active {
  transform: translateY(0) scale(0.995);
  transition-duration: .15s;
  box-shadow:
    0  4px 14px var(--gq-btn-glow),
    0  1px  4px rgba(0, 0, 0, 0.30),
    inset 0  1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.gq-btn:focus-visible {
  outline: 2px solid #5BE9DC;
  outline-offset: 4px;
}

.gq-btn:disabled,
.gq-btn[aria-disabled="true"] {
  opacity: 0.40;
  pointer-events: none;
  filter: saturate(0.7);
}

@keyframes gq-btn-shimmer {
  0%        { transform: translateX(-180%) skewX(-20deg); }
  28%, 100% { transform: translateX( 280%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gq-btn, .gq-btn * { transition: none; }
  .gq-btn::before    { animation: none; opacity: 0; }
}

/* ── Holographic-Variante für --ak (animierter Gradient + Shine) ──
   Aus hero_cinematic.css hierher verschoben → site-weit verfügbar
   (Header-CTA, Pricing-Pro, Hero-CTA, Final-CTA). */
.gq-btn--ak {
  --gq-btn-grad: linear-gradient(118deg,
    #6B3FCC 0%, #8B5CF6 20%, #A855F7 35%, #C77AE0 50%,
    #FF3D81 70%, #D14C9E 85%, #8B5CF6 100%);
  background: var(--gq-btn-grad);
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: gq-btn-grad-flow 7s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@keyframes gq-btn-grad-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.gq-btn__shine {
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.0) 20%, rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.0) 80%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 2;
  animation: gq-btn-shine-travel 4.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes gq-btn-shine-travel {
  0%        { left: -70%; opacity: 0; }
  10%       { opacity: 1; }
  55%       { left: 120%; opacity: 1; }
  60%, 100% { left: 120%; opacity: 0; }
}
.gq-btn--ak:hover { animation-duration: 3s; }
.gq-btn--ak:hover .gq-btn__shine { animation-duration: 2s; }
@media (prefers-reduced-motion: reduce) {
  .gq-btn--ak { animation: none; }
  .gq-btn__shine { animation: none; opacity: 0; }
}