/* LMSHELP-21144 */
@media (max-width: 767px) {
  #main-content.container {
    max-width: 767px;
 	margin: 0;
  }
}

li.ef-courses-list-item[data-status="passed"]
{
  background-color:#DBF5B8;
}

li.ef-courses-list-item[data-status="passed"] a.ef-unit-link.passed
{
  color:#000000 !important;
}

/* ANFANG Lio Team Demo Abschnitt Mai 2026 */

/* =========================================================
   0. DESIGN TOKENS
   Globale Werte zentral ändern.
   ========================================================= */

body {
  /* Fokus */
  --ui-focus-ring: 3px solid #1f6feb;
  --ui-focus-offset: 3px;

  /* Layout */
  --ui-page-max-width: 1200px;
  --ui-course-page-max-width: 1100px;
  --ui-page-padding-x: 16px;
  --secondary-nav-height: 0px;

  /* Radien */
  --ui-radius-xs: 6px;
  --ui-radius-small: 8px;
  --ui-radius-medium: 12px;
  --ui-radius-large: 14px;
  --ui-radius-round: 999px;

  /* Farben */
  --ui-color-text: #222;
  --ui-color-text-strong: #111;
  --ui-color-white: #fff;
  --ui-color-page-soft: #f5f4f3;
  --ui-color-neutral-soft: #f2f2f2;
  --ui-color-neutral-light: #f7f7f7;
  --ui-color-neutral-border: #cfcfcf;
  --ui-color-card-border: #d8d2c8;

  --ui-color-start: #f5f4f3;
  --ui-color-guided: #E4F5E8;
  --ui-color-catalog: #F3E4FF;
  --ui-color-mycourses: #E6EEFF;
  --ui-color-help: #E4F5E8;

  --ui-color-guided-border: #C9EBD1;
  --ui-color-catalog-border: #E6CCFF;
  --ui-color-mycourses-border: #CFE0FF;
  --ui-color-help-border: #C9EBD1;

  --ui-color-success: #2F9461;
  --ui-color-check: #35A66B;

  --ui-color-tile-blue: #1f6fb2;
  --ui-color-tile-purple: #7a3db5;
  --ui-color-tile-green: #2f7d32;

  /* Schatten */
  --ui-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
  --ui-shadow-nav: 0 2px 10px rgba(0,0,0,0.06);
  --ui-shadow-featured: 0 0 0 2px rgba(0,0,0,0.08), 0 8px 18px rgba(0,0,0,0.08);

  /* Abstände */
  --ui-gap-xs: 6px;
  --ui-gap-small: 8px;
  --ui-gap-medium: 10px;
  --ui-gap-large: 12px;
  --ui-gap-xl: 18px;
  --ui-gap-2xl: 24px;
  --ui-gap-3xl: 28px;

  /* Schrift-Skala */
  --font-h1: 2.2rem;
  --font-h2: 1.45rem;
  --font-tile: 1.05rem;
  --font-button-large: 1rem;
  --font-button-small: 0.9rem;
  --font-subtitle: 0.95rem;

  /* Buttons allgemein */
  --btn-font-weight: 700;
  --btn-line-height: 1.2;
  --btn-border-width: 2px;
  --btn-radius: var(--ui-radius-medium);
  --btn-radius-round: var(--ui-radius-round);

  /* Button-Typen */
  --btn-primary-bg: var(--ui-color-mycourses);
  --btn-primary-border: var(--ui-color-mycourses-border);
  --btn-primary-color: var(--ui-color-text);

  --btn-guided-bg: var(--ui-color-guided);
  --btn-guided-border: var(--ui-color-guided-border);

  --btn-catalog-bg: var(--ui-color-catalog);
  --btn-catalog-border: var(--ui-color-catalog-border);

  --btn-mycourses-bg: var(--ui-color-mycourses);
  --btn-mycourses-border: var(--ui-color-mycourses-border);

  --btn-help-bg: var(--ui-color-help);
  --btn-help-border: var(--ui-color-help-border);

  --btn-header-bg: var(--ui-color-page-soft);
  --btn-header-border: #ddd;
  --btn-header-height: 38px;
  --btn-header-padding-y: 8px;
  --btn-header-padding-x: 13px;

  --btn-course-start-bg: var(--ui-color-success);
  --btn-course-start-border: var(--ui-color-success);
  --btn-course-cancel-bg: #EAF1FF;
  --btn-course-cancel-border: var(--ui-color-mycourses-border);

  /* Icons */
  --icon-size: 2.4rem;
  --icon-entry-size: 2.5rem;
  --icon-display-secondary: none;

  /* Bilder fuer die 3 Hauptbuttons + Audio */
  --icon-guided-image: url("/files/file/503");
  --icon-catalog-image: url("/files/file/505");
  --icon-mycourses-image: url("/files/file/504");
  --icon-audio-image: url("/files/file/499");

  /* Karten / Course Vision */
  --card-bg: var(--ui-color-white);
  --card-border: 1px solid var(--ui-color-card-border);
  --card-radius: var(--ui-radius-medium);
  --card-shadow: var(--ui-shadow-soft);

  --vision-image-width: 220px;
  --vision-action-width: 190px;
  --vision-progress-width: 130px;
  --vision-hero-padding: 24px;
  --vision-card-padding: 22px;
  
  /* Course Vision Schrift / Größen */
--vision-title-size: var(--font-h1);
--vision-description-font-size: var(--font-subtitle);
--vision-heading-size: var(--font-h2);
--vision-list-font-size: var(--font-button-large);
--vision-content-font-size: var(--font-button-large);

--vision-button-height: 46px;
--vision-button-font-size: var(--font-button-large);
--vision-button-gap: 12px;

--vision-pill-font-size: var(--font-subtitle);
--vision-pill-height: 32px;

  /* Progress */
  --progress-radius: var(--ui-radius-round);
  --progress-width: 130px;

  /* Kurs-Suche */
  --ks-level-button-font-size: 1.4rem;
  --ks-topic-button-font-size: 1.05rem;
  --ks-level-button-min-height: 105px;
  --ks-topic-button-min-height: 95px;
  --ks-image-size: 0px;

  /* Breakpoints als Dokumentation; media queries brauchen feste Werte */
  --bp-mobile: 760px;
  --bp-course-stack: 900px;

  padding-top: 0 !important;
}

