/* ==========================================================================
   Topic Themes – Color Schemes per CPT
   Each scheme sets semantic tokens consumed by all ks-g-* components.
   This file grows ~20 lines per color when adding a new CPT.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Color Schemes
   Each scheme sets semantic tokens consumed by all ks-g-* components.
   -------------------------------------------------------------------------- */

.gefuehl-theme-purple {
  --g-primary: var(--color-purple-300);
  --g-primary-light: #f2f0ff;
  --g-primary-100: var(--color-purple-100);
  --g-primary-50: var(--color-purple-50);
  --g-tag-bg: #f2f0ff;
  --g-tag-text: var(--color-purple-300);
  --g-card-border: var(--color-purple-100);
  --g-icon-bg: #eeeaff;
  --g-badge-bg: rgba(206, 198, 255, 0.3);
  --g-badge-text: #7851a8;
  --g-cta-bg: var(--color-purple-200);
  --g-step-hl-bg: rgba(238, 234, 255, 0.3);
  --g-step-hl-border: rgba(120, 81, 168, 0.2);
}

.gefuehl-theme-blue {
  --g-primary: var(--color-blue-400);
  --g-primary-light: var(--color-blue-50);
  --g-primary-100: var(--color-blue-200);
  --g-primary-50: #d9eeff;
  --g-tag-bg: #d9eeff;
  --g-tag-text: var(--color-blue-400);
  --g-card-border: var(--color-blue-200);
  --g-icon-bg: #d9eeff;
  --g-badge-bg: rgba(160, 215, 255, 0.3);
  --g-badge-text: var(--color-blue-300);
  --g-cta-bg: #406cae;
  --g-step-hl-bg: rgba(217, 238, 255, 0.3);
  --g-step-hl-border: rgba(91, 164, 217, 0.2);
}

.gefuehl-theme-yellow {
  --g-primary: var(--color-yellow-400);
  --g-primary-light: var(--color-yellow-50);
  --g-hero-box-text: var(--color-black);
  --g-cta-text: var(--color-black);
  --g-cta-check-bg: rgba(0, 0, 0, 0.2);
  --g-primary-100: var(--color-yellow-200);
  --g-primary-50: var(--color-yellow-100);
  --g-tag-bg: var(--color-yellow-100);
  --g-tag-text: var(--color-yellow-500);
  --g-card-border: var(--color-yellow-200);
  --g-icon-bg: var(--color-yellow-100);
  --g-badge-bg: rgba(254, 233, 164, 0.3);
  --g-badge-text: var(--color-yellow-400);
  --g-cta-bg: var(--color-yellow-400);
  --g-step-hl-bg: rgba(254, 233, 164, 0.3);
  --g-step-hl-border: rgba(200, 160, 40, 0.2);
}

.gefuehl-theme-green {
  --g-primary: var(--color-green-500);
  --g-primary-light: var(--color-green-50);
  --g-hero-box-bg: var(--color-green-300);
  --g-primary-100: var(--color-green-100);
  --g-primary-50: var(--color-green-50-alt);
  --g-tag-bg: var(--color-green-50);
  --g-tag-text: var(--color-green-500);
  --g-card-border: var(--color-green-100);
  --g-icon-bg: var(--color-green-50);
  --g-badge-bg: rgba(117, 214, 192, 0.3);
  --g-badge-text: var(--color-green-300);
  --g-cta-bg: var(--color-green-300);
  --g-step-hl-bg: rgba(117, 214, 192, 0.3);
  --g-step-hl-border: rgba(51, 151, 128, 0.2);
}

.gefuehl-theme-pink {
  --g-primary: var(--color-pink-600);
  --g-primary-light: var(--color-pink-100);
  --g-trust-btn-color: var(--color-black);
  --g-primary-100: var(--color-pink-200);
  --g-primary-50: var(--color-pink-100);
  --g-tag-bg: var(--color-pink-100);
  --g-tag-text: var(--color-pink-600);
  --g-card-border: var(--color-pink-200);
  --g-icon-bg: var(--color-pink-100);
  --g-badge-bg: rgba(233, 168, 224, 0.3);
  --g-badge-text: var(--color-pink-300);
  --g-cta-bg: #a15196;
  --g-step-hl-bg: rgba(233, 168, 224, 0.3);
  --g-step-hl-border: rgba(180, 111, 170, 0.2);
}

