/* ==========================================================================
   Gradient Button — zentrale Button-Komponente von saifudin.ch
   Nachbau von «Gradient Button» (serafimcloud, 21st.dev) in Vanilla-CSS,
   Farben ausschliesslich Kupfer und Navy.

   Verwendung:
     <a class="gradient-button" href="…">Primär</a>
     <a class="gradient-button gradient-button--secondary" href="…">Sekundär</a>
     <button class="gradient-button gradient-button--on-dark">Primär auf Navy</button>
     <a class="gradient-button gradient-button--secondary gradient-button--on-dark">…</a>
   Grössen: --sm, --lg · Sonderformen: --cta («Get Started»-Stil),
   --shiny (dunkle Pille mit umlaufendem Glanz, z. B. Demo starten)
   ========================================================================== */

/* Animierbare Custom Properties (wie im Original) */
@property --gb-pos-x      { syntax: '<percentage>'; initial-value: 11.14%;  inherits: false; }
@property --gb-pos-y      { syntax: '<percentage>'; initial-value: 140%;    inherits: false; }
@property --gb-spread-x   { syntax: '<percentage>'; initial-value: 150%;    inherits: false; }
@property --gb-spread-y   { syntax: '<percentage>'; initial-value: 180.06%; inherits: false; }
@property --gb-color-1    { syntax: '<color>';      initial-value: #0B0F1A; inherits: false; }
@property --gb-color-2    { syntax: '<color>';      initial-value: #1E1A1E; inherits: false; }
@property --gb-color-3    { syntax: '<color>';      initial-value: #4E2E24; inherits: false; }
@property --gb-color-4    { syntax: '<color>';      initial-value: #7A4632; inherits: false; }
@property --gb-color-5    { syntax: '<color>';      initial-value: #9A5A42; inherits: false; }
@property --gb-border-angle   { syntax: '<angle>'; initial-value: 20deg;                    inherits: true; }
@property --gb-border-color-1 { syntax: '<color>'; initial-value: rgba(210,154,130,.25);   inherits: true; }
@property --gb-border-color-2 { syntax: '<color>'; initial-value: rgba(210,154,130,.8);    inherits: true; }
@property --gb-stop-1     { syntax: '<percentage>'; initial-value: 37.35%; inherits: false; }
@property --gb-stop-2     { syntax: '<percentage>'; initial-value: 61.36%; inherits: false; }
@property --gb-stop-3     { syntax: '<percentage>'; initial-value: 78.42%; inherits: false; }
@property --gb-stop-4     { syntax: '<percentage>'; initial-value: 89.52%; inherits: false; }
@property --gb-stop-5     { syntax: '<percentage>'; initial-value: 100%;   inherits: false; }

/* ---------- Basis = Primary (Kupfer → Navy, weisser Text) ---------- */
.gradient-button {
  --gb-pos-x: 11.14%; --gb-pos-y: 140%; --gb-spread-x: 150%; --gb-spread-y: 180.06%;
  --gb-color-1: #0B0F1A; --gb-color-2: #1E1A1E; --gb-color-3: #4E2E24; --gb-color-4: #7A4632; --gb-color-5: #9A5A42;
  --gb-border-angle: 20deg;
  --gb-border-color-1: rgba(210,154,130,.25);
  --gb-border-color-2: rgba(210,154,130,.8);
  --gb-stop-1: 37.35%; --gb-stop-2: 61.36%; --gb-stop-3: 78.42%; --gb-stop-4: 89.52%; --gb-stop-5: 100%;
  --gb-focus: #A9684F;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  min-width: 132px;
  border-radius: 11px;
  font-family: var(--sans, Inter, Arial, sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(
    var(--gb-spread-x) var(--gb-spread-y) at var(--gb-pos-x) var(--gb-pos-y),
    var(--gb-color-1) var(--gb-stop-1),
    var(--gb-color-2) var(--gb-stop-2),
    var(--gb-color-3) var(--gb-stop-3),
    var(--gb-color-4) var(--gb-stop-4),
    var(--gb-color-5) var(--gb-stop-5)
  );
  box-shadow: none;
  transition:
    --gb-pos-x .5s, --gb-pos-y .5s, --gb-spread-x .5s, --gb-spread-y .5s,
    --gb-color-1 .5s, --gb-color-2 .5s, --gb-color-3 .5s, --gb-color-4 .5s, --gb-color-5 .5s,
    --gb-border-angle .5s, --gb-border-color-1 .5s, --gb-border-color-2 .5s,
    --gb-stop-1 .5s, --gb-stop-2 .5s, --gb-stop-3 .5s, --gb-stop-4 .5s, --gb-stop-5 .5s,
    transform .2s ease, opacity .2s ease;
}

/* 1px-Verlaufsrand (Maske wie im Original) */
.gradient-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(var(--gb-border-angle), var(--gb-border-color-1), var(--gb-border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

.gradient-button:hover {
  --gb-pos-x: 0%; --gb-pos-y: 91.51%; --gb-spread-x: 120.24%; --gb-spread-y: 103.18%;
  --gb-color-1: #B07458; --gb-color-2: #A9684F; --gb-color-3: #8E543E; --gb-color-4: #3A2219; --gb-color-5: #0B0F1A;
  --gb-border-angle: 190deg;
  --gb-border-color-1: rgba(233,194,170,.15);
  --gb-border-color-2: rgba(233,194,170,.65);
  --gb-stop-1: 0%; --gb-stop-2: 8.8%; --gb-stop-3: 21.44%; --gb-stop-4: 71.34%; --gb-stop-5: 85.76%;
}
.gradient-button:active { transform: translateY(1px) scale(.98); }

.gradient-button:focus-visible {
  outline: 2px solid var(--gb-focus);
  outline-offset: 3px;
}

.gradient-button:disabled,
.gradient-button[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Secondary: gleiche Form, nur Verlaufsrand ---------- */
.gradient-button--secondary {
  --gb-color-1: rgba(169,104,79,0); --gb-color-2: rgba(169,104,79,0); --gb-color-3: rgba(169,104,79,0);
  --gb-color-4: rgba(169,104,79,0); --gb-color-5: rgba(169,104,79,0);
  --gb-border-angle: 200deg;
  --gb-border-color-1: #A9684F;
  --gb-border-color-2: #0B0F1A;
  color: var(--ink, #171817);
}
.gradient-button--secondary::before { padding: 1.5px; }
.gradient-button--secondary:hover {
  --gb-color-1: rgba(169,104,79,.16); --gb-color-2: rgba(169,104,79,.10); --gb-color-3: rgba(169,104,79,.05);
  --gb-color-4: rgba(169,104,79,0);   --gb-color-5: rgba(169,104,79,0);
  --gb-border-angle: 20deg;
  --gb-border-color-1: #0B0F1A;
  --gb-border-color-2: #A9684F;
}

/* ---------- Auf dunklem Grund (Navy-Sektionen) ---------- */
.gradient-button--on-dark {
  --gb-color-1: #E9C2AA; --gb-color-2: #DDAA8F; --gb-color-3: #D29A82; --gb-color-4: #C98D72; --gb-color-5: #C48466;
  --gb-border-color-1: rgba(250,248,243,.35);
  --gb-border-color-2: rgba(250,248,243,.8);
  --gb-focus: #D29A82;
  color: var(--ink, #171817);
}
.gradient-button--on-dark:hover {
  --gb-color-1: #F4DCCB; --gb-color-2: #E9C2AA; --gb-color-3: #DDAA8F; --gb-color-4: #D29A82; --gb-color-5: #C48466;
  --gb-border-color-1: rgba(250,248,243,.2);
  --gb-border-color-2: rgba(250,248,243,.9);
}
.gradient-button--secondary.gradient-button--on-dark {
  --gb-color-1: rgba(210,154,130,0); --gb-color-2: rgba(210,154,130,0); --gb-color-3: rgba(210,154,130,0);
  --gb-color-4: rgba(210,154,130,0); --gb-color-5: rgba(210,154,130,0);
  --gb-border-color-1: #D29A82;
  --gb-border-color-2: rgba(250,248,243,.45);
  color: var(--paper, #FAF8F3);
}
.gradient-button--secondary.gradient-button--on-dark:hover {
  --gb-color-1: rgba(210,154,130,.22); --gb-color-2: rgba(210,154,130,.12); --gb-color-3: rgba(210,154,130,.05);
  --gb-color-4: rgba(210,154,130,0);   --gb-color-5: rgba(210,154,130,0);
  --gb-border-color-1: rgba(250,248,243,.6);
  --gb-border-color-2: #D29A82;
}

/* ---------- Grössen ---------- */
.gradient-button--sm { padding: 10px 18px; font-size: 14px; min-width: 0; }
.gradient-button--lg { padding: 16px 32px; font-size: 16px; }

/* ---------- CTA («Get Started» aus dem Shader-Hero) ----------
   Linearer Verlauf, weiches Leuchten, Hover 1.05 / Klick 0.95 */
.gradient-button--cta {
  --gb-color-1: #EBC6AE; --gb-color-5: #C48466;
  --gb-border-color-1: rgba(250,248,243,.45);
  --gb-border-color-2: rgba(250,248,243,.1);
  --gb-focus: #D29A82;
  background: linear-gradient(90deg, var(--gb-color-1), var(--gb-color-5));
  color: var(--ink, #171817);
  font-size: 17px;
  min-width: 0;
  padding: 16px 40px 16px 18px;
  border-radius: 999px;
  transition: --gb-color-1 .3s, --gb-color-5 .3s, --gb-border-color-1 .3s, --gb-border-color-2 .3s,
              transform .3s cubic-bezier(.2,.7,.3,1);
}
.gradient-button--cta:hover {
  --gb-color-1: #F4DCCB; --gb-color-5: #D29A82;
  --gb-border-color-1: rgba(250,248,243,.7);
  --gb-border-color-2: rgba(250,248,243,.2);
  transform: scale(1.05);
}
.gradient-button--cta:active { transform: scale(.95); }

/* ---------- Shiny («Shiny Button», 21st.dev) ----------
   Nachbau in Vanilla-CSS für «Demo starten»: dunkle Pille, umlaufender
   Kupfer-Glanz am Rand, Punktraster, Schimmer; Hover beschleunigt und
   verbreitert den Glanz. Alle Effekte bleiben innerhalb des Buttons. */
@property --sb-angle   { syntax: '<angle>';      initial-value: 0deg; inherits: false; }
@property --sb-offset  { syntax: '<angle>';      initial-value: 0deg; inherits: false; }
@property --sb-percent { syntax: '<percentage>'; initial-value: 5%;   inherits: false; }
@property --sb-shine   { syntax: '<color>';      initial-value: white; inherits: false; }

.gradient-button--shiny {
  --sb-base: #07090F;
  --sb-inset: #1A1818;
  --sb-accent: #C9774E;
  --sb-accent-soft: #EBC6AE;
  --sb-duration: 3s;
  --sb-ease: .8s cubic-bezier(.25, 1, .5, 1);
  --gb-focus: #D29A82;
  overflow: hidden;
  min-width: 0;
  padding: 16px 40px 16px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  background:
    linear-gradient(var(--sb-base), var(--sb-base)) padding-box,
    conic-gradient(
      from calc(var(--sb-angle) - var(--sb-offset)),
      transparent,
      var(--sb-accent) var(--sb-percent),
      var(--sb-shine) calc(var(--sb-percent) * 2),
      var(--sb-accent) calc(var(--sb-percent) * 3),
      transparent calc(var(--sb-percent) * 4)
    ) border-box;
  box-shadow: inset 0 0 0 1px var(--sb-inset);
  transition: --sb-offset var(--sb-ease), --sb-percent var(--sb-ease), --sb-shine var(--sb-ease);
}
.gradient-button--shiny::before,
.gradient-button--shiny::after,
.gradient-button--shiny > span:last-child::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: -1;
}
/* Punktraster, von einem mitlaufenden Kegel sichtbar gemacht */
.gradient-button--shiny::before {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  padding: 0;
  background: radial-gradient(circle at 2px 2px, #fff .5px, transparent 0) padding-box;
  background-size: 4px 4px;
  background-repeat: space;
  -webkit-mask: conic-gradient(from calc(var(--sb-angle) + 45deg), #000, transparent 10% 90%, #000);
          mask: conic-gradient(from calc(var(--sb-angle) + 45deg), #000, transparent 10% 90%, #000);
  border-radius: inherit;
  opacity: .4;
}
/* Rotierender Schimmer */
.gradient-button--shiny::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--sb-accent), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
          mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .6;
}
/* Inneres Glühen beim Hover (auf dem Text-Span, damit es auch nach
   dem Umschalten auf «Gespräch beenden» funktioniert) */
.gradient-button--shiny > span:last-child::before {
  width: calc(100% + 1rem);
  height: calc(100% + 1rem);
  box-shadow: inset 0 -1ex 2rem 4px var(--sb-accent);
  opacity: 0;
  transition: opacity var(--sb-ease);
  animation: sb-breathe calc(var(--sb-duration) * 1.5) linear infinite;
}
.gradient-button--shiny,
.gradient-button--shiny::before {
  animation:
    sb-angle var(--sb-duration) linear infinite,
    sb-angle calc(var(--sb-duration) / .4) linear infinite reverse paused;
  animation-composition: add;
}
.gradient-button--shiny::after {
  animation:
    sb-spin var(--sb-duration) linear infinite,
    sb-spin calc(var(--sb-duration) / .4) linear infinite reverse paused;
  animation-composition: add;
}
.gradient-button--shiny:is(:hover, :focus-visible) {
  --sb-percent: 20%;
  --sb-offset: 95deg;
  --sb-shine: var(--sb-accent-soft);
}
.gradient-button--shiny:is(:hover, :focus-visible),
.gradient-button--shiny:is(:hover, :focus-visible)::before,
.gradient-button--shiny:is(:hover, :focus-visible)::after { animation-play-state: running; }
.gradient-button--shiny:is(:hover, :focus-visible) > span:last-child::before { opacity: 1; }
.gradient-button--shiny:active { transform: none; translate: 0 1px; }
@keyframes sb-angle { to { --sb-angle: 360deg; } }
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-button--shiny,
  .gradient-button--shiny::before,
  .gradient-button--shiny::after,
  .gradient-button--shiny > span:last-child::before { animation: none !important; }
  .gradient-button--shiny { transition: none; }
  .gradient-button--shiny:is(:hover, :focus-visible) > span:last-child::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-button { transition-duration: .01s !important; }
  .gradient-button:hover,
  .gradient-button:active,
  .gradient-button--cta:hover,
  .gradient-button--cta:active { transform: none; }
}

/* ---------- Chatbot-Trigger (Widget wird extern geladen) ---------- */
#sai-chat-btn {
  background: radial-gradient(130% 130% at 15% 110%, #C48466 0%, #A9684F 30%, #6E3F2E 70%, #1E1A1E 100%) !important;
  box-shadow: none !important;
}
#sai-chat-btn:hover {
  background: radial-gradient(130% 130% at 0% 90%, #D29A82 0%, #B07458 25%, #8E543E 55%, #3A2219 90%) !important;
  box-shadow: none !important;
}
#sai-chat-btn:focus-visible { outline: 2px solid #A9684F; outline-offset: 3px; }
#sai-send-btn { background: linear-gradient(135deg, #B07458, #7A4632) !important; }
#sai-send-btn:hover:not(:disabled) { background: linear-gradient(135deg, #C48466, #8E543E) !important; }
@media (prefers-reduced-motion: reduce) {
  #sai-chat-btn:hover { transform: none !important; }
}