/* =========================================================
   1. MODE TOKENS
   Moduswerte zentral ändern. Komponenten referenzieren diese Variablen.
   ========================================================= */

body.base-mode {
  /* Schrift-Skala */
  --font-h1: 2.2rem;
  --font-h2: 1.45rem;
  --font-tile: 1.05rem;
  --font-button-large: 1rem;
  --font-button-small: 0.9rem;
  --font-subtitle: 0.95rem;

  /* Sekundäre Navigation */
  --mode-nav-button-height: 42px;
  --mode-nav-button-padding-y: 9px;
  --mode-nav-button-padding-x: 16px;
  --mode-nav-button-font-size: 1em;

  --mode-guided-button-height: var(--mode-nav-button-height);
  --mode-guided-button-font-size: var(--mode-nav-button-font-size);
  --mode-guided-button-font-weight: 700;

  --btn-guided-bg: #E4F5E8;
  --btn-catalog-bg: #F3E4FF;
  --btn-mycourses-bg: #E6EEFF;

  --btn-guided-border: #C9EBD1;
  --btn-catalog-border: #E6CCFF;
  --btn-mycourses-border: #CFE0FF;

  /* Startseite */
  --mode-entry-grid-columns: repeat(3, 1fr);
  --mode-entry-tile-min-height: 12.5rem;
  --mode-entry-label-font-size: 1.15rem;
  --mode-entry-main-label-font-size: var(--mode-entry-label-font-size);
  --mode-entry-main-shadow: none;

  /* Kurskarten */
  --mode-course-card-font-size: 1em;

  /* Icons */
  --icon-size: 0rem;
  --icon-display-secondary: none;

  /* Kurs-Suche */
  --ks-level-button-font-size: 1.4rem;
  --ks-topic-button-font-size: 1.05rem;
  --ks-level-button-min-height: 105px;
  --ks-topic-button-min-height: 95px;
  --ks-image-size: 0px;
}