/* Familie & Freunde color schemes — hero box matches selected color */
.ff-theme-green {
  --g-primary: var(--color-green-300);
  --g-primary-light: var(--color-green-50);
  --g-hero-box-bg: var(--color-green-300);
  --g-primary-100: var(--color-green-100);
  --g-primary-50: var(--color-green-50);
  --g-tag-bg: var(--color-green-50);
  --g-tag-text: #0d4f40;
  --g-card-border: var(--color-green-100);
  --g-icon-bg: rgba(74, 144, 164, 0.1);
  --g-badge-bg: rgba(117, 214, 192, 0.3);
  --g-badge-text: var(--color-green-300);
  --g-cta-bg: #277463;
  --g-step-hl-bg: rgba(117, 214, 192, 0.15);
  --g-step-hl-border: rgba(39, 116, 99, 0.2);
}

.ff-theme-purple {
  --g-primary: var(--color-purple-300);
  --g-primary-light: #f2f0ff;
  --g-hero-box-bg: var(--color-purple-300);
  --g-primary-100: var(--color-purple-100);
  --g-primary-50: var(--color-purple-50);
  --g-tag-bg: #f2f0ff;
  --g-tag-text: var(--color-purple-300);
  --g-card-border: var(--color-purple-100);
  --g-icon-bg: #eeeaff;
  --g-badge-bg: rgba(206, 198, 255, 0.3);
  --g-badge-text: #7851a8;
  --g-cta-bg: var(--color-purple-200);
  --g-step-hl-bg: rgba(238, 234, 255, 0.3);
  --g-step-hl-border: rgba(120, 81, 168, 0.2);
}

.ff-theme-yellow {
  --g-primary: var(--color-yellow-400);
  --g-primary-light: var(--color-yellow-50);
  --g-hero-box-bg: #ebb501;
  --g-hero-box-text: var(--color-black);
  --g-cta-text: var(--color-black);
  --g-primary-100: var(--color-yellow-200);
  --g-primary-50: var(--color-yellow-100);
  --g-tag-bg: var(--color-yellow-100);
  --g-tag-text: var(--color-black);
  --g-card-border: var(--color-yellow-200);
  --g-icon-bg: var(--color-yellow-100);
  --g-badge-bg: rgba(254, 233, 164, 0.3);
  --g-badge-text: var(--color-yellow-400);
  --g-cta-bg: #ebb501;
  --g-step-hl-bg: rgba(254, 233, 164, 0.3);
  --g-step-hl-border: rgba(200, 160, 40, 0.2);
}

.ff-theme-orange {
  --g-primary: var(--color-orange-300);
  --g-primary-light: var(--color-orange-50);
  --g-hero-box-bg: #ad3f04;
  --g-primary-100: var(--color-orange-200);
  --g-primary-50: var(--color-orange-100);
  --g-tag-bg: var(--color-orange-50);
  --g-tag-text: var(--color-orange-400);
  --g-card-border: var(--color-orange-200);
  --g-icon-bg: rgba(253, 180, 141, 0.2);
  --g-badge-bg: rgba(253, 180, 141, 0.3);
  --g-badge-text: var(--color-orange-300);
  --g-cta-bg: #ad3f04;
  --g-step-hl-bg: rgba(253, 180, 141, 0.2);
  --g-step-hl-border: rgba(212, 101, 42, 0.2);
}

.ff-theme-orange .ks-g-validation-cta {
  background: #ad3f04;
}

.ff-theme-yellow .ks-g-hero-box h2 {
  color: var(--color-yellow-500);
}

.ff-theme-yellow .ks-g-validation-cta {
  color: var(--color-black);
}

.ff-theme-yellow .ks-g-validation-cta img,
.ff-theme-yellow .ks-g-validation-cta svg {
  filter: none;
}

.ff-theme-yellow .ks-g-cta-split {
  color: var(--color-black);
}

.ff-theme-yellow .ks-g-cta-trust-check {
  background: rgba(255, 255, 255, 0.2);
}

.ff-theme-yellow .ks-g-cta-card {
  background: rgba(255, 255, 255, 0.1);
}

.ff-theme-yellow .ks-g-cta-btn {
  background: var(--color-white);
  color: var(--color-black);
}

/* Category-level overrides for Familie & Freunde overview */
.category-ff .ks-g-trust-support {
  background: var(--color-green-50);
}

.category-ff .ks-g-trust-support-card {
  background: var(--color-green-300);
}

.category-ff .ks-g-trust-support-cta {
  color: var(--color-green-500);
}

.category-ff .ks-g-trust-support-link {
  color: #46316c;
}

.category-ff .ks-g-trust-support-link svg {
  stroke: #46316c;
}

.category-ff .ks-g-context-panel {
  background: var(--color-green-50);
}

