/* ==========================================================================
   MODULE 06: KREATIVITÄT — ACCENT COLORS
   Modul-spezifische Farbakzente innerhalb von Sprint 3 (Gold)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MIRROR QUESTION CARDS — 3 distinct icon colors
   -------------------------------------------------------------------------- */
.mirror-question-card--accent-1 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(244, 114, 182, 0.06));
  border-color: rgba(244, 114, 182, 0.3);
  color: #f472b6;
}
.mirror-question-card--accent-1:hover {
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(244, 114, 182, 0.08);
}
html.light-theme .mirror-question-card--accent-1:hover {
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(244, 114, 182, 0.15) inset;
}

.mirror-question-card--accent-2 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.06));
  border-color: rgba(217, 70, 239, 0.3);
  color: #d946ef;
}
.mirror-question-card--accent-2:hover {
  border-color: rgba(217, 70, 239, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(217, 70, 239, 0.08);
}
html.light-theme .mirror-question-card--accent-2:hover {
  border-color: rgba(217, 70, 239, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(217, 70, 239, 0.15) inset;
}

.mirror-question-card--accent-3 .mirror-card-icon {
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.15), rgba(251, 113, 133, 0.06));
  border-color: rgba(251, 113, 133, 0.3);
  color: #fb7185;
}
.mirror-question-card--accent-3:hover {
  border-color: rgba(251, 113, 133, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(251, 113, 133, 0.08);
}
html.light-theme .mirror-question-card--accent-3:hover {
  border-color: rgba(251, 113, 133, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(251, 113, 133, 0.15) inset;
}

/* --------------------------------------------------------------------------
   2. PROCESS STEPS — 4 distinct accent colors
   -------------------------------------------------------------------------- */
.process-step--accent-1 .process-step__icon {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.1);
  border-color: rgba(244, 114, 182, 0.15);
}
.process-step--accent-1 .process-step__num {
  color: #f472b6;
}
.process-step--accent-1:hover {
  border-color: rgba(244, 114, 182, 0.25);
}

.process-step--accent-2 .process-step__icon {
  color: #d946ef;
  background: rgba(217, 70, 239, 0.1);
  border-color: rgba(217, 70, 239, 0.15);
}
.process-step--accent-2 .process-step__num {
  color: #d946ef;
}
.process-step--accent-2:hover {
  border-color: rgba(217, 70, 239, 0.25);
}

.process-step--accent-3 .process-step__icon {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.1);
  border-color: rgba(251, 113, 133, 0.15);
}
.process-step--accent-3 .process-step__num {
  color: #fb7185;
}
.process-step--accent-3:hover {
  border-color: rgba(251, 113, 133, 0.25);
}

.process-step--accent-4 .process-step__icon {
  color: #e9c46a;
  background: rgba(233, 196, 106, 0.1);
  border-color: rgba(233, 196, 106, 0.15);
}
.process-step--accent-4 .process-step__num {
  color: #e9c46a;
}
.process-step--accent-4:hover {
  border-color: rgba(233, 196, 106, 0.25);
}

/* Override Sprint-3 arrow colors for each step */
.process-step--accent-1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-2::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d946ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-3::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}
.process-step--accent-4::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e9c46a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. W-TIMELINE BADGES — 5 distinct colors
   -------------------------------------------------------------------------- */
.w-timeline__badge--accent-1 {
  background: linear-gradient(135deg, #f472b6, #c2518a);
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.25);
}
.w-timeline__badge--accent-2 {
  background: linear-gradient(135deg, #d946ef, #b030c0);
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.25);
}
.w-timeline__badge--accent-3 {
  background: linear-gradient(135deg, #fb7185, #d5566a);
  box-shadow: 0 4px 16px rgba(251, 113, 133, 0.25);
}
.w-timeline__badge--accent-4 {
  background: linear-gradient(135deg, #e9c46a, #c4a24a);
  box-shadow: 0 4px 16px rgba(233, 196, 106, 0.25);
}
.w-timeline__badge--accent-5 {
  background: linear-gradient(135deg, #d946ef, #b030c0);
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.25);
}

/* --------------------------------------------------------------------------
   4. EXAMPLE CARDS — distinct header icon colors
   -------------------------------------------------------------------------- */
.example-card--accent-1 .example-header__icon {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(244, 114, 182, 0.06));
  border-color: rgba(244, 114, 182, 0.3);
  color: #f472b6;
}
.example-card--accent-2 .example-header__icon {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.06));
  border-color: rgba(217, 70, 239, 0.3);
  color: #d946ef;
}
.example-card--accent-3 .example-header__icon {
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.15), rgba(251, 113, 133, 0.06));
  border-color: rgba(251, 113, 133, 0.3);
  color: #fb7185;
}

/* --------------------------------------------------------------------------
   5. RESULT ICON — module-specific accent
   -------------------------------------------------------------------------- */
