/* Donau2Space – KI-Erklärbuttons
   Styling via CSS-Variablen (werden im Admin gesetzt) */

:root {
  --d2s-gpt-bg: #10a37f;
  --d2s-gpt-fg: #ffffff;

  --d2s-grok-bg: #000000;
  --d2s-grok-fg: #ffffff;

  --d2s-pplx-bg: #1557ff;
  --d2s-pplx-fg: #ffffff;

  --d2s-radius: 999px;
  --d2s-pad-y: 0.65rem;
  --d2s-pad-x: 1rem;
  --d2s-gap: 0.5rem;

  --d2s-shadow: 0 6px 20px rgba(0,0,0,.12);
  --d2s-shadow-h: 0 8px 26px rgba(0,0,0,.18);
  --d2s-scale-h: 1.02;
}

.d2s-ki-buttons {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--d2s-gap);
  align-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.d2s-ki-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: var(--d2s-pad-y) var(--d2s-pad-x);
  border-radius: var(--d2s-radius);
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--d2s-shadow);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  line-height: 1;
}

.d2s-ki-btn:focus {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 2px;
}

.d2s-ki-btn:hover {
  transform: scale(var(--d2s-scale-h));
  box-shadow: var(--d2s-shadow-h);
}

.d2s-ki-chatgpt { background: var(--d2s-gpt-bg); color: var(--d2s-gpt-fg); }
.d2s-ki-grok    { background: var(--d2s-grok-bg); color: var(--d2s-grok-fg); }
.d2s-ki-perplexity { background: var(--d2s-pplx-bg); color: var(--d2s-pplx-fg); }

.d2s-ki-icon { font-size: 1.05em; }
.d2s-ki-text { white-space: nowrap; }

.d2s-ki-hint {
  opacity: 0.7;
  margin-left: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  .d2s-ki-hint { opacity: 0.85; }
}