body.support-mode {
  /* Schrift-Skala */
  --font-h1: 2.7rem;
  --font-h2: 1.75rem;
  --font-tile: 1.22rem;
  --font-button-large: 1.18rem;
  --font-button-small: 1rem;
  --font-subtitle: 1.08rem;

  /* Sekundäre Navigation */
  --mode-nav-button-height: 80px;
  --mode-nav-button-padding-y: 11px;
  --mode-nav-button-padding-x: 22px;
  --mode-nav-button-font-size: 1.25em;

  --mode-guided-button-height: var(--mode-nav-button-height);
  --mode-guided-button-font-size: var(--mode-nav-button-font-size);
  --mode-guided-button-font-weight: 800;

  --btn-guided-bg: #C9EBD1;
  --btn-catalog-bg: #E6CCFF;
  --btn-mycourses-bg: #CFE0FF;

  --btn-guided-border: #2F8F5C;
  --btn-catalog-border: #9B51E0;
  --btn-mycourses-border: #3A7BD5;

  --btn-border-width: 3px;

  /* Startseite */
  --mode-entry-grid-columns: 2fr 1fr 1fr;
  --mode-entry-tile-min-height: 16.25rem;
  --mode-entry-label-font-size: 1.35rem;
  --mode-entry-main-label-font-size: 1.7rem;
  --mode-entry-main-shadow: var(--ui-shadow-featured);

  /* Kurskarten */
  --mode-course-card-font-size: 1.08em;

  /* Icons */
  --icon-size: 2.8rem;
  --icon-display-secondary: inline-block;

  /* Kurs-Suche */
  --ks-level-button-font-size: 1.7rem;
  --ks-topic-button-font-size: 1.3rem;
  --ks-level-button-min-height: 130px;
  --ks-topic-button-min-height: 115px;
  --ks-image-size: 54px;

/* Course Vision im Unterstützungsmodus */
--vision-button-height: 64px;
--vision-button-font-size: var(--font-button-large);
--vision-button-gap: 18px;

--vision-pill-font-size: var(--font-button-small);
--vision-pill-height: 42px;
  --vision-image-width: 250px;
  --vision-action-width: 210px;
  --vision-progress-width: 150px;
  --vision-hero-padding: 28px;
  --vision-card-padding: 26px;
}

/* =========================================================
   2. UTILITIES / EFRONT SAFETY
   ========================================================= */

#ef-navbar {
  width: 100%;
  position: relative !important;
  top: auto !important;
  z-index: 1000;
}

body.user-view .breadcrumb-x {
  display: none !important;
}

body.user-view .ef-category-name {
  display: none !important;
}

.ef-vision-original-hidden {
  display: none !important;
}

/* =========================================================
   3. BASE COMPONENTS / FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
#mode-toggle:focus + .mode-switch__track {
  outline: var(--ui-focus-ring);
  outline-offset: var(--ui-focus-offset);
}

/* =========================================================
   4. HEADER
   ========================================================= */

ul.mycourses-catalog-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-medium);
  flex-wrap: wrap;
  width: 100%;
}

ul.mycourses-catalog-links li {
  list-style: none;
}

body.user-view ul.mycourses-catalog-links a.catalog,
body.user-view ul.mycourses-catalog-links a.mycourses,
body.user-view ul.mycourses-catalog-links a.help,
body.user-view ul.mycourses-catalog-links a[href="17/hilfe/1"],
body.user-view ul.mycourses-catalog-links a[href="/17/hilfe/1"] {
  display: none !important;
}

.ef-header-extra-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-header-height);
  padding: var(--btn-header-padding-y) var(--btn-header-padding-x);
  border-radius: var(--btn-radius-round);
  text-decoration: none !important;
  font-weight: var(--btn-font-weight);
  color: var(--ui-color-text) !important;
  border: var(--btn-border-width) solid var(--btn-header-border);
  background: var(--btn-header-bg);
  gap: var(--ui-gap-xs);
}

.ef-header-audio {
  border-color: var(--btn-help-border);
  background: var(--btn-help-bg);
}

body.base-mode .ef-header-audio-item {
  display: none !important;
}

/* =========================================================
   5. MODE SWITCH
   ========================================================= */

.mode-switch-item {
  display: inline-flex;
  align-items: center;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.95em;
  border: 1px solid var(--ui-color-neutral-border);
  border-radius: var(--ui-radius-round);
  background: var(--ui-color-neutral-soft);
  color: var(--ui-color-text);
  font-size: 1em;
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  cursor: pointer;
  white-space: nowrap;
  min-height: 2.75em;
}

.mode-switch__track-wrap {
  position: relative;
  display: inline-flex;
  width: 3.1em;
  height: 1.75em;
}

.mode-switch__track-wrap input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.mode-switch__track {
  display: block;
  width: 3.1em;
  height: 1.75em;
  border-radius: var(--ui-radius-round);
  background: #9e9e9e;
  position: relative;
}

.mode-switch__track:before {
  content: "";
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--ui-color-white);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}

body.support-mode .mode-switch__track {
  background: var(--ui-color-tile-green);
}

body.support-mode #mode-toggle:checked + .mode-switch__track:before {
  transform: translateX(1.35em);
}