.module-06-result .result-icon {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(244, 114, 182, 0.06));
  border-color: rgba(244, 114, 182, 0.3);
  color: #f472b6;
}

/* --------------------------------------------------------------------------
   6. QUIZ CARDS — distinct number badge colors
   -------------------------------------------------------------------------- */
.quiz-card--accent-1 .quiz-number {
  background: linear-gradient(135deg, #f472b6, #c2518a);
  box-shadow: 0 4px 16px rgba(244, 114, 182, 0.25);
  color: #0a0a0f;
}
.quiz-card--accent-2 .quiz-number {
  background: linear-gradient(135deg, #d946ef, #b030c0);
  box-shadow: 0 4px 16px rgba(217, 70, 239, 0.25);
  color: #fff;
}
.quiz-card--accent-3 .quiz-number {
  background: linear-gradient(135deg, #fb7185, #d5566a);
  box-shadow: 0 4px 16px rgba(251, 113, 133, 0.25);
  color: #0a0a0f;
}

/* --------------------------------------------------------------------------
   7. TOOL CARDS — distinct logo accent colors
   -------------------------------------------------------------------------- */
.tool-card--accent-1 .tool-logo {
  background: linear-gradient(135deg, #10a37f, #0d8c6d);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 163, 127, 0.25);
}
.tool-card--accent-2 .tool-logo {
  background: linear-gradient(135deg, #cc785c, #b5654a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(204, 120, 92, 0.25);
}
.tool-card--accent-3 .tool-logo {
  background: linear-gradient(135deg, #1e3a5f, #152a45);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
}

/* --------------------------------------------------------------------------
   8. TAKEAWAY CARDS — distinct icon colors
   -------------------------------------------------------------------------- */
.takeaway-card--accent-1 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(244, 114, 182, 0.06));
  border-color: rgba(244, 114, 182, 0.3);
  color: #f472b6;
}
.takeaway-card--accent-1:hover {
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(244, 114, 182, 0.08);
}
html.light-theme .takeaway-card--accent-1:hover {
  border-color: rgba(244, 114, 182, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(244, 114, 182, 0.15) inset;
}

.takeaway-card--accent-2 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.15), rgba(217, 70, 239, 0.06));
  border-color: rgba(217, 70, 239, 0.3);
  color: #d946ef;
}
.takeaway-card--accent-2:hover {
  border-color: rgba(217, 70, 239, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(217, 70, 239, 0.08);
}
html.light-theme .takeaway-card--accent-2:hover {
  border-color: rgba(217, 70, 239, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(217, 70, 239, 0.15) inset;
}

.takeaway-card--accent-3 .takeaway-card__icon {
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.15), rgba(251, 113, 133, 0.06));
  border-color: rgba(251, 113, 133, 0.3);
  color: #fb7185;
}
.takeaway-card--accent-3:hover {
  border-color: rgba(251, 113, 133, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(251, 113, 133, 0.08);
}
html.light-theme .takeaway-card--accent-3:hover {
  border-color: rgba(251, 113, 133, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(251, 113, 133, 0.15) inset;
}

/* --------------------------------------------------------------------------
   9. FEATURE BADGES — distinct number badge colors in Werkzeugkasten
   -------------------------------------------------------------------------- */
.feature-item--accent-1 .feature-item__badge {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: #0a0a0f;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(244, 114, 182, 0.25);
}
html.light-theme .feature-item--accent-1 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(244, 114, 182, 0.12);
}

.feature-item--accent-2 .feature-item__badge {
  background: linear-gradient(135deg, #d946ef, #c026d3);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(217, 70, 239, 0.25);
}
html.light-theme .feature-item--accent-2 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(217, 70, 239, 0.12);
}

.feature-item--accent-3 .feature-item__badge {
  background: linear-gradient(135deg, #c026d3, #a21caf);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(192, 38, 211, 0.25);
}
html.light-theme .feature-item--accent-3 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(192, 38, 211, 0.12);
}

.feature-item--accent-4 .feature-item__badge {
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(251, 113, 133, 0.25);
}
html.light-theme .feature-item--accent-4 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(251, 113, 133, 0.12);
}

.feature-item--accent-5 .feature-item__badge {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(225, 29, 72, 0.25);
}
html.light-theme .feature-item--accent-5 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(225, 29, 72, 0.12);
}

/* --------------------------------------------------------------------------
   10. NEXT SECTION — accent colors for badge & features
   -------------------------------------------------------------------------- */
.module-06-next .next-badge {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.12), rgba(217, 70, 239, 0.06));
  color: #d946ef;
  border: 1px solid rgba(217, 70, 239, 0.2);
}
.module-06-next .next-badge i {
  color: #d946ef;
}
.module-06-next .next-feature:nth-child(1) i { color: #f472b6; }
.module-06-next .next-feature:nth-child(2) i { color: #d946ef; }
.module-06-next .next-feature:nth-child(3) i { color: #fb7185; }