.category-ff .ks-g-context-panel-link {
  border-color: var(--color-green-100);
}

.category-ff .ks-g-context-panel-link:hover {
  background: var(--color-green-50);
  border-color: var(--color-green-300);
}

/* Beziehung color schemes */
.beziehung-theme-purple {
  --g-primary: var(--color-pink-600);
  --g-primary-light: var(--color-pink-100);
  --g-hero-box-bg: var(--color-pink-600);
  --g-primary-100: var(--color-pink-200);
  --g-primary-50: var(--color-pink-100);
  --g-primary-200: var(--color-pink-200);
  --g-tag-bg: var(--color-pink-100);
  --g-tag-text: var(--color-pink-600);
  --g-card-border: var(--color-pink-200);
  --g-icon-bg: var(--color-pink-100);
  --g-badge-bg: rgba(233, 168, 224, 0.3);
  --g-badge-text: var(--color-pink-600);
  --g-cta-bg: #a15196;
  --g-step-hl-bg: rgba(233, 168, 224, 0.15);
  --g-step-hl-border: rgba(140, 66, 129, 0.2);
}

.beziehung-theme-purple .ks-g-bridge-numbered-badge {
  background: var(--color-pink-100);
  color: var(--color-pink-600);
}

.beziehung-theme-green {
  --g-primary: var(--color-green-300);
  --g-primary-light: var(--color-green-50);
  --g-hero-box-bg: var(--color-green-300);
  --g-primary-100: var(--color-green-100);
  --g-primary-50: var(--color-green-50);
  --g-primary-200: var(--color-green-100);
  --g-tag-bg: var(--color-green-50);
  --g-tag-text: var(--color-green-500);
  --g-card-border: var(--color-green-100);
  --g-icon-bg: rgba(74, 144, 164, 0.1);
  --g-badge-bg: rgba(117, 214, 192, 0.3);
  --g-badge-text: var(--color-green-300);
  --g-cta-bg: #277463;
  --g-step-hl-bg: rgba(117, 214, 192, 0.15);
  --g-step-hl-border: rgba(39, 116, 99, 0.2);
}

.beziehung-theme-green .ks-g-options-wrap .ks-g-explain-card {
  align-items: center;
  background: var(--g-primary-light);
  border-color: var(--g-card-border);
  text-align: center;
}

.beziehung-theme-green .ks-g-options-wrap .ks-g-explain-card h3 {
  justify-content: center;
}

.beziehung-theme-orange {
  --g-primary: var(--color-orange-300);
  --g-primary-light: var(--color-orange-50);
  --g-hero-box-bg: var(--color-orange-400);
  --g-primary-100: var(--color-orange-200);
  --g-primary-50: var(--color-orange-50);
  --g-primary-200: var(--color-orange-200);
  --g-tag-bg: var(--color-orange-50);
  --g-tag-text: var(--color-orange-400);
  --g-card-border: var(--color-orange-200);
  --g-icon-bg: rgba(253, 180, 141, 0.2);
  --g-badge-bg: rgba(253, 180, 141, 0.3);
  --g-badge-text: var(--color-orange-300);
  --g-cta-bg: #ad3f04;
  --g-step-hl-bg: rgba(253, 180, 141, 0.2);
  --g-step-hl-border: rgba(212, 101, 42, 0.2);
}

.beziehung-theme-orange .ks-g-validation-cta {
  background: #ad3f04;
}

.beziehung-theme-blue {
  --g-primary: var(--color-blue-400);
  --g-primary-light: var(--color-blue-50);
  --g-hero-box-bg: var(--color-blue-400);
  --g-primary-100: var(--color-blue-200);
  --g-primary-50: #d9eeff;
  --g-primary-200: var(--color-blue-200);
  --g-tag-bg: #d9eeff;
  --g-tag-text: var(--color-blue-400);
  --g-card-border: var(--color-blue-200);
  --g-icon-bg: #d9eeff;
  --g-badge-bg: rgba(160, 215, 255, 0.3);
  --g-badge-text: var(--color-blue-300);
  --g-cta-bg: #406cae;
  --g-step-hl-bg: rgba(217, 238, 255, 0.3);
  --g-step-hl-border: rgba(91, 164, 217, 0.2);
}

/* Category-level overrides for Beziehung overview */
.category-beziehung .ks-g-trust-support {
  background: var(--color-pink-100);
}

.category-beziehung .ks-g-trust-support-card {
  background: #8c4281;
}

.category-beziehung .ks-g-trust-support-cta {
  color: #46316c;
}