body.base-mode .mode-switch__track {
  background: #9e9e9e;
}

/* =========================================================
   6. NAVIGATION
   ========================================================= */

.ef-secondary-nav-slot {
  width: 100%;
  min-height: var(--secondary-nav-height);
  background: var(--ui-color-page-soft);
}

.ef-secondary-nav-bar {
  width: 100%;
  position: relative;
  z-index: 940;
  background: var(--ui-color-page-soft);
}

.ef-secondary-nav-bar__inner {
  width: 100%;
  max-width: var(--ui-page-max-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 7px 12px;
}

body.user-view:not(.lesson-mode) .ef-secondary-nav-bar.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 950;
  box-shadow: var(--ui-shadow-nav);
}

body.user-view.lesson-mode .ef-secondary-nav-bar {
  position: relative !important;
  box-shadow: none !important;
}

.ef-secondary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-medium);
}

.ef-secondary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mode-nav-button-height);
  padding: var(--mode-nav-button-padding-y) var(--mode-nav-button-padding-x);
  border-radius: var(--btn-radius);
  text-decoration: none !important;
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  border: var(--btn-border-width) solid transparent;
  color: var(--ui-color-text) !important;
  white-space: nowrap;
  gap: 7px;
  box-sizing: border-box;
  font-size: var(--mode-nav-button-font-size);
}

.secondary-nav__item--guided {
  background: var(--btn-guided-bg);
  min-height: var(--mode-guided-button-height);
  font-size: var(--mode-guided-button-font-size);
  font-weight: var(--mode-guided-button-font-weight);
}

.secondary-nav__item--catalog {
  background: var(--btn-catalog-bg);
}

.secondary-nav__item--mycourses {
  background: var(--btn-mycourses-bg);
}

.secondary-nav__item--guided.is-active {
  border-color: var(--btn-guided-border);
}

.secondary-nav__item--catalog.is-active {
  border-color: var(--btn-catalog-border);
}

.secondary-nav__item--mycourses.is-active {
  border-color: var(--btn-mycourses-border);
}

/* =========================================================
   7. ICONS / BILDER
   Nur im Unterstützungsmodus sichtbar.
   Bilder zentral oben in den Tokens ändern.
   ========================================================= */

.secondary-nav__icon {
  display: var(--icon-display-secondary);
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body.base-mode .secondary-nav__icon {
  display: none !important;
}

body.support-mode .secondary-nav__icon {
  display: inline-block;
}

.secondary-nav--icons-disabled .secondary-nav__icon {
  display: none !important;
}

/* Kurs-Suche / Geführter Start */
.secondary-nav__icon--guided {
  background-image: var(--icon-guided-image);
}

/* Kurs-Katalog */
.secondary-nav__icon--catalog {
  background-image: var(--icon-catalog-image);
}

/* Meine Kurse */
.secondary-nav__icon--mycourses {
  background-image: var(--icon-mycourses-image);
}
/* =========================================================
   8. START PAGE / CUSTOM PAGE
   ========================================================= */

.efront-entry-wrapper {
  width: 100%;
  max-width: var(--ui-page-max-width);
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.efront-entry-grid {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: var(--mode-entry-grid-columns);
}

.entry-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--mode-entry-tile-min-height);
  padding: 1.5rem;
  border-radius: var(--ui-radius-large);
  text-decoration: none !important;
  color: var(--ui-color-white) !important;
  border: var(--btn-border-width) solid transparent;
  box-sizing: border-box;
}

.entry-tile__icon {
  width: var(--icon-entry-size);
  height: var(--icon-entry-size);
  margin-bottom: 1.125rem;
}

.entry-tile__label {
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  color: var(--ui-color-white);
  font-size: var(--mode-entry-label-font-size);
}

.tile-main {
  box-shadow: var(--mode-entry-main-shadow);
}

.tile-main .entry-tile__label {
  font-size: var(--mode-entry-main-label-font-size);
}

.tile-meine-kurse {
  background: var(--ui-color-tile-blue);
}

.tile-alle-kurse {
  background: var(--ui-color-tile-purple);
}

.tile-kurs-suchen {
  background: var(--ui-color-tile-green);
}

/* Bilder in Kurs-Suche-Buttons */
.ks-topic-button__image {
  display: none;
  width: var(--ks-topic-image-size, 3rem);
  height: var(--ks-topic-image-size, 3rem);
  object-fit: contain;
  margin-bottom: 0.5rem;
}

