.elementor-11397 .elementor-element.elementor-element-59ad341f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:104px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-11397 .elementor-element.elementor-element-8cb7a06 > .elementor-widget-container{margin:0px 50px 0px 50px;}.elementor-11397 .elementor-element.elementor-element-8cb7a06{text-align:center;}.elementor-11397 .elementor-element.elementor-element-3402bff7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-11397 .elementor-element.elementor-element-3402bff7.elementor-element{--align-self:center;}.elementor-11397 .elementor-element.elementor-element-3402bff7{text-align:center;}.elementor-11397 .elementor-element.elementor-element-dbb0970{width:100%;max-width:100%;}.elementor-11397 .elementor-element.elementor-element-dbb0970 > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled{background-color:var( --e-global-color-9138980 );}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-enrolled{background-color:var( --e-global-color-9138980 );}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-status .ld-course-status-label{color:#6366F1;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-status .ld-course-status-content .ld-status.ld-status-waiting{color:rgba(0, 0, 0, 0.65) !important;background-color:#6366F1  !important;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-price .ld-course-status-label{color:#6366F1;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-price .ld-course-status-price{color:#6366F1;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-label{color:#6366F1;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-action .learndash_join_button input.btn-join{color:#6366F1 !important;background-color:var( --e-global-color-9138980 );}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-action a.ld-button{color:#6366F1 !important;background-color:var( --e-global-color-9138980 );}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-action input#btn-join{color:#6366F1 !important;background-color:var( --e-global-color-9138980 );}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage{background:#6366F1;height:10px;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-progress .ld-progress-bar{background:#ffffff;height:10px;}.elementor-11397 .elementor-element.elementor-element-dbb0970 .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage{color:#6366F1 !important;}.elementor-11397 .elementor-element.elementor-element-598001e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-11397 .elementor-element.elementor-element-598001e{--width:95%;}}@media(max-width:1024px){.elementor-11397 .elementor-element.elementor-element-59ad341f{--padding-top:80px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}@media(max-width:767px){.elementor-11397 .elementor-element.elementor-element-59ad341f{--padding-top:60px;--padding-bottom:024px;--padding-left:5px;--padding-right:5px;}.elementor-11397 .elementor-element.elementor-element-8cb7a06 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-11397 .elementor-element.elementor-element-dbb0970 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-11397 .elementor-element.elementor-element-598001e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for ld-course-infobar, class: .elementor-element-dbb0970 *//* ===== MINIMALISTISCHES WEIßES LEARNDASH PROGRESS BAR DESIGN ===== */
/* Schlicht, modern und elegant - Premium White Design */

/* ===== LEGACY TEMPLATE PROGRESS BAR ===== */
.course_progress {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  height: 8px !important;
  overflow: visible !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  margin: 24px 0 32px 0 !important;
  transition: all 0.3s ease !important;
}

.course_progress_blue {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%) !important;
  height: 100% !important;
  border-radius: 11px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3) !important;
}

/* Subtle glow effect */
.course_progress_blue::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%) !important;
  opacity: 0 !important;
  animation: subtleGlow 3s infinite !important;
}

@keyframes subtleGlow {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
}

/* Progress Steps Display */
.course_progress:after {
  content: attr(title) !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -28px !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  background: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== LEARNDASH 3.0 TEMPLATE PROGRESS BAR ===== */
.learndash-wrapper .ld-progress {
  margin: 28px 0 36px 0 !important;
  padding: 0 !important;
}

.ld-progress-heading {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 8px !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.ld-progress-bar {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  height: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s ease !important;
}

.ld-progress-bar .ld-progress-bar-percentage {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%) !important;
  height: 100% !important;
  border-radius: 11px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3) !important;
}

