/* ==========================================================================
   MODULE 05: DIALOG-PROFI — ACCENT COLORS
   Modul-spezifische Farbakzente innerhalb von Sprint 2 (Teal)
   ========================================================================== */

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

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

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

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

.process-step--accent-2 .process-step__icon {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.15);
}
.process-step--accent-2 .process-step__num {
  color: #8b5cf6;
}
.process-step--accent-2:hover {
  border-color: rgba(139, 92, 246, 0.25);
}

.process-step--accent-3 .process-step__icon {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.15);
}
.process-step--accent-3 .process-step__num {
  color: #6366f1;
}
.process-step--accent-3:hover {
  border-color: rgba(99, 102, 241, 0.25);
}

.process-step--accent-4 .process-step__icon {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.15);
}
.process-step--accent-4 .process-step__num {
  color: #f59e0b;
}
.process-step--accent-4:hover {
  border-color: rgba(245, 158, 11, 0.25);
}

/* Override Sprint-2 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='%232d6a4f' 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='%238b5cf6' 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='%236366f1' 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='%23f59e0b' 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, #2d6a4f, #3d8a6a);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.25);
}
.w-timeline__badge--accent-2 {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
}
.w-timeline__badge--accent-3 {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}
.w-timeline__badge--accent-4 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}
.w-timeline__badge--accent-5 {
  background: linear-gradient(135deg, #2d6a4f, #3d8a6a);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.25);
}

/* --------------------------------------------------------------------------
   4. EXAMPLE CARDS — distinct header icon colors
   -------------------------------------------------------------------------- */
.example-card--accent-1 .example-header__icon {
  background: linear-gradient(135deg, rgba(45, 106, 79, 0.15), rgba(45, 106, 79, 0.06));
  border-color: rgba(45, 106, 79, 0.3);
  color: #2d6a4f;
}
.example-card--accent-2 .example-header__icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.06));
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}
.example-card--accent-3 .example-header__icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.06));
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

/* --------------------------------------------------------------------------
   5. RESULT ICON — module-specific accent
   -------------------------------------------------------------------------- */
.module-05-result .result-icon {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.06));
  border-color: rgba(139, 92, 246, 0.3);
  color: #8b5cf6;
}

/* --------------------------------------------------------------------------
   6. QUIZ CARDS — distinct number badge colors
   -------------------------------------------------------------------------- */
.quiz-card--accent-1 .quiz-number {
  background: linear-gradient(135deg, #2d6a4f, #3d8a6a);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.25);
  color: #fff;
}
.quiz-card--accent-2 .quiz-number {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
  color: #fff;
}
.quiz-card--accent-3 .quiz-number {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
  color: #fff;
}

/* --------------------------------------------------------------------------
   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(45, 106, 79, 0.15), rgba(45, 106, 79, 0.06));
  border-color: rgba(45, 106, 79, 0.3);
  color: #2d6a4f;
}
.takeaway-card--accent-1:hover {
  border-color: rgba(45, 106, 79, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(45, 106, 79, 0.08);
}
html.light-theme .takeaway-card--accent-1:hover {
  border-color: rgba(45, 106, 79, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(45, 106, 79, 0.15) inset;
}

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

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

/* --------------------------------------------------------------------------
   9. FEATURE BADGES — distinct number badge colors in Werkzeugkasten
   -------------------------------------------------------------------------- */
.feature-item--accent-1 .feature-item__badge {
  background: linear-gradient(135deg, #2d6a4f, #3d8a6a);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(45, 106, 79, 0.25);
}
html.light-theme .feature-item--accent-1 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(45, 106, 79, 0.12);
}

.feature-item--accent-2 .feature-item__badge {
  background: linear-gradient(135deg, #3d8a6a, #4A90A4);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(61, 138, 106, 0.25);
}
html.light-theme .feature-item--accent-2 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(61, 138, 106, 0.12);
}

.feature-item--accent-3 .feature-item__badge {
  background: linear-gradient(135deg, #4A90A4, #58a6ff);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(74, 144, 164, 0.25);
}
html.light-theme .feature-item--accent-3 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(74, 144, 164, 0.12);
}

.feature-item--accent-4 .feature-item__badge {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(139, 92, 246, 0.25);
}
html.light-theme .feature-item--accent-4 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(139, 92, 246, 0.12);
}

.feature-item--accent-5 .feature-item__badge {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(99, 102, 241, 0.25);
}
html.light-theme .feature-item--accent-5 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(99, 102, 241, 0.12);
}

/* --------------------------------------------------------------------------
   10. NEXT SECTION — accent colors for badge & features
   -------------------------------------------------------------------------- */
.module-05-next .next-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.module-05-next .next-badge i {
  color: #8b5cf6;
}
.module-05-next .next-feature:nth-child(1) i { color: #2d6a4f; }
.module-05-next .next-feature:nth-child(2) i { color: #8b5cf6; }
.module-05-next .next-feature:nth-child(3) i { color: #6366f1; }