.category-beziehung .ks-g-trust-support-link {
  color: #46316c;
}

.category-beziehung .ks-g-trust-support-link svg {
  stroke: #46316c;
}

.category-beziehung .ks-g-context-panel {
  background: var(--color-pink-100);
}

.category-beziehung .ks-g-context-panel-link {
  border-color: var(--color-pink-200);
}

.category-beziehung .ks-g-context-panel-link:hover {
  background: var(--color-pink-100);
  border-color: var(--color-pink-600);
}


/* Digitale Gewalt color schemes */
.digitale_gewalt-theme-blue {
  --g-primary: #294a7b;
  --g-primary-light: #d9eeff;
  --g-hero-box-bg: #294a7b;
  --g-primary-100: var(--color-blue-200);
  --g-primary-50: #d9eeff;
  --g-tag-bg: #d9eeff;
  --g-tag-text: #294a7b;
  --g-card-border: var(--color-blue-200);
  --g-icon-bg: #d9eeff;
  --g-badge-bg: rgba(160, 215, 255, 0.3);
  --g-badge-text: #294a7b;
  --g-cta-bg: #406cae;
  --g-step-hl-bg: rgba(217, 238, 255, 0.3);
  --g-step-hl-border: rgba(41, 74, 123, 0.2);
}

.digitale_gewalt-theme-lila {
  --g-primary: var(--color-purple-300);
  --g-primary-light: #f2f0ff;
  --g-hero-box-bg: var(--color-purple-300);
  --g-primary-100: var(--color-purple-100);
  --g-primary-50: var(--color-purple-50);
  --g-tag-bg: #f2f0ff;
  --g-tag-text: var(--color-purple-300);
  --g-card-border: var(--color-purple-100);
  --g-icon-bg: #eeeaff;
  --g-badge-bg: rgba(206, 198, 255, 0.3);
  --g-badge-text: #7851a8;
  --g-cta-bg: #45316d;
  --g-step-hl-bg: rgba(238, 234, 255, 0.3);
  --g-step-hl-border: rgba(120, 81, 168, 0.2);
}

.digitale_gewalt-theme-yellow {
  --g-primary: var(--color-yellow-400);
  --g-primary-light: var(--color-yellow-50);
  --g-hero-box-bg: #ebb501;
  --g-hero-box-text: var(--color-black);
  --g-cta-text: var(--color-black);
  --g-primary-100: var(--color-yellow-200);
  --g-primary-50: var(--color-yellow-100);
  --g-tag-bg: var(--color-yellow-100);
  --g-tag-text: var(--color-yellow-500);
  --g-card-border: var(--color-yellow-200);
  --g-icon-bg: var(--color-yellow-100);
  --g-badge-bg: rgba(254, 233, 164, 0.3);
  --g-badge-text: var(--color-yellow-400);
  --g-cta-bg: #ebb501;
  --g-step-hl-bg: rgba(254, 233, 164, 0.3);
  --g-step-hl-border: rgba(200, 160, 40, 0.2);
}

.digitale_gewalt-theme-yellow .ks-g-cta-split {
  color: var(--color-black);
}

.digitale_gewalt-theme-yellow .ks-g-cta-trust-check {
  background: rgba(255, 255, 255, 0.2);
}

.digitale_gewalt-theme-yellow .ks-g-cta-card {
  background: rgba(255, 255, 255, 0.1);
}

.digitale_gewalt-theme-yellow .ks-g-cta-btn {
  background: var(--color-white);
  color: var(--color-black);
}

.digitale_gewalt-theme-yellow .ks-g-validation-cta {
  background: #ebb501;
  color: var(--color-black);
}

.digitale_gewalt-theme-yellow .ks-g-validation-cta img,
.digitale_gewalt-theme-yellow .ks-g-validation-cta svg {
  filter: none;
}

.digitale_gewalt-theme-green {
  --g-primary: var(--color-green-300);
  --g-primary-light: var(--color-green-50);
  --g-hero-box-bg: var(--color-green-300);
  --g-primary-100: var(--color-green-100);
  --g-primary-50: var(--color-green-50);
  --g-tag-bg: var(--color-green-50);
  --g-tag-text: var(--color-green-500);
  --g-card-border: var(--color-green-100);
  --g-icon-bg: var(--color-green-50);
  --g-badge-bg: rgba(117, 214, 192, 0.3);
  --g-badge-text: var(--color-green-300);
  --g-cta-bg: #277463;
  --g-step-hl-bg: rgba(117, 214, 192, 0.15);
  --g-step-hl-border: rgba(39, 116, 99, 0.2);
}

