/* =============================================================
   ENGEL MAGNESIUM — SPPB Button-Mapping (custom.css)
   Primary -> .sppb-btn-primary
   Secondary -> .sppb-btn-secondary
   Link -> .sppb-btn-link
   -------------------------------------------------------------
   Grundlagen:
   - Farben:   02-farbpalette.md  (verbindlich v1)
   - Schrift:  03-typografie.md   (Buttons: Inter, 15px, ls 0.02em)
   Kontrast-Regel (hart): Vital-Lime traegt IMMER Anthrazit-Text,
   niemals Weiss. Aktiv-Slate traegt Lichtweiss.
   -------------------------------------------------------------
   WICHTIG zur Anwendung im Button-Addon:
   1. Button-Style auf "Primary", "Secondary" bzw. "Link" stellen
      — NICHT auf "Custom". "Custom" erzeugt eine eigene #btn-ID-Regel,
      die diese custom.css ueberschreibt.
   2. Im Addon keine eigenen Farben setzen (gleiche Begruendung).
   3. Size/Shape-Optionen sind hier bewusst markenfest ueberschrieben
      (feste Pill-Form, feste Hoehe) — die UI-Auswahl bleibt ohne Wirkung,
      das ist Absicht fuer ein einheitliches Button-Bild.
   4. Scope #sp-page-builder + !important sind noetig, um die
      SPPB-Default-Styles zuverlaessig zu schlagen.
   -------------------------------------------------------------
   Die --color-*-Tokens stammen aus dem :root-Block der Palette.
   Die var()-Fallbacks sichern die Darstellung, falls der Token-Block
   (noch) nicht geladen ist.
   ============================================================= */

/* ----- Basis: gilt fuer alle SPPB-Buttons ----- */
#sp-page-builder .sppb-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;                            /* Platz fuer optionales Icon */
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 0.9375rem !important;          /* 15px — UI-Groesse */
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;        /* signalisiert Klickbarkeit */
  padding: 0.875rem 1.625rem !important;    /* 14px / 26px */
  border: 1px solid transparent;
  border-radius: 999px !important;          /* Pill */
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              filter 0.2s ease;
}

/* Icon im Button (SPPB rendert <i>, alternativ ein SVG) */
#sp-page-builder .sppb-btn > i,
#sp-page-builder .sppb-btn svg {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
}

/* Sichtbarer Fokus fuer Tastatur-Navigation (BFSG / WCAG 2.4.7) */
#sp-page-builder .sppb-btn:focus-visible {
  outline: 3px solid var(--color-brand-primary, #1F5C7A);
  outline-offset: 3px;
}

/* Deaktivierter Zustand */
#sp-page-builder .sppb-btn.disabled,
#sp-page-builder .sppb-btn[disabled],
#sp-page-builder .sppb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none !important;
}

/* =============================================================
   1) PRIMARY — der eine Lime-Akzent pro Seite
   z. B. "Zum Shop", "In den Warenkorb"
   ============================================================= */
#sp-page-builder .sppb-btn.sppb-btn-primary,
#sp-page-builder .sppb-btn.sppb-btn-primary:focus {
  background-color: var(--color-brand-accent, #B8D138) !important;
  color: var(--color-text-primary, #1A2530) !important;   /* Anthrazit — nie Weiss */
  border-color: var(--color-brand-accent, #B8D138) !important;
}
#sp-page-builder .sppb-btn.sppb-btn-primary:hover {
  filter: brightness(0.94);
}
#sp-page-builder .sppb-btn.sppb-btn-primary:active {
  filter: brightness(0.88);
}
#sp-page-builder .sppb-btn.sppb-btn-primary.disabled:hover,
#sp-page-builder .sppb-btn.sppb-btn-primary[disabled]:hover,
#sp-page-builder .sppb-btn.sppb-btn-primary[aria-disabled="true"]:hover {
  filter: none !important;
}

/* =============================================================
   2) SECONDARY — Aktiv-Slate, als Outline, fuellt sich beim Hover
   z. B. "Mehr erfahren", zweiter Hero-CTA
   Hinweis: Appearance im Addon auf Standard lassen — diese CSS
   macht den Button bereits zum Outline-Button.
   ============================================================= */
#sp-page-builder .sppb-btn.sppb-btn-secondary,
#sp-page-builder .sppb-btn.sppb-btn-secondary:focus {
  background-color: transparent !important;
  color: var(--color-brand-primary, #1F5C7A) !important;
  border-color: var(--color-brand-primary, #1F5C7A) !important;
}
#sp-page-builder .sppb-btn.sppb-btn-secondary:hover {
  background-color: var(--color-brand-primary, #1F5C7A) !important;
  color: var(--color-text-on-deep, #FAFBFC) !important;   /* Lichtweiss auf Slate, AAA */
  border-color: var(--color-brand-primary, #1F5C7A) !important;
}
#sp-page-builder .sppb-btn.sppb-btn-secondary:active {
  background-color: #184C66 !important;                   /* Slate, leicht abgedunkelt */
  border-color: #184C66 !important;
  color: var(--color-text-on-deep, #FAFBFC) !important;
}

/* =============================================================
   3) LINK — textlicher Button, kein Pill
   z. B. "Was bedeutet transdermal?", "Mehr ueber uns"
   ============================================================= */
#sp-page-builder .sppb-btn.sppb-btn-link,
#sp-page-builder .sppb-btn.sppb-btn-link:focus {
  padding: 0.5rem 0 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;             /* Fliesstext-naeher als die Pill-Buttons */
  color: var(--color-text-primary, #1A2530) !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
}
#sp-page-builder .sppb-btn.sppb-btn-link:hover {
  color: var(--color-brand-primary, #1F5C7A) !important;
}
#sp-page-builder .sppb-btn.sppb-btn-link:active {
  color: #184C66 !important;
}
#sp-page-builder .sppb-btn.sppb-btn-link:focus-visible {
  outline-offset: 4px;                      /* etwas mehr Luft, weil ohne Pill-Flaeche */
}
#sp-page-builder .sppb-btn.sppb-btn-link.disabled,
#sp-page-builder .sppb-btn.sppb-btn-link[disabled],
#sp-page-builder .sppb-btn.sppb-btn-link[aria-disabled="true"] {
  color: var(--color-text-secondary, #5A6772) !important;
}

/* ----- Bewegungsreduktion respektieren (WCAG 2.3.3) ----- */
@media (prefers-reduced-motion: reduce) {
  #sp-page-builder .sppb-btn {
    transition: none;
  }
}