/* tutor lms anpassungen (tutor 4.x)
   tutor 4 hat ein eigenes token-system (--tutor-surface-*, --tutor-text-*, --tutor-border-*, --tutor-icon-*).
   wir mappen die tokens auf die fsp-palette statt einzelne regeln mit !important zu übermalen,
   dann erben auch verschachtelte tutor-komponenten (buttons, fortschritt, tooltips, modals) das aussehen.

   aufbau:
   1. globale tokens (helle flächen)
   2. typografie und buttons
   3. kursarchiv und kurskarten
   4. kursdetail
   5. lernbereich (dunkle sidebar/topbar per token-scope)
   6. lektionsbausteine (.fsp-*)
   7. dashboard */

/* ---- 1. globale tokens ---- */
:root,
.tutor-wrap,
body.fsp {
  /* markenskala (orange) */
  --tutor-brand-100: #FFF5F0;
  --tutor-brand-200: #FDEEE6;
  --tutor-brand-300: #FBD6C3;
  --tutor-brand-400: #F5A780;
  --tutor-brand-450: #EF7A3F;
  --tutor-brand-500: #EA5614;
  --tutor-brand-600: #EA5614;
  --tutor-brand-700: #C9460D;
  --tutor-brand-800: #A6390A;
  --tutor-brand-900: #7D2B08;
  --tutor-brand-950: #4A1A05;
  --tutor-color-primary: #EA5614;
  --tutor-color-primary-hover: #C9460D;

  /* schrift */
  --tutor-font-family-body: Roboto, system-ui, sans-serif;
  --tutor-font-family-heading: Roboto, system-ui, sans-serif;

  /* flächen */
  --tutor-surface-base: #F4F4F4;
  --tutor-surface-l1: #FFFFFF;
  --tutor-surface-l1-hover: #F4F4F4;
  --tutor-surface-l2: #E9E9E9;
  --tutor-surface-l2-hover: #DADADA;
  --tutor-surface-l3: #F4F4F4;
  --tutor-surface-sidebar-l1: #FFFFFF;
  --tutor-surface-dark: #0B1219;
  --tutor-surface-success: #EAF4EE;

  /* text */
  --tutor-text-primary: #1D1D1B;
  --tutor-text-primary-inverse: #FFFFFF;
  --tutor-text-secondary: #5F6368;
  --tutor-text-subdued: #8A8E93;
  --tutor-text-light: #F4F4F4;
  --tutor-text-success: #2E8B57;

  /* linien */
  --tutor-border-idle: #DADADA;
  --tutor-border-idle2: #DADADA;
  --tutor-border-hover: #C6C6C6;
  --tutor-border-dark: #0B1219;
  --tutor-border-success: #2E8B57;

  /* icons */
  --tutor-icon-idle: #1D1D1B;
  --tutor-icon-idle-inverse: #FFFFFF;
  --tutor-icon-hover: #000000;
  --tutor-icon-secondary: #5F6368;
  --tutor-icon-subdued: #8A8E93;
  --tutor-icon-success-primary: #2E8B57;
  --tutor-icon-success-secondary: #2E8B57;

  /* aktionen */
  --tutor-actions-gray-empty: #F4F4F4;
  --tutor-actions-gray-secondary: #F4F4F4;
  --tutor-actions-gray-tertiary: #E9E9E9;
  --tutor-actions-success-primary: #2E8B57;
  --tutor-actions-success-secondary: #9CCBAF;
  --tutor-actions-success-tertiary: #EAF4EE;
}

/* ---- 2. typografie und buttons ----
   achtung: schrift nur über --tutor-font-family-* setzen. ein pauschales font-family !important
   auf .tutor-wrap * killt die icon-schrift "tutor", dann sind alle tutor-icons leere kästchen */

/* theme.json setzt h1/h5/h6 auf versalien und links auf unterstreichung,
   in den tutor-oberflächen (kursinhalt, sidebar, dashboard) passt das nicht, da sind lektionstitel h5/h6 */
.tutor-wrap :is(h1, h2, h3, h4, h5, h6),
.tutor-learning-area :is(h1, h2, h3, h4, h5, h6),
.tutor-dashboard :is(h1, h2, h3, h4, h5, h6) {
  text-transform: none;
  letter-spacing: normal;
}