body.support-mode .ks-topic-button__image {
  display: block;
}

body.base-mode .ks-topic-button__image {
  display: none !important;
}


/* =========================================================
   9. KATEGORIE-KACHELN
   ========================================================= */

body {
  --category-tile-size: 170px;
  --category-tile-font-size: 0.95rem;
}

body.support-mode {
  --category-tile-size: 200px;
  --category-tile-font-size: 1.08rem;
}

/* Kachel quadratisch */
body.user-view li.ef-card.ef-catalog-entry.ef-category {
  width: var(--category-tile-size) !important;
  height: var(--category-tile-size) !important;

  margin: 0 10px 18px 10px !important;
  overflow: hidden !important;
}

/* innerer Rahmen */
body.user-view li.ef-card.ef-catalog-entry.ef-category .ef-card-wrap {
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  border: 1px solid #d0d0d0 !important;
  border-radius: 6px !important;

  overflow: hidden !important;
  background: #fff !important;
}

/* Farbstreifen weg */
body.user-view li.ef-card.ef-catalog-entry.ef-category .ef-color-header {
  display: none !important;
}

/* Bildbereich */
body.user-view li.ef-card.ef-catalog-entry.ef-category .thumbnail {
  flex: 0 0 80% !important;
  height: 80% !important;

  overflow: hidden !important;
  background: #fff !important;
}

/* DAS ist entscheidend:
   Das Bild sitzt als background-image auf dem IMG */
body.user-view li.ef-card.ef-catalog-entry.ef-category .thumbnail img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Text unten */
body.user-view li.ef-card.ef-catalog-entry.ef-category .caption {
  flex: 0 0 20% !important;
  height: 20% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px !important;

  background: #fff !important;
  text-align: center !important;
}

/* Titel */
body.user-view li.ef-card.ef-catalog-entry.ef-category .caption h3 {
  margin: 0 !important;

  font-size: var(--category-tile-font-size) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;

  color: #111 !important;
}

/* Tags weg */
body.user-view li.ef-card.ef-catalog-entry.ef-category .ef-tags,
body.user-view li.ef-card.ef-catalog-entry.ef-category .ef-plain {
  display: none !important;
}

/* Hover */
body.user-view li.ef-card.ef-catalog-entry.ef-category:hover .ef-card-wrap {
  border-color: #9B51E0 !important;
}

/* Caption wieder sichtbar unten */
body.user-view li.ef-card.ef-catalog-entry.ef-category .caption {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  flex: 0 0 20% !important;
  height: 20% !important;
  min-height: 20% !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 4px 6px !important;
  margin: 0 !important;

  background: #fff !important;
  color: #111 !important;

  position: relative !important;
  z-index: 3 !important;

  overflow: hidden !important;
}

/* Titel sichtbar */
body.user-view li.ef-card.ef-catalog-entry.ef-category .caption h3,
body.user-view li.ef-card.ef-catalog-entry.ef-category .caption .ef-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: var(--category-tile-font-size) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;

  color: #111 !important;
  text-align: center !important;
}

/* Rahmen nicht abschneiden */
body.user-view li.ef-card.ef-catalog-entry.ef-category {
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.user-view li.ef-card.ef-catalog-entry.ef-category .ef-card-wrap {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 2px solid #d0d0d0 !important;
}

/* Hover lila, ohne Schatten */
body.user-view li.ef-card.ef-catalog-entry.ef-category:hover .ef-card-wrap {
  border-color: #9B51E0 !important;
  box-shadow: none !important;
}

/* Das Auswählen-Overlay nur über dem Bildbereich, nicht über der Schrift */
body.user-view li.ef-card.ef-catalog-entry.ef-category .default-action {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 20% !important;
  height: 80% !important;
}


/* =========================================================
   KATEGORIEN AUSBLENDEN WENN SUCHE AKTIV
   ========================================================= */

body.search-is-active.category-page .categoryDiv.ef-view-mode.ef-view-grid {
  display: none !important;
}

body:not(.search-is-active) .categoryDiv.ef-view-mode.ef-view-grid {
  display: block !important;
}

/* =========================================================
   10. COURSE DETAIL / VISION LAYOUT
   ========================================================= */

.ef-vision-course-page {
  max-width: var(--ui-course-page-max-width);
  margin: 24px auto;
  padding: 0 var(--ui-page-padding-x);
}

.ef-vision-course-hero,
.ef-vision-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.ef-vision-course-hero {
  display: grid;
  grid-template-columns: var(--vision-image-width) 1fr var(--vision-action-width);
  gap: var(--ui-gap-3xl);
  align-items: center;
  padding: var(--vision-hero-padding);
  margin-bottom: var(--ui-gap-xl);
}

.ef-vision-image .default-course-image-container,
.ef-vision-image img {
  width: 100%;
  max-width: var(--vision-image-width);
  border-radius: var(--ui-radius-small);
  overflow: hidden;
}

.ef-vision-main .ef-course-name {
  font-size: var(--vision-title-size);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ui-color-text-strong);
}