.ld-progress-bar .ld-progress-bar-percentage::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%) !important;
  opacity: 0 !important;
  animation: subtleGlow 3s infinite !important;
}
.ld-status-last-activity {
  display: none !important;
}
/* ===== FOCUS MODE PROGRESS BAR ===== */
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress-heading {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress-bar {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  height: 6px !important;
  backdrop-filter: blur(10px) !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ld-progress-bar .ld-progress-bar-percentage {
  background: #ffffff !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ===== COURSE GRID PROGRESS BAR ===== */
.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress {
  margin: 16px 0 !important;
  padding: 0 20px !important;
}

.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress-heading {
  font-size: 12px !important;
  margin-bottom: 6px !important;
  color: #475569 !important;
}

.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress-bar {
  border-radius: 10px !important;
  height: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress-bar .ld-progress-bar-percentage {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.3) !important;
}

/* ===== COURSE STATUS WRAPPER ===== */
.ld-course-status {
  padding: 24px !important;
  border-radius: 16px !important;
  margin-bottom: 32px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.ld-course-status-enrolled {
  background: #ffffff !important;
  border-color: #bfdbfe !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08) !important;
}

.ld-course-status-completed {
  background: #ffffff !important;
  border-color: #bbf7d0 !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08) !important;
}

.ld-course-status-not-enrolled {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.05) !important;
}

/* ===== MODERNE BUTTONS ===== */
.learndash-wrapper .ld-button,
.learndash-wrapper .btn-primary,
.ld-course-status .ld-button,
.widget_course_progress .ld-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: -0.01em !important;
}

.learndash-wrapper .ld-button:hover,
.learndash-wrapper .btn-primary:hover,
.ld-course-status .ld-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4) !important;
  background: linear-gradient(135deg, #5b5ff5 0%, #8559f2 100%) !important;
}

.learndash-wrapper .ld-button:active,
.learndash-wrapper .btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* Secondary Button */
.learndash-wrapper .ld-button-secondary {
  background: #ffffff !important;
  color: #6366f1 !important;
  border: 2px solid #6366f1 !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1) !important;
}

.learndash-wrapper .ld-button-secondary:hover {
  background: #6366f1 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25) !important;
}

/* Disabled Button */
.learndash-wrapper .ld-button:disabled,
.learndash-wrapper .ld-button.disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== QUIZ BUTTONS ===== */
.learndash-wrapper .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_button2 {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25) !important;
}

.learndash-wrapper .wpProQuiz_button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.35) !important;
}

/* ===== COURSE NAVIGATION BUTTONS ===== */
.learndash-wrapper .ld-content-actions .ld-button {
  min-width: 120px !important;
  justify-content: center !important;
}

