/* ============================================
   LaunchBro Kurs-Player
   ============================================ */

.lbro-course {
  font-family: var(--lbro-font-family);
  color: var(--lbro-text-primary);
  max-width: var(--lbro-page-width, 1200px);
  margin: 0 auto;
  padding: var(--lbro-spacing-md);
}

/* === HEADER === */
.lbro-course__header {
  display: flex;
  align-items: center;
  gap: var(--lbro-spacing-xl);
  margin-bottom: var(--lbro-spacing-xl);
  padding-bottom: var(--lbro-spacing-lg);
  border-bottom: 1px solid var(--lbro-border);
  flex-wrap: wrap;
}

.lbro-course__title {
  font-size: var(--lbro-font-size-xl);
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.lbro-course__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lbro-course__progress-bar {
  width: 160px;
  height: 8px;
  background: var(--lbro-border);
  border-radius: var(--lbro-radius-full);
  overflow: hidden;
}

.lbro-course__progress-fill {
  height: 100%;
  background: var(--lbro-color-primary);
  border-radius: var(--lbro-radius-full);
  transition: width 0.4s ease;
}

.lbro-course__progress-label {
  font-size: var(--lbro-font-size-xs);
  color: var(--lbro-text-secondary);
  white-space: nowrap;
}

/* === LAYOUT: Sidebar + Hauptinhalt === */
.lbro-course__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--lbro-spacing-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .lbro-course__layout {
    grid-template-columns: 1fr;
  }

  .lbro-course__sidebar {
    order: 2;
  }

  .lbro-course__main {
    order: 1;
  }
}

/* === SIDEBAR === */
.lbro-course__sidebar {
  position: sticky;
  top: 32px;
  background: var(--lbro-bg-secondary);
  border: 1px solid var(--lbro-border);
  border-radius: var(--lbro-radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.lbro-course__chapter {
  border-bottom: 1px solid var(--lbro-border);
}

.lbro-course__chapter:last-child {
  border-bottom: none;
}

.lbro-course__chapter-title {
  font-size: var(--lbro-font-size-xs);
  font-weight: var(--lbro-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--lbro-text-secondary);
  padding: 12px 16px 8px;
}

.lbro-course__lessons {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.lbro-course__lesson {
  margin: 0;
}

.lbro-course__lesson-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: var(--lbro-font-size-sm);
  color: var(--lbro-text-primary);
  text-decoration: none;
  transition: background 0.1s;
  border-radius: 0;
}

.lbro-course__lesson-link:hover {
  background: var(--lbro-color-primary-light);
  color: var(--lbro-color-primary);
}

.lbro-course__lesson--active .lbro-course__lesson-link {
  background: var(--lbro-color-primary-light);
  color: var(--lbro-color-primary);
  font-weight: var(--lbro-font-weight-semibold);
}

.lbro-course__lesson--done .lbro-course__lesson-check {
  color: var(--lbro-color-success);
}

.lbro-course__lesson-check {
  flex-shrink: 0;
  color: var(--lbro-border);
  display: flex;
  align-items: center;
}

.lbro-course__lesson-title {
  line-height: 1.4;
}

/* === HAUPTINHALT === */
.lbro-course__main {
  min-width: 0;
}

.lbro-course__lesson-view {
  background: white;
  border: 1px solid var(--lbro-border);
  border-radius: var(--lbro-radius-lg);
  overflow: hidden;
}

.lbro-course__lesson-heading {
  font-size: var(--lbro-font-size-lg);
  font-weight: 700;
  margin: 0;
  padding: var(--lbro-spacing-xl);
  border-bottom: 1px solid var(--lbro-border);
  background: var(--lbro-bg-secondary);
}

/* === VIDEO === */
.lbro-course__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: var(--lbro-spacing-xl);
}

.lbro-course__video-wrap iframe,
.lbro-course__video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.lbro-video-container {
  margin: var(--lbro-spacing-xl);
}

.lbro-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: linear-gradient(135deg, var(--lbro-bg-secondary) 0%, #f9f9f9 100%);
  border: 2px dashed var(--lbro-border);
  border-radius: var(--lbro-radius-lg);
  color: var(--lbro-text-secondary);
  font-size: var(--lbro-font-size-sm);
}

/* === VIDEOLÄNGE === */
.lbro-course__video-duration {
  margin: var(--lbro-spacing-xl) var(--lbro-spacing-xl) 0;
  font-size: var(--lbro-font-size-xs);
  font-weight: var(--lbro-font-weight-semibold);
  color: var(--lbro-text-secondary);
}

/* === LERNZIELE-BLOCK === */
.lbro-course__objectives {
  margin: var(--lbro-spacing-xl);
  padding: var(--lbro-spacing-lg);
  background: var(--lbro-bg-secondary);
  border: 1px solid var(--lbro-border);
  border-radius: var(--lbro-radius-lg);
}

.lbro-course__objectives-title {
  font-size: var(--lbro-font-size-sm);
  font-weight: 700;
  margin: 0 0 var(--lbro-spacing-sm);
}

.lbro-course__objectives ul {
  margin: 0;
  padding-left: 20px;
}

.lbro-course__objectives li {
  font-size: var(--lbro-font-size-sm);
  line-height: 1.7;
}

/* === TEXTINHALT === */
.lbro-course__content {
  padding: var(--lbro-spacing-xl);
  font-size: var(--lbro-font-size-base);
  line-height: 1.7;
  color: var(--lbro-text-primary);
}

.lbro-course__content p { margin: 0 0 1em; }
.lbro-course__content h2,
.lbro-course__content h3 {
  margin: 1.5em 0 0.5em;
  font-weight: 700;
}
.lbro-course__content ul,
.lbro-course__content ol { margin: 0 0 1em 20px; }

/* === LINK-BLOCK === */
.lbro-course__link-block {
  margin: var(--lbro-spacing-xl);
}

.lbro-course__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--lbro-font-size-sm);
  font-weight: var(--lbro-font-weight-semibold);
  color: var(--lbro-button-text-color, white);
  background: var(--lbro-color-button, var(--lbro-color-primary));
  border-radius: var(--lbro-button-radius, var(--lbro-radius-md));
  text-decoration: none;
  transition: background 0.15s;
}