.tutor-wrap a,
.tutor-learning-area a,
.tutor-dashboard a {
  text-decoration: none;
}

.tutor-wrap a:hover,
.tutor-learning-area a:hover,
.tutor-dashboard a:hover {
  color: var(--tutor-color-primary);
}

/* buttons im fsp-stil: eckig, versalien, fett */
.tutor-btn {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

/* icon-buttons bleiben quadratisch/rund, kein tracking */
.tutor-btn-icon {
  letter-spacing: normal;
}

/* ---- 3. kursarchiv und kurskarten ---- */
.tutor-course-card,
.tutor-card {
  border-radius: 14px;
  border: 1px solid var(--tutor-border-idle);
  box-shadow: 0 1px 2px rgba(11, 18, 25, .06), 0 8px 24px rgba(11, 18, 25, .08);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .18s ease;
}

.tutor-course-card:hover {
  box-shadow: 0 2px 4px rgba(11, 18, 25, .08), 0 16px 40px rgba(11, 18, 25, .14);
}

.tutor-course-card .tutor-course-name,
.tutor-course-card .tutor-course-name a {
  color: var(--tutor-text-primary);
  font-weight: 700;
}

.tutor-course-card .tutor-course-name a:hover {
  color: var(--tutor-color-primary);
}

.tutor-course-card .tutor-course-price {
  color: var(--tutor-text-primary);
  font-weight: 700;
}

.tutor-course-card .tutor-course-thumbnail img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.tutor-course-archive-page h1 {
  text-transform: uppercase;
  font-weight: 900;
}

/* ---- 4. kursdetail ---- */
.tutor-course-details-page h1,
.tutor-course-details-page .tutor-course-details-title {
  text-transform: uppercase;
  font-weight: 900;
}

.tutor-course-single-content-wrapper {
  padding-top: 2rem;
}

.tutor-course-topic .tutor-accordion-item-header,
.tutor-course-topics .tutor-accordion-item-header {
  font-weight: 700;
}

.tutor-nav-link.is-active {
  color: var(--tutor-color-primary);
  border-color: var(--tutor-color-primary);
}

/* die sticky tab-leiste (kursinfo / ankündigungen) ist bei tutor nur 60% deckend,
   der backdrop-filter greift hier nicht und der text darunter scheint durch */
.tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky {
  background: #fff;
  border-bottom: 1px solid var(--tutor-border-idle);
}

/* ---- 5. lernbereich ----
   tutor 4 baut den lernbereich aus hellen karten (...-header-inner, ...-sidebar-curriculum, ...-sidebar-pages)
   in den äußeren containern. statt jede karte einzeln zu übermalen, drehen wir die tokens in topbar
   und sidebar um, text/icons/linien/buttons folgen dann von selbst */
body.fsp-learning-area {
  background: #fff;
}

.tutor-learning-header,
.tutor-learning-sidebar {
  --tutor-surface-base: #0B1219;
  --tutor-surface-l1: #0B1219;
  --tutor-surface-l1-hover: #141D27;
  --tutor-surface-l2: #141D27;
  --tutor-surface-l2-hover: #1C2733;
  --tutor-surface-l3: #141D27;
  --tutor-surface-sidebar-l1: #0B1219;

  --tutor-text-primary: #FFFFFF;
  --tutor-text-primary-inverse: #0B1219;
  --tutor-text-secondary: rgba(255, 255, 255, .72);
  --tutor-text-subdued: rgba(255, 255, 255, .55);

  --tutor-border-idle: rgba(255, 255, 255, .08);
  --tutor-border-idle2: rgba(255, 255, 255, .08);
  --tutor-border-hover: rgba(255, 255, 255, .2);

  --tutor-icon-idle: #FFFFFF;
  --tutor-icon-hover: var(--tutor-color-primary);
  --tutor-icon-secondary: rgba(255, 255, 255, .72);
  --tutor-icon-subdued: rgba(255, 255, 255, .55);

  --tutor-actions-gray-empty: rgba(255, 255, 255, .12);
  --tutor-actions-gray-secondary: transparent;
  --tutor-actions-gray-tertiary: rgba(255, 255, 255, .08);

  /* hover/aktiv-flächen der sidebar-listen */
  --tutor-tab-l3-active-hover: rgba(255, 255, 255, .07);
  --tutor-tab-sidebar-l4-hover: rgba(255, 255, 255, .07);
  --tutor-tab-sidebar-l4-active: rgba(234, 86, 20, .18);
  --tutor-quiz-hover: rgba(255, 255, 255, .07);

  background: #0B1219;
  color: #fff;
}

/* topbar: die innere karte hat bei tutor eine eigene helle fläche */
.tutor-learning-header-inner {
  background: transparent;
  border-radius: 0;
}

.tutor-learning-header-title {
  color: #fff;
  font-weight: 700;
}

.tutor-learning-header a:hover,
.tutor-learning-header button:hover {
  color: var(--tutor-color-primary);
}

/* sidebar: die beiden panels sind auch helle karten */
.tutor-learning-sidebar-curriculum,
.tutor-learning-sidebar-pages {
  background: transparent;
  border-color: rgba(255, 255, 255, .08);
}

.tutor-learning-progress-text {
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .75rem;
}

.tutor-learning-sidebar .tutor-progress-bar {
  background: rgba(255, 255, 255, .15);
}

.tutor-learning-sidebar .tutor-progress-value {
  background: var(--tutor-color-primary);
}

/* themen-kopfzeile (akkordeon) */
.tutor-learning-nav-header {
  background: transparent;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav-topic .tutor-learning-nav-header-title {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav-topic.active .tutor-learning-nav-header-title,
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav-topic.active:not(.expanded) .tutor-learning-nav-header-title {
  color: var(--tutor-color-primary);
}

/* lektionen / quizze in der sidebar
   tutor adressiert die über die volle kette .tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav ...
   wir spiegeln die, damit es ohne !important greift */
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item {
  background: transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, .85);
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item:hover,
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item:focus {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active,
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active:hover {
  background: var(--tutor-color-primary);
  color: #fff;
  font-weight: 700;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active svg,
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active:hover svg {
  color: #fff;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.active .tutor-text-subdued {
  color: rgba(255, 255, 255, .8);
  font-weight: 400;
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item.completed svg {
  color: var(--tutor-color-primary);
}

/* ein-/ausklappen-schalter liegt fixiert außerhalb der sidebar */
.tutor-learning-area .tutor-expand-btn {
  background: #0B1219;
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* unterseiten-navigation (übersicht, notizen, q&a), flächen/farben kommen aus den tokens, hier nur radien */
.tutor-learning-sidebar .tutor-learning-sidebar-pages .tutor-learning-pages-item {
  border-radius: 4px;
}

/* inhalt und fußzeile bleiben hell */
.tutor-learning-area-content {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #DADADA;
}

.tutor-learning-area-footer {
  background: #fff;
  border-top: 1px solid #DADADA;
}

/* "als abgeschlossen markieren": tutor liefert eine helle pille, wir wollen den soliden orangen button */
.tutor-lesson-content button.tutor-mark-as-complete-button,
.tutor-lesson-content button.tutor-mark-as-complete-button:hover:not(.completed):not(:disabled),
.tutor-lesson-content button.tutor-mark-as-complete-button:focus:not(:disabled) {
  background-color: var(--tutor-color-primary);
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.tutor-lesson-content button.tutor-mark-as-complete-button:hover:not(.completed):not(:disabled) {
  background-color: var(--tutor-color-primary-hover);
}

.tutor-lesson-content button.tutor-mark-as-complete-button svg,
.tutor-lesson-content button.tutor-mark-as-complete-button:hover:not(.completed):not(:disabled) svg {
  color: #fff;
}

.tutor-lesson-content button.tutor-mark-as-complete-button.completed {
  background-color: #2E8B57;
  color: #fff;
}

/* tab-leiste über dem lektionsinhalt */
.tutor-lesson-content-tab .tutor-nav-link.is-active,
.tutor-tabs-nav .is-active {
  color: var(--tutor-color-primary);
}

/* quiz-antworten */
.tutor-quiz-answer,
.tutor-quiz-answer-single {
  border-radius: 14px;
}

.tutor-quiz-answer:has(input:checked) {
  border-color: var(--tutor-color-primary);
  background: #FDEEE6;
}

/* ---- 6. lektionsbausteine ---- */

/* tutor färbt überschriften im lektionsinhalt hart ein (.tutor-lesson-content .tutor-lesson-wrapper h1...h6)
   und schlägt damit die block-stile vom theme, titel in dunklen boxen wären dann schwarz auf anthrazit.
   hier die theme-regeln mit gleicher gewichtung wiederherstellen */
.tutor-lesson-content .tutor-lesson-wrapper .is-style-callout :is(h2, h3, h4, h5),
.tutor-lesson-content .tutor-lesson-wrapper .fsp-number-card :is(h3, h4) {
  color: var(--tutor-color-primary);
}

.tutor-lesson-content .tutor-lesson-wrapper .is-style-card-dark :is(h2, h3, h4),
.tutor-lesson-content .tutor-lesson-wrapper .fsp-service-card__body h3 {
  color: #fff;
}

.tutor-lesson-content .tutor-lesson-wrapper .fsp-topic-card__head {
  color: var(--tutor-color-primary);
}

.tutor-lesson-content .tutor-lesson-wrapper .has-white-color :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* lektionstitel mit nummern-badge (1.1) */
.fsp-lesson-title { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #DADADA; margin-bottom: 1.5rem; }
.fsp-lesson-title h1, .fsp-lesson-title h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; text-transform: none; }
.fsp-lesson-title .fsp-badge { flex: 0 0 auto; }

/* check-karten mit orangem haken (zusammenfassung 1.6) */
.fsp-check-card { display: flex; gap: 1.25rem; align-items: flex-start; background: #F4F4F4; border: 1px solid #DADADA; border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.fsp-check-card__icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: #EA5614; color: #fff; display: flex; align-items: center; justify-content: center; }
.fsp-check-card__icon svg { width: 28px; height: 28px; }
.fsp-check-card h3, .fsp-check-card h4 { margin: 0 0 .25rem; font-size: 1.1rem; }
.fsp-check-card p { margin: 0; color: #5F6368; }

/* nummerierte rollen-karten (1.4) */
.fsp-number-card { display: flex; gap: 1.5rem; align-items: flex-start; background: #F4F4F4; border: 1px solid #DADADA; border-radius: 14px; padding: 1.5rem; margin-bottom: 1rem; }
.fsp-number-card__num { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: #EA5614; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; }
.fsp-number-card h3, .fsp-number-card h4 { margin: 0 0 .35rem; color: #EA5614; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; }
.fsp-number-card p { margin: 0; }

/* arbeitsplatz-check (1.3) */
.fsp-check-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: #F4F4F4; border: 1px solid #DADADA; border-radius: 14px; padding: 1rem 1.5rem; margin-bottom: .85rem; }
.fsp-check-row__q { font-weight: 700; margin: 0; }
.fsp-check-row__actions { display: flex; gap: .75rem; }
.fsp-check-btn { border: 2px solid; border-radius: 4px; background: #fff; padding: .5rem 1.25rem; font: inherit; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease; }
.fsp-check-btn--ok { color: #2E8B57; border-color: #2E8B57; }
.fsp-check-btn--ok.is-active, .fsp-check-btn--ok:hover { background: #2E8B57; color: #fff; }
.fsp-check-btn--todo { color: #EA5614; border-color: #EA5614; }
.fsp-check-btn--todo.is-active, .fsp-check-btn--todo:hover { background: #EA5614; color: #fff; }

/* ---- 7. dashboard (teilnehmer) ---- */
.tutor-dashboard .tutor-dashboard-left-menu { background: #0B1219; border-radius: 14px; overflow: hidden; }
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link { color: rgba(255, 255, 255, .85); }
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link:hover { background: #EA5614; color: #fff; }
.tutor-dashboard-header { border-radius: 14px; }
.tutor-dashboard .tutor-card { border-radius: 14px; }