/*
 * S.WERK-Optik für das Plugin „Easy Peasy Chatbot“ (Wissen, FAQ, Chat-Hub).
 *
 * Das Plugin bleibt auf allen Webseiten gleich. Was hier steht, legt nur
 * die Optik auf das S.WERK-Designsystem: Farben, Radien, Buttons,
 * Überschriften (Gewicht und Laufweite wie im Theme, keine gesperrten
 * Versalien). Die Datei lädt nur, wenn das Plugin seine Stile lädt
 * (inc/assets.php, Filter style_loader_tag).
 *
 * „body“ vorne erhöht die Spezifität, damit die Regeln sicher nach kb.css greifen.
 */

/* ── Farben und Radien über die Plugin-Variablen ─────────────────────── */
body .epc-kb, body .epc-hub, body .epc-faq, body .epc-tldr, body .epc-article-meta,
body .epc-article-crumbs, body .epc-related, body .epc-kb-ask {
  --epc-ink: var(--n900);
  --epc-muted: var(--n600);
  --epc-line: var(--n200);
  --epc-line-strong: var(--n900);
  --epc-paper: var(--n50);
  --epc-accent-ink: var(--a-ink);
  --epc-accent-tint: var(--a-tint);
  --epc-radius: var(--r);
  --epc-heading-font: var(--sans);
}

/* ── Breite wie .container im Theme, damit Kanten mit Logo und Menü fluchten ── */
body .epc-hub .epc-hub-inner {
  width: 100%;
  max-width: var(--maxw);
  padding-inline: var(--gutter);
}

/* ── Buttons wie überall: Orange mit dunkler Schrift ─────────────────── */
body .epc-kb-ask-btn, body .epc-hub .epc-hub-btn, body .epc-hub .epc-hub-askbtn {
  background: var(--a-btn, var(--a));
  border-color: var(--a-btn, var(--a));
  color: var(--n900);
  font-weight: 600;
}
body .epc-kb-ask-btn:hover, body .epc-hub .epc-hub-btn:hover, body .epc-hub .epc-hub-askbtn:hover {
  background: var(--a-btn-hover, #e85d00);
  border-color: var(--a-btn-hover, #e85d00);
  color: var(--n900);
}
body .epc-hub .epc-hub-btn--ghost { background: var(--n0); color: var(--n900); border-color: var(--n300); }
body .epc-hub .epc-hub-btn--ghost:hover { background: var(--n0); border-color: var(--n900); }

/* ── Überschriften: Gewicht und Laufweite wie im Theme ───────────────── */
body .epc-hub .epc-hub-title {           /* wie .page-hero__h1 */
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 640;
  letter-spacing: -.022em;
  line-height: 1.12;
}
body .epc-hub .epc-hub-h2 {              /* wie .h2 */
  font-size: var(--t-h2);
  font-weight: 620;
  letter-spacing: -.018em;
  line-height: 1.2;
}
body .epc-hub .epc-hub-topic-name,
body .epc-hub .epc-hub-featured-title,
body .epc-hub .epc-hub-card-title,
body .epc-hub .epc-hub-help-card h3 {
  font-weight: 600;
  letter-spacing: -.01em;
}
body .epc-faq-item summary,
body .epc-kb-card-title,
body .epc-hub .epc-hub-result-title,
body .epc-hub .epc-hub-othertopics a,
body .epc-kb-card-more,
body .epc-hub .epc-hub-askbtn { font-weight: 600; }

/* Kleine Zeilen über Überschriften: wie .eyebrow im Theme
   (normal geschrieben, Akzentfarbe, keine gesperrten Versalien) */
body .epc-hub .epc-hub-kicker,
body .epc-hub .epc-hub-eyebrow,
body .epc-hub .epc-hub-result-topic,
body .epc-hub .epc-hub-popular-label,
body .epc-hub .epc-hub-index-group h3,
body .epc-hub .epc-hub-card-topic,
body .epc-article-meta .epc-article-topic {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 14px;
}

/* ── Wissensartikel (Theme-Vorlage single-epc_wissen.php) ─────────────── */
/* Brotkrumen und Thema stehen schon im Seitenkopf */
.wissen-artikel .epc-article-crumbs,
.wissen-artikel .epc-article-meta .epc-article-topic { display: none; }