.lbro-course__link-btn:hover {
  background: color-mix(in srgb, var(--lbro-color-button, var(--lbro-color-primary)) 80%, black);
  color: var(--lbro-button-text-color, white);
}

/* === BILD-BLOCK === */
.lbro-course__image-block {
  margin: var(--lbro-spacing-xl);
}

.lbro-course__image {
  width: 100%;
  height: auto;
  border-radius: var(--lbro-radius-md);
  display: block;
}

.lbro-course__image-caption {
  margin: var(--lbro-spacing-sm) 0 0;
  font-size: var(--lbro-font-size-xs);
  color: var(--lbro-text-secondary);
  text-align: center;
}

/* === SPALTEN-BLOCK === */
.lbro-course__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lbro-spacing-xl);
  margin: var(--lbro-spacing-xl);
  align-items: start;
}

@media (max-width: 640px) {
  .lbro-course__columns {
    grid-template-columns: 1fr;
  }
}

.lbro-course__col-image {
  width: 100%;
  height: auto;
  border-radius: var(--lbro-radius-md);
  display: block;
}

.lbro-course__col-caption {
  margin: var(--lbro-spacing-sm) 0 0;
  font-size: var(--lbro-font-size-xs);
  color: var(--lbro-text-secondary);
  text-align: center;
}

.lbro-course__col--text {
  font-size: var(--lbro-font-size-base);
  line-height: 1.7;
  color: var(--lbro-text-primary);
}

.lbro-course__col--text p { margin: 0 0 1em; }
.lbro-course__col--text ul,
.lbro-course__col--text ol { margin: 0 0 1em 20px; }

/* === DOKUMENT-BLOCK === */
.lbro-course__document-block {
  margin: var(--lbro-spacing-xl);
}

.lbro-course__document-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--lbro-font-size-sm);
  font-weight: var(--lbro-font-weight-semibold);
  color: var(--lbro-text-primary);
  background: var(--lbro-bg-secondary);
  border: 1px solid var(--lbro-border);
  border-radius: var(--lbro-radius-md);
  text-decoration: none;
  transition: all 0.15s;
}

.lbro-course__document-link:hover {
  border-color: var(--lbro-color-primary);
  color: var(--lbro-color-primary);
}

/* === LEKTION-FOOTER: Navigation + Abschließen === */
.lbro-course__lesson-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lbro-spacing-md);
  padding: var(--lbro-spacing-lg) var(--lbro-spacing-xl);
  border-top: 1px solid var(--lbro-border);
  background: var(--lbro-bg-secondary);
  flex-wrap: wrap;
}

.lbro-course__nav-btn {
  display: inline-block;
  padding: var(--lbro-spacing-sm) var(--lbro-spacing-md);
  font-size: var(--lbro-font-size-sm);
  color: var(--lbro-color-primary);
  text-decoration: none;
  border: 1px solid var(--lbro-color-primary);
  border-radius: var(--lbro-radius-md);
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.lbro-course__nav-btn:hover {
  background: var(--lbro-color-primary);
  color: white;
}

.lbro-course__complete-btn {
  padding: 10px 24px;
  font-size: var(--lbro-font-size-sm);
  font-weight: var(--lbro-font-weight-semibold);
  background: var(--lbro-color-button, var(--lbro-color-primary));
  color: var(--lbro-button-text-color, white);
  border: none;
  border-radius: var(--lbro-button-radius, var(--lbro-radius-md));
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.lbro-course__complete-btn:hover {
  background: color-mix(in srgb, var(--lbro-color-button, var(--lbro-color-primary)) 80%, black);
}

.lbro-course__complete-btn--done {
  background: var(--lbro-color-success);
  cursor: default;
}

.lbro-course__complete-btn--done:hover {
  background: var(--lbro-color-success);
}

@media (max-width: 600px) {
  .lbro-course__lesson-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .lbro-course__nav-btn,
  .lbro-course__complete-btn {
    max-width: 100%;
    text-align: center;
    display: block;
  }
}