.ef-vision-main .ef-course-description {
  font-size: var(--vision-description-font-size);
  line-height: 1.55;
  margin-bottom: var(--ui-gap-xl);
}

.ef-vision-meta {
  display: flex;
  gap: var(--ui-gap-medium);
  flex-wrap: wrap;
  margin: 14px 0;
}

.ef-vision-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--vision-pill-height);
  font-size: var(--vision-pill-font-size);
  padding: 5px 10px;
  border: 1px solid var(--ui-color-neutral-border);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-color-neutral-light);
}

.ef-vision-progress {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-large);
  margin-top: var(--ui-gap-large);
}

.ef-vision-progress .progress {
  width: var(--progress-width);
  margin: 0;
  border-radius: var(--progress-radius);
  overflow: hidden;
}

.ef-vision-actions,
.ef-vision-actions-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vision-button-gap);
}

.ef-vision-actions .btn,
.ef-vision-actions-inner .btn {
  border-radius: var(--ui-radius-small) !important;
  white-space: normal;
  font-weight: var(--btn-font-weight);
}

.ef-vision-actions-inner .btn {
  min-height: var(--vision-button-height);
  font-size: var(--vision-button-font-size);
}

.ef-vision-actions .btn-success {
  background: var(--btn-course-start-bg) !important;
  border-color: var(--btn-course-start-border) !important;
}

.ef-vision-actions .btn-danger {
  background: var(--btn-course-cancel-bg) !important;
  border-color: var(--btn-course-cancel-border) !important;
  color: var(--ui-color-text) !important;
}

.ef-vision-lower {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--ui-gap-xl);
}

.ef-vision-card {
  padding: var(--vision-card-padding);
}

.ef-vision-card-title,
.ef-vision-content .course-content-heading {
  color: var(--ui-color-catalog-border);
  font-size: var(--vision-heading-size);
  font-weight: 800;
  margin: 0 0 var(--ui-gap-xl);
}

.ef-vision-learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ef-vision-learn-list li {
  position: relative;
  padding-left: 38px;
  margin-bottom: var(--ui-gap-xl);
  line-height: 1.4;
}

.ef-vision-learn-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -2px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ui-color-check);
  border-radius: 50%;
  color: var(--ui-color-check);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.ef-vision-content .ef-dashboard-content {
  width: 100%;
}

.ef-vision-content .ef-dashboard-content .row {
  margin-left: 0;
  margin-right: 0;
}

.ef-vision-content .ef-dashboard-content a,
.ef-vision-content .ef-dashboard-content .list-group-item,
.ef-vision-content .ef-dashboard-content li {
  border-radius: var(--ui-radius-xs);
  font-size: var(--vision-list-font-size);
}

.ef-vision-more-button {
  margin-left: 8px;
  padding: 3px 10px;
  border: 0;
  border-radius: var(--ui-radius-xs);
  background: #eeeeee;
  color: #333;
  font-size: 0.85rem;
  cursor: pointer;
}

.ef-vision-description-full {
  display: inline;
}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 760px) {
  .ef-secondary-nav {
    flex-wrap: wrap;
  }

  body.support-mode,
  body.base-mode {
    --mode-entry-grid-columns: 1fr;
    --mode-entry-tile-min-height: 11.25rem;
  }
}

@media (max-width: 900px) {
  .ef-vision-course-hero {
    grid-template-columns: 1fr;
  }

  .ef-vision-actions {
    max-width: 320px;
  }

  .ef-vision-lower {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AUDIO ICON IMAGE
   ========================================================= */

.ef-header-audio-image {
  display: inline-block;
  width: 22px;
  height: 22px;

  background-image: var(--icon-audio-image);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  vertical-align: middle;
}

/* ENDE Lio Team Demo Abschnitt Mai 2026 */

/* DO NOT ADD/EDIT AFTER THIS LINE */
.mycourses-catalog-links li a {
  font-weight: bold;
}
#course-unenroll .modal-body{
 display: none; 
}