/* Deine Rechte color schemes */
.deine_rechte-theme-blue {
  --g-primary: var(--color-blue-400);
  --g-primary-light: var(--color-blue-50);
  --g-hero-box-bg: var(--color-blue-300);
  --g-primary-100: var(--color-blue-200);
  --g-primary-50: #d9eeff;
  --g-primary-200: var(--color-blue-200);
  --g-tag-bg: #d9eeff;
  --g-tag-text: var(--color-blue-400);
  --g-card-border: var(--color-blue-200);
  --g-icon-bg: #d9eeff;
  --g-badge-bg: rgba(160, 215, 255, 0.3);
  --g-badge-text: var(--color-blue-300);
  --g-cta-bg: var(--color-blue-300);
  --g-step-hl-bg: rgba(217, 238, 255, 0.3);
  --g-step-hl-border: rgba(91, 164, 217, 0.2);
}

.deine_rechte-theme-green {
  --g-primary: var(--color-green-300);
  --g-primary-light: var(--color-green-50);
  --g-hero-box-bg: var(--color-green-300);
  --g-primary-100: var(--color-green-100);
  --g-primary-50: var(--color-green-50);
  --g-primary-200: var(--color-green-100);
  --g-tag-bg: var(--color-green-50);
  --g-tag-text: var(--color-green-500);
  --g-card-border: var(--color-green-100);
  --g-icon-bg: var(--color-green-50);
  --g-badge-bg: rgba(117, 214, 192, 0.3);
  --g-badge-text: var(--color-green-300);
  --g-cta-bg: var(--color-green-200);
  --g-cta-text: var(--color-green-300);
  --g-step-hl-bg: rgba(117, 214, 192, 0.15);
  --g-step-hl-border: rgba(39, 116, 99, 0.2);
}

.deine_rechte-theme-orange {
  --g-primary: var(--color-orange-300);
  --g-primary-light: var(--color-orange-50);
  --g-hero-box-bg: var(--color-orange-400);
  --g-primary-100: var(--color-orange-200);
  --g-primary-50: var(--color-orange-50);
  --g-primary-200: var(--color-orange-200);
  --g-tag-bg: var(--color-orange-50);
  --g-tag-text: var(--color-orange-400);
  --g-card-border: var(--color-orange-200);
  --g-icon-bg: rgba(253, 180, 141, 0.2);
  --g-badge-bg: rgba(253, 180, 141, 0.3);
  --g-badge-text: var(--color-orange-300);
  --g-cta-bg: var(--color-orange-300);
  --g-step-hl-bg: rgba(253, 180, 141, 0.2);
  --g-step-hl-border: rgba(212, 101, 42, 0.2);
}

.deine_rechte-theme-lila {
  --g-primary: var(--color-purple-300);
  --g-primary-light: #f2f0ff;
  --g-hero-box-bg: var(--color-purple-300);
  --g-primary-100: var(--color-purple-100);
  --g-primary-50: var(--color-purple-50);
  --g-primary-200: var(--color-purple-100);
  --g-tag-bg: #f2f0ff;
  --g-tag-text: var(--color-purple-300);
  --g-card-border: var(--color-purple-100);
  --g-icon-bg: #eeeaff;
  --g-badge-bg: rgba(206, 198, 255, 0.3);
  --g-badge-text: #7851a8;
  --g-cta-bg: var(--color-purple-200);
  --g-step-hl-bg: rgba(238, 234, 255, 0.3);
  --g-step-hl-border: rgba(120, 81, 168, 0.2);
}

/* Category-level overrides for Hilfe & Beratung overview */
.category-hilfe-beratung .ks-g-trust-support {
  background: var(--color-blue-50);
}

.category-hilfe-beratung .ks-g-trust-support-card {
  background: var(--color-blue-300);
}

.category-hilfe-beratung .ks-g-trust-support-cta {
  color: var(--color-blue-400);
}

.category-hilfe-beratung .ks-g-trust-support-link {
  color: #46316c;
}

.category-hilfe-beratung .ks-g-trust-support-link svg {
  stroke: #46316c;
}

.category-hilfe-beratung .ks-g-validation-cta {
  background: #3fba9e;
}

.category-hilfe-beratung .ks-g-context-panel {
  background: var(--color-blue-50);
}

.category-hilfe-beratung .ks-g-context-panel-link {
  border-color: var(--color-blue-200);
}

.category-hilfe-beratung .ks-g-context-panel-link:hover {
  background: var(--color-blue-50);
  border-color: var(--color-blue-300);
}