/* ==========================================================================
   theme.css — FARBEN DER FOKUSSEITEN. Die EINZIGE Datei, die das Farbschema
   bestimmt. Überschreibt die Kern-Tokens aus tokens.css → die ganze Seite
   skinnt sich um. Arial, Radien und Struktur bleiben unverändert.

   Farbschema = bpm.mrknow.ai (bpm-mrknow-ai/assets/css/tokens.css,
   Styleguide V2, Entscheidung 18.08.2026):
   - Leitfarbe „Geschütztes Lila" #241D42 übernimmt die Rolle, die auf
     www.mrknow.ai Schwarzwald-Rot hat: Primary CTA, H2-Marker, Rail.
   - Rot #AB0F0F (Hover #A30000) bleibt erhalten, aber nur für Kennzahlen
     (KPI/ROI) und für den CTA auf dunklem Grund (Abschluss-CTA), wo ein
     lila Button unsichtbar wäre. So bleibt der Rotanteil deutlich unter 15 %.
   ========================================================================== */
:root{
  /* Lila-Rampe (dunkel → hell) — dunkelster Ton trägt Flächen/Headlines/Footer */
  --c-purple-900:#241D42;  /* Geschütztes Lila — Primary · Brand · Tiefe */
  --c-purple-800:#2e2455;
  --c-purple-700:#3b2f72;
  --c-purple-600:#4E3F8E;  /* MR.KNOW Purple — Secondary · Interaktion */
  --c-purple-500:#6354a8;  /* Fokus/heller Akzent */
  --c-purple-400:#8678c0;
  --c-purple-200:#c9c2e3;
  --c-purple-100:#e9e6f4;
  --c-purple-050:#f4f2fa;

  /* Schwarzwald-Rot laut Styleguide V2 */
  --c-red-600:#AB0F0F;
  --c-red-700:#A30000;
  --c-red-500:#c21a1a;
  --c-red-100:#f4e0e0;

  /* Primary CTA = Lila (wie bpm.mrknow.ai; auf www.mrknow.ai ist es Rot) */
  --cta:var(--c-purple-900);
  --cta-hover:var(--c-purple-700);

  /* Rot ausschließlich für Kennzahlen */
  --kpi:var(--c-red-600);
  --kpi-hover:var(--c-red-700);

  --shadow-sm:0 1px 2px rgba(36,29,66,0.06);
  --shadow:0 10px 30px rgba(36,29,66,0.08);
  --shadow-lg:0 24px 60px rgba(36,29,66,0.14);
}

/* Abschluss-CTA liegt auf dunklem Lila: dort trägt der Button Rot (wie der
   Hero-CTA auf bpm.mrknow.ai), sonst verschwände er im Hintergrund. */
.ms-cta .btn--cta{ background:var(--kpi); color:#fff; }
.ms-cta .btn--cta:hover{ background:var(--kpi-hover); color:#fff; }