main {
    --color-foreground: 46, 46, 46;
    --color-background: 255, 255, 255;
    color: rgb(var(--color-foreground));
    background: rgb(var(--color-background));
}

/**
 * 🌿 QiO-Akademie Premium-Design (Custom CSS für Tevello)
 * * Farbschema:
 * - Tannengrün (Hauptfarbe): #1c352d
 * - Warmes Gold (Akzent): #c39b62
 * - Sand (Hintergrund): #f4f1ea
 * - Off-Black (Text): #2e2e2e
 * * Dieses Stylesheet überschreibt die Tevello-Standard-Elemente,
 * um Caroline Bertram und Euren zukünftigen Klienten ein 
 * absolut nahtloses Premium-Erlebnis zu bieten.
 */

/* ==========================================================================
   1. GLOBALE STRUKTUR & SCHRIFTARTEN
   ========================================================================== */
body, 
.tevello-app, 
.tevello-course-player, 
.tevello-dashboard {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2e2e2e !important;
  background-color: #ffffff !important;
}

/* ==========================================================================
   2. PRIMÄRE & SEKUNDÄRE BUTTONS (Tannengrün & Gold-Hover)
   ========================================================================== */
.tevello-app .btn-primary,
.tevello-app .button-primary,
.tevello-app button[type="submit"],
.tevello-btn-primary,
.tevello-course-player .btn-primary {
  background-color: #1c352d !important;
  border-color: #1c352d !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  transition: all 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(28, 53, 45, 0.1) !important;
}

.tevello-app .btn-primary:hover,
.tevello-app .button-primary:hover,
.tevello-app button[type="submit"]:hover,
.tevello-btn-primary:hover,
.tevello-course-player .btn-primary:hover {
  background-color: #c39b62 !important;
  border-color: #c39b62 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 12px rgba(195, 155, 98, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Sekundäre Buttons (z.B. "Zurück") */
.tevello-app .btn-secondary,
.tevello-app .button-secondary,
.tevello-btn-secondary {
  background-color: #f4f1ea !important;
  border: 1px solid #c39b62 !important;
  color: #1c352d !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease-in-out !important;
}

.tevello-app .btn-secondary:hover,
.tevello-app .button-secondary:hover,
.tevello-btn-secondary:hover {
  background-color: #1c352d !important;
  color: #ffffff !important;
  border-color: #1c352d !important;
}

/* ==========================================================================
   3. KARTEN & KURSÜBERSICHT (Sanfter Sand-Hintergrund & Schatten)
   ========================================================================== */
.tevello-card,
.tevello-course-card,
.tevello-module-row {
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.tevello-card:hover,
.tevello-course-card:hover {
  border-color: #c39b62 !important;
  box-shadow: 0 8px 16px rgba(28, 53, 45, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   4. LEKTIONS-NAVIGATION (Aktive Zustände in Tannengrün)
   ========================================================================== */
/* Aktive Lektion in der Seitenleiste */
.tevello-sidebar .active,
.tevello-lesson-row.active,
.tevello-lesson-row:hover {
  background-color: #f4f1ea !important;
  border-left: 4px solid #c39b62 !important;
  color: #1c352d !important;
}

/* Häkchen für erledigte Lektionen */
.tevello-lesson-completed-icon,
.tevello-checkmark {
  color: #1c352d !important;
}

/* ==========================================================================
   5. FORTSCHRITTSBALKEN (Tannengrün statt Standard-Farbe)
   ========================================================================== */
.tevello-progress-bar,
.tevello-progress-fill,
.tevello-progress .progress-bar-fill {
  background-color: #1c352d !important;
}

.tevello-progress-track,
.tevello-progress .progress-bar-track {
  background-color: #f4f1ea !important;
  border-radius: 4px !important;
}

/* Prozentzahl-Anzeige */
.tevello-progress-percent,
.tevello-percentage {
  color: #1c352d !important;
  font-weight: bold !important;
}

/* ==========================================================================
   6. TEXT-LINKS & AKZENTE (Gold-Optik)
   ========================================================================== */
.tevello-app a,
.tevello-course-player a,
.tevello-link {
  color: #c39b62 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.tevello-app a:hover,
.tevello-course-player a:hover,
.tevello-link:hover {
  color: #1c352d !important;
  text-decoration: underline !important;
}

/* Kategorie-Tags */
.tevello-badge,
.tevello-tag {
  background-color: #f4f1ea !important;
  color: #1c352d !important;
  border: 1px solid #c39b62 !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}