.learndash-wrapper .ld-content-actions .ld-button-secondary {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.learndash-wrapper .ld-content-actions .ld-button-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .learndash-progress-container {
    padding: 24px 20px !important;
    margin: 24px 0 !important;
    border-radius: 16px !important;
  }
  
  .learndash-progress-container-title {
    font-size: 16px !important;
  }
  
  .learndash-progress-container-subtitle {
    font-size: 13px !important;
  }
  
  .learndash-progress-container-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .learndash-progress-stats {
    gap: 8px !important;
  }
  
  .learndash-progress-stat {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  
  /* Mobile Purchase Required */
  .learndash-purchase-required {
    padding: 24px 20px !important;
    margin: 24px 0 !important;
    border-radius: 16px !important;
  }
  
  .learndash-purchase-required-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 16px !important;
  }
  
  .learndash-purchase-required-icon::before {
    font-size: 24px !important;
  }
  
  .learndash-purchase-required-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  
  .learndash-purchase-required-message {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  
  .learndash-purchase-button {
    padding: 14px 24px !important;
    font-size: 14px !important;
    min-width: 140px !important;
  }
  
  .learndash-course-price {
    font-size: 28px !important;
  }
  
  .learndash-course-price-currency {
    font-size: 20px !important;
  }
  
  .learndash-course-price-original {
    font-size: 16px !important;
  }
  
  /* Mobile Preview Mode */
  .learndash-course-preview {
    padding: 20px !important;
    margin: 20px 0 !important;
    border-radius: 16px !important;
  }
  
  .ld-progress-heading {
    font-size: 13px !important;
  }
  
  .ld-progress-bar {
    height: 6px !important;
  }
  
  .course_progress {
    height: 6px !important;
    margin: 20px 0 28px 0 !important;
  }
  
  .course_progress:after {
    font-size: 12px !important;
    padding: 4px 8px !important;
    bottom: -24px !important;
  }
  
  .learndash-wrapper .ld-button {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
  
  .ld-course-status {
    padding: 20px !important;
    margin-bottom: 24px !important;
  }
  
  .learndash-progress-card {
    padding: 20px !important;
    margin: 20px 0 !important;
  }
  
  .learndash-course-grid-container {
    padding: 16px !important;
    margin: 12px 0 !important;
  }
}

@media (max-width: 480px) {
  .learndash-progress-container {
    padding: 20px 16px !important;
    margin: 20px 0 !important;
  }
  
  .learndash-progress-container-compact {
    padding: 16px !important;
  }
  
  /* Mobile Purchase Required - Compact */
  .learndash-purchase-required {
    padding: 20px 16px !important;
  }
  
  .learndash-purchase-required-icon {
    width: 48px !important;
    height: 48px !important;
  }
  
  .learndash-purchase-required-icon::before {
    font-size: 20px !important;
  }
  
  .learndash-purchase-required-title {
    font-size: 18px !important;
  }
  
  .learndash-purchase-required-message {
    font-size: 13px !important;
  }
  
  .learndash-purchase-button {
    padding: 12px 20px !important;
    font-size: 13px !important;
    min-width: 120px !important;
  }
  
  .learndash-course-price {
    font-size: 24px !important;
  }
  
  .ld-progress-bar {
    height: 5px !important;
  }
  
  .course_progress {
    height: 5px !important;
  }
  
  .ld-course-list-items .ld_course_grid .thumbnail .caption .ld-progress {
    padding: 0 16px !important;
    margin: 12px 0 !important;
  }
  
  .learndash-wrapper .ld-button {
    padding: 8px 16px !important;
    font-size: 12px !important;
    min-width: 100px !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.learndash-purchase-required[role="alert"] {
  outline: 2px solid transparent !important;
}

.learndash-purchase-button:focus {
  outline: 2px solid #fbbf24 !important;
  outline-offset: 2px !important;
  box-shadow: 
    0 6px 20px rgba(251, 191, 36, 0.4),
    0 0 0 3px rgba(251, 191, 36, 0.2) !important;
}

.learndash-course-preview-badge[aria-label] {
  cursor: help !important;
}

/* ===== USAGE EXAMPLES ===== */
/*
HTML Structure Examples for Locked/Purchase States:

1. Purchase Required Container:
<div class="learndash-purchase-required" role="alert">
  <div class="learndash-purchase-required-icon"></div>
  <h3 class="learndash-purchase-required-title">Course Access Required</h3>
  <p class="learndash-purchase-required-message">
    Unlock this course to access all lessons and track your progress.
  </p>
  <div class="learndash-course-price">
    <span class="learndash-course-price-currency">€</span>99
    <span class="learndash-course-price-original">€149</span>
  </div>
  <a href="#" class="learndash-purchase-button">Purchase Course</a>
</div>

2. Preview Mode Container:
<div class="learndash-course-preview">
  <span class="learndash-course-preview-badge" aria-label="Limited preview access">
    Preview Mode
  </span>
  <!-- Your progress bar content here -->
</div>

3. Locked Course Status:
<div class="ld-course-status ld-course-status-locked">
  <!-- Your locked course content here -->
</div>

4. Not Purchased Course:
<div class="learndash-course-locked">
  <!-- Your locked progress bar here -->
</div>
*/

/* ===== CONTAINER USAGE EXAMPLES ===== */
/*
HTML Structure Examples:

1. Full Container with Header & Footer:
<div class="learndash-progress-container">
  <div class="learndash-progress-container-header">
    <h3 class="learndash-progress-container-title">Course Progress</h3>
    <p class="learndash-progress-container-subtitle">Your learning journey</p>
  </div>
  
  <!-- Your progress bar content here -->
  
  <div class="learndash-progress-container-footer">
    <div class="learndash-progress-stats">
      <span class="learndash-progress-stat">
        Completed: <span class="learndash-progress-stat-value">5/8</span>
      </span>
      <span class="learndash-progress-stat">
        Time: <span class="learndash-progress-stat-value">2h 15m</span>
      </span>
    </div>
  </div>
</div>

2. Compact Container:
<div class="learndash-progress-container-compact">
  <!-- Your progress bar content here -->
</div>

3. Simple Card:
<div class="learndash-progress-card">
  <!-- Your progress bar content here -->
</div>

4. Course Grid Container:
<div class="learndash-course-grid-container">
  <!-- Your course grid progress content here -->
</div>
*/

/* ===== HOVER EFFECTS ===== */
.course_progress:hover {
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  border-color: #d1d5db !important;
  transition: all 0.3s ease !important;
}

.ld-progress:hover .ld-progress-bar {
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  border-color: #d1d5db !important;
  transition: all 0.3s ease !important;
}

.ld-course-status:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ===== ACCESSIBILITY ===== */
.learndash-wrapper .ld-button:focus,
.learndash-wrapper .ld-button-secondary:focus {
  outline: 2px solid #6366f1 !important;
  outline-offset: 2px !important;
  box-shadow: 
    0 4px 12px rgba(99, 102, 241, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* ===== CUSTOM PERCENTAGE DISPLAY ===== */
.ld-progress-percentage {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-top: 4px !important;
  text-align: right !important;
}

/* Progress with percentage inside */
.ld-progress-bar[data-percentage]::before {
  content: attr(data-percentage) "%" !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  z-index: 10 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2a48ca2 *//* ===== AUßENRAHMEN (Container) ===== */
.learndash-wrapper .ld-item-list .ld-item-list-item {
    border: 2px solid; /* Wird durch Status-Klassen gefärbt */
    border-left: 8px solid;
    border-radius: 8px;
    margin: 1em 0;
    background: white;
    transition: all 0.3s ease;
}

/* ===== INNENBEREICH (Preview) ===== */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    padding: 24px;
    margin-bottom: 0px;
    border: none; /* Kein eigener Border, da der Container den Border hat */
    border-radius: 8px; /* Etwas kleiner als Container für sauberen Look */
    transition: all 0.3s ease;
    position: relative;
}

/* ===== FARBCODIERUNG FÜR AUßENRAHMEN ===== */

/* Nicht gestartet - Grau */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-incomplete) {
    border-color: #ccc;
}

/* In Bearbeitung - Orange */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-progress) {
    border-color: #ff9800;
}

/* Abgeschlossen - Grün */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-complete) {
    border-color: #4CAF50;
}

/* Spezifische Hover-Farben */
.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-incomplete):hover {
    border-color: #999;
    box-shadow: 0 6px 20px rgba(204, 204, 204, 0.3);
}

.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-progress):hover {
    border-color: #f57c00;
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3);
}

.learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-complete):hover {
    border-color: #45a049;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}

/* Status-Icon: Größerer moderner Kreis */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
    border-radius: 100%;
    border: 0px solid #e0e0e0;
    background: white;
    position: relative;
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Status-Icon Farben */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-incomplete {
    border-color: #ccc;
    background: #f5f5f5;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-progress {
    border-color: #ff9800;
    background: #ff9800;
}

.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-complete {
    border-color: #4CAF50;
    background: #4CAF50;
}

/* Icon-Inhalt (Checkmark, Play-Button, etc.) */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon:before {
    font-size: 20px;
    font-weight: bold;
}

/* Titel: Moderne, große Schrift */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    flex: 1;
}

/* Link-Element für bessere Flexbox-Ausrichtung */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview a.ld-item-name {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    width: 100% !important;
    transition: color 0.3s ease;
}

/* Hover-Effekt für den Titel */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview a.ld-item-name:hover .ld-item-title {
    color: #9C27B0 !important;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
        padding: 22px;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
        width: 44px !important;
        height: 44px !important;
        margin-right: 18px;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
        font-size: 18px !important;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon:before {
        font-size: 18px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .learndash-wrapper .ld-item-list .ld-item-list-item {
        border-width: 2px;
        border-left-width: 6px;
        border-radius: 6px;
        margin: 0.8em 0;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
        margin-right: 16px;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon:before {
        font-size: 16px;
    }
}

/* Mobile Medium (321px - 480px) */
@media (max-width: 480px) and (min-width: 321px) {
    .learndash-wrapper .ld-item-list .ld-item-list-item {
        border-width: 2px;
        border-left-width: 5px;
        border-radius: 6px;
        margin: 0.6em 0;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
        padding: 18px;
        border-radius: 5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
        margin-right: 14px;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon:before {
        font-size: 14px;
    }
    
    /* Hover-Effekte auf mobil reduzieren */
    .learndash-wrapper .ld-item-list .ld-item-list-item:hover {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile Small (bis 320px) */
@media (max-width: 320px) {
    .learndash-wrapper .ld-item-list .ld-item-list-item {
        border-width: 1px;
        border-left-width: 4px;
        border-radius: 4px;
        margin: 0.5em 0;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon {
        margin-right: 12px;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-status-icon:before {
        font-size: 13px;
    }
    
    /* Hover-Effekte komplett entfernen auf sehr kleinen Displays */
    .learndash-wrapper .ld-item-list .ld-item-list-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* Touch-Optimierung für alle mobilen Geräte */
@media (max-width: 768px) {
    /* Größere Touch-Targets */
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview a.ld-item-name {
        min-height: 48px; /* Minimum Touch-Target nach Material Design */
        padding: 8px 0;
    }
    
    /* Bessere Lesbarkeit auf mobil */
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview .ld-item-title {
        font-weight: 500 !important; /* Etwas weniger bold für bessere Lesbarkeit */
        word-wrap: break-word;
        hyphens: auto;
    }
    
    /* Weniger aggressive Schatten auf mobil */
    .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    
    /* Optimierte Hover-Farben für Touch */
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-incomplete):hover,
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-incomplete):active {
        box-shadow: 0 4px 16px rgba(204, 204, 204, 0.2);
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-progress):hover,
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-progress):active {
        box-shadow: 0 4px 16px rgba(255, 152, 0, 0.2);
    }
    
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-complete):hover,
    .learndash-wrapper .ld-item-list .ld-item-list-item:has(.ld-status-complete):active {
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.2);
    }
}

.learndash-wrapper .ld-item-list .ld-section-heading {
  font-size: clamp(1.3rem, 3vw, 1.2rem)!important
  font-weight: 700;
  background: linear-gradient(360deg, #E91E63, #9C27B0, #2196F3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0em; !important
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding: 0.5rem 0;
}

.learndash-wrapper .ld-lesson-section-heading {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  background: #2c3e50;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: uppercase;
}/* End custom CSS */
/* Start custom CSS *//* ===== MODERNE LEARNDASH KURSSEITE - OHNE ROOT VARIABLEN ===== */
/* Verwende diese CSS-Klassen in deinen Elementor Custom CSS Feldern */

/* ===== GLOBALE BODY STYLES ===== */
.coursebody {
  background: linear-gradient(135deg, #F0B1DC 0%, #FFF788 100%) !important;
  color: #2D1B69 !important;
}

/* ===== HERO SECTION ===== */
.hero-section {
  text-align: center;
  padding: 80px 20px 60px;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  background: linear-gradient(45deg, #E91E63, #9C27B0, #2196F3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-subtitle {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: #2D1B69;
  margin-bottom: 2rem;
  font-weight: 500;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}/* End custom CSS */