/* ==========================================================================
   MODULE 07: KRITISCHES DENKEN — 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(251, 146, 60, 0.15), rgba(251, 146, 60, 0.06));
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.mirror-question-card--accent-1:hover {
  border-color: rgba(251, 146, 60, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(251, 146, 60, 0.08);
}
html.light-theme .mirror-question-card--accent-1:hover {
  border-color: rgba(251, 146, 60, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(251, 146, 60, 0.15) inset;
}

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

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

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

.process-step--accent-2 .process-step__icon {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.15);
}
.process-step--accent-2 .process-step__num {
  color: #fbbf24;
}
.process-step--accent-2:hover {
  border-color: rgba(251, 191, 36, 0.25);
}

.process-step--accent-3 .process-step__icon {
  color: #c2410c;
  background: rgba(194, 65, 12, 0.1);
  border-color: rgba(194, 65, 12, 0.15);
}
.process-step--accent-3 .process-step__num {
  color: #c2410c;
}
.process-step--accent-3:hover {
  border-color: rgba(194, 65, 12, 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='%23fb923c' 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='%23fbbf24' 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='%23c2410c' 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, #fb923c, #ea580c);
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.25);
}
.w-timeline__badge--accent-2 {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.25);
}
.w-timeline__badge--accent-3 {
  background: linear-gradient(135deg, #c2410c, #9a3412);
  box-shadow: 0 4px 16px rgba(194, 65, 12, 0.25);
}
.w-timeline__badge--accent-4 {
  background: linear-gradient(135deg, #e9c46a, #d4a373);
  box-shadow: 0 4px 16px rgba(233, 196, 106, 0.25);
}
.w-timeline__badge--accent-5 {
  background: linear-gradient(135deg, #fb923c, #c2410c);
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.25);
}

/* --------------------------------------------------------------------------
   4. EXAMPLE CARDS — distinct header icon colors
   -------------------------------------------------------------------------- */
.example-card--accent-1 .example-header__icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.06));
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.example-card--accent-2 .example-header__icon {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.06));
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.example-card--accent-3 .example-header__icon {
  background: linear-gradient(135deg, rgba(194, 65, 12, 0.15), rgba(194, 65, 12, 0.06));
  border-color: rgba(194, 65, 12, 0.3);
  color: #c2410c;
}

/* --------------------------------------------------------------------------
   5. RESULT ICON — module-specific accent
   -------------------------------------------------------------------------- */
.module-07-result .result-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.06));
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

/* --------------------------------------------------------------------------
   6. QUIZ CARDS — distinct number badge colors
   -------------------------------------------------------------------------- */
.quiz-card--accent-1 .quiz-number {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.25);
  color: #0a0a0f;
}
.quiz-card--accent-2 .quiz-number {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 4px 16px rgba(251, 191, 36, 0.25);
  color: #0a0a0f;
}
.quiz-card--accent-3 .quiz-number {
  background: linear-gradient(135deg, #c2410c, #9a3412);
  box-shadow: 0 4px 16px rgba(194, 65, 12, 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(251, 146, 60, 0.15), rgba(251, 146, 60, 0.06));
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}
.takeaway-card--accent-1:hover {
  border-color: rgba(251, 146, 60, 0.35);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(251, 146, 60, 0.08);
}
html.light-theme .takeaway-card--accent-1:hover {
  border-color: rgba(251, 146, 60, 0.35);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 0 0 1px rgba(251, 146, 60, 0.15) inset;
}

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

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

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

.feature-item--accent-2 .feature-item__badge {
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  color: #0a0a0f;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(251, 146, 60, 0.25);
}
html.light-theme .feature-item--accent-2 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(251, 146, 60, 0.12);
}

.feature-item--accent-3 .feature-item__badge {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #0a0a0f;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(245, 158, 11, 0.25);
}
html.light-theme .feature-item--accent-3 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(245, 158, 11, 0.12);
}

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

.feature-item--accent-5 .feature-item__badge {
  background: linear-gradient(135deg, #c2410c, #9a3412);
  color: #fff;
  box-shadow: 0 0 0 6px var(--academy-bg-void), 0 0 0 8px rgba(194, 65, 12, 0.25);
}
html.light-theme .feature-item--accent-5 .feature-item__badge {
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px rgba(194, 65, 12, 0.12);
}

/* --------------------------------------------------------------------------
   10. NEXT SECTION — accent colors for badge & features
   -------------------------------------------------------------------------- */
.module-07-next .next-badge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}
.module-07-next .next-badge i {
  color: #fbbf24;
}
.module-07-next .next-feature:nth-child(1) i { color: #fb923c; }
.module-07-next .next-feature:nth-child(2) i { color: #fbbf24; }
.module-07-next .next-feature:nth-child(3) i { color: #c2410c; }