/* ═══════════════════════════════════════════════════════════════
   elearning-components.css
   Wiederverwendbare UI-Komponenten:
     · ESTopBar          (Mono-Crumb-Header)
     · ESBottomNav       (Editorial-Pager)
     · ESButton          (3 Varianten)
     · ESCard            (Editorial-Karte mit Section-Marker)
     · ESBubble          (Comic-Sprechblase, 4 Charakter-Varianten)
     · Modul-Master      (Skelett für Lektions-Screen)
   Lädt NACH elearning-tokens.css und elearning-base.css.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1 · ES-TOPBAR
   ───────────────────────────────────────────────────────────── */
.es-topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--es-page-pad-mobile);
  background: var(--es-paper);
  border-bottom: 1px solid var(--es-line);
  font-family: var(--es-mono);
  font-size: var(--es-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-ink-muted);
  z-index: var(--z-topbar);
}
.es-topbar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.es-topbar__brand b {
  font-family: var(--es-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--es-ink);
  text-transform: none;
  letter-spacing: 0;
}
.es-topbar__crumb {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.es-topbar__lang {
  flex-shrink: 0;
  display: none;
}

/* Mobile: Brand-Suffix verstecken, kein Lang-Trailer */
@media (max-width: 767px) {
  .es-topbar__brand span { display: none; }
}

/* Tablet+: Lang-Trailer einblenden */
@media (min-width: 768px) {
  .es-topbar {
    padding-left: var(--es-page-pad-tablet);
    padding-right: var(--es-page-pad-tablet);
  }
  .es-topbar__lang { display: inline; }
}

@media (min-width: 1024px) {
  .es-topbar {
    padding-left: var(--es-page-pad);
    padding-right: var(--es-page-pad);
  }
}


/* ─────────────────────────────────────────────────────────────
   2 · ES-BOTTOMNAV
   ───────────────────────────────────────────────────────────── */
.es-bottomnav {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--es-page-pad-mobile);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--es-paper);
  border-top: 1px solid var(--es-line);
  z-index: var(--z-bottomnav);
}
.es-bottomnav__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.es-bottomnav__page {
  font-family: var(--es-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--es-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) {
  .es-bottomnav {
    padding-left: var(--es-page-pad-tablet);
    padding-right: var(--es-page-pad-tablet);
  }
  .es-bottomnav__page { font-size: 18px; }
}
@media (min-width: 1024px) {
  .es-bottomnav {
    padding-left: var(--es-page-pad);
    padding-right: var(--es-page-pad);
    padding-top: 18px;
    padding-bottom: 18px;
  }
}


/* ─────────────────────────────────────────────────────────────
   3 · ES-BUTTON · 3 Varianten
   ───────────────────────────────────────────────────────────── */
.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--es-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 180ms var(--es-ease),
              color      180ms var(--es-ease),
              border-color 180ms var(--es-ease);
  white-space: nowrap;
  text-decoration: none;
}
.es-btn:focus-visible {
  outline: 2px solid var(--es-blue);
  outline-offset: 2px;
}
.es-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.es-btn--primary {
  background: var(--es-blue);
  color: white;
  border-color: var(--es-blue);
}
.es-btn--primary:hover {
  background: var(--es-blue-deep);
  border-color: var(--es-blue-deep);
}

.es-btn--secondary {
  background: white;
  color: var(--es-ink);
  border-color: var(--es-ink);
}
.es-btn--secondary:hover {
  background: var(--es-ink);
  color: white;
}

.es-btn--ghost {
  background: transparent;
  color: var(--es-ink-muted);
  border-color: var(--es-line);
}
.es-btn--ghost:hover {
  color: var(--es-ink);
  border-color: var(--es-ink);
}

@media (min-width: 768px) {
  .es-btn { padding: 14px 24px; font-size: 13px; }
}


/* ─────────────────────────────────────────────────────────────
   4 · ES-CARD · Editorial-Karte
   ───────────────────────────────────────────────────────────── */
.es-card {
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  padding: 24px 20px;
}
.es-card > * + * { margin-top: 14px; }

.es-card__title {
  font-family: var(--es-serif);
  font-size: var(--es-h3);
  color: var(--es-ink);
  line-height: 1.2;
}

.es-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  counter-reset: es-list;
}
.es-card__list li {
  display: flex;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--es-line);
  font-size: var(--es-body-l);
  line-height: 1.5;
  color: var(--es-ink-light);
}
.es-card__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.es-card__list li::before {
  counter-increment: es-list;
  content: counter(es-list, decimal-leading-zero);
  font-family: var(--es-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--es-blue);
  flex-shrink: 0;
  padding-top: 4px;
  min-width: 22px;
}

@media (min-width: 768px) {
  .es-card { padding: 32px 28px; }
}


/* ─────────────────────────────────────────────────────────────
   5 · ES-BUBBLE · Comic-Konversation
   ───────────────────────────────────────────────────────────── */
.es-bubbles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
}

.es-bubble {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 100%;
}

.es-bubble__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--es-radius-avatar);
  background-color: var(--c-hero-bubble);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-soft);
}

.es-bubble__body {
  background: var(--c-hero-bubble);
  padding: 12px 16px;
  border-radius: var(--es-radius-bubble);
  flex: 1;
  min-width: 0;
  box-shadow: var(--shadow-bubble);
}

.es-bubble__name {
  font-family: var(--es-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--c-hero);
  margin-bottom: 4px;
  display: block;
  letter-spacing: -0.005em;
}

.es-bubble__text {
  font-family: var(--es-sans);
  font-size: var(--es-body);
  line-height: 1.6;
  color: var(--es-ink-light);
}
/* part2-square-bubbles */
.es-bubble__avatar { border-radius: 0; border: none; box-shadow: none; }
.es-bubble__body { border-radius: 0; }

/* ── Charakter-Varianten ─────────────────────────────────── */
.es-bubble--hero      .es-bubble__body,
.es-bubble--hero      .es-bubble__avatar { background-color: var(--c-hero-bubble); }
.es-bubble--hero      .es-bubble__name   { color: var(--c-hero); }
.es-bubble--hero      .es-bubble__avatar { background-image: var(--avatar-secura); }

.es-bubble--sidekick  .es-bubble__body,
.es-bubble--sidekick  .es-bubble__avatar { background-color: var(--c-sidekick-bubble); }
.es-bubble--sidekick  .es-bubble__name   { color: var(--c-sidekick); }
.es-bubble--sidekick  .es-bubble__avatar { background-image: var(--avatar-pepbee); }

.es-bubble--victim    .es-bubble__body,
.es-bubble--victim    .es-bubble__avatar { background-color: var(--c-victim-bubble); }
.es-bubble--victim    .es-bubble__name   { color: var(--c-victim); }
.es-bubble--victim    .es-bubble__avatar { background-image: var(--avatar-stefan); }

.es-bubble--villain   .es-bubble__body,
.es-bubble--villain   .es-bubble__avatar { background-color: var(--c-villain-bubble); }
.es-bubble--villain   .es-bubble__name   { color: var(--c-villain); }
.es-bubble--villain   .es-bubble__avatar { background-image: var(--avatar-lowkey); }

/* ── Alternierung Tablet+ ────────────────────────────────── *
 * Mobile: alle Bubbles voll-breit, Avatar links               *
 * Tablet+: Hero/Victim links, Sidekick/Villain rechts         */
@media (min-width: 768px) {
  .es-bubble {
    max-width: 80%;
  }
  .es-bubble--right {
    flex-direction: row-reverse;
    margin-left: auto;
  }
  .es-bubble--left {
    margin-right: auto;
  }
}

/* ── Narrator · vollbreite Editorial-Zeile ────────────────── */
.es-bubble--narrator {
  background: linear-gradient(135deg, var(--c-narrator-bg-a) 0%, var(--c-narrator-bg-b) 100%);
  padding: 16px 20px;
  font-family: var(--es-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: var(--es-ink-light);
  border-left: 3px solid var(--es-warm);
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}
.es-bubble--narrator::before {
  content: 'Narrator';
  display: block;
  font-family: var(--es-mono);
  font-style: normal;
  font-size: var(--es-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-warm);
  margin-bottom: 6px;
}


/* ─────────────────────────────────────────────────────────────
   6 · MODUL-MASTER · Skelett für Lektions-Screen
   (siehe README §5)
   ───────────────────────────────────────────────────────────── */
.es-modul {
  padding: 32px 0;
}
.es-modul__header {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.es-modul__title {
  font-family: var(--es-serif);
  font-size: var(--es-display-2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  font-weight: 500;
}
.es-modul__title em {
  font-style: italic;
  color: var(--es-blue);
  font-weight: 400;
}
.es-modul__meta {
  font-family: var(--es-mono);
  font-size: var(--es-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-ink-muted);
}
.es-modul__header .es-modul__meta {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--es-line);
  color: var(--es-ink);
}

.es-modul__body {
  display: block;
  margin-bottom: 32px;
}

/* ── Standbild + Audio-Bar ────────────────────────────────── */
.es-modul__media {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin: 32px 0;

}
.es-modul__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--es-ink);
  overflow: hidden;
  cursor: pointer;
}
/* Override legacy .synced-video-wrap padding-top hack + border-radius */
.es-modul__video-wrap.synced-video-wrap {
  padding-top: 0 !important;
  border-radius: 0 !important;
}
.es-modul__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.es-modul__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.es-modul__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.25);
  transition: background 220ms var(--es-ease);
  border: none;
  color: white;
}
.es-modul__play:hover { background: rgba(15, 23, 42, 0.35); }
.es-modul__play-icon {
  width: 64px;
  height: 64px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding-left: 4px; /* Optical-Centering des ▶ */
}

.es-modul__audio-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-top: none;
}
.es-modul__audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--es-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  border: none;
  padding-left: 2px;
}
.es-modul__audio-play:hover { background: var(--es-blue-deep); }
.es-modul__audio-progress {
  flex: 1;
  height: 4px;
  background: var(--es-line);
  position: relative;
  cursor: pointer;
}
.es-modul__audio-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--es-blue);
  transition: width 100ms linear;
}
.es-modul__audio-time {
  font-family: var(--es-mono);
  font-size: var(--es-mono-s);
  letter-spacing: 0.06em;
  color: var(--es-ink-muted);
  flex-shrink: 0;
  min-width: 84px;
  text-align: right;
}

/* ── Lead (Intro-Text im Header) ─────────────────────────── */
.es-modul__lead {
  font-family: var(--es-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--es-ink-light);
  font-style: italic;
  margin-top: 16px;
  max-width: 720px;
}

/* ── Section Headings + Text (multi-section intro pages) ─── */
.es-modul__section-heading {
  font-family: var(--es-serif);
  font-size: 1.35rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--es-ink);
  margin-top: 28px;
  margin-bottom: 8px;
}

.es-modul__section-text {
  font-family: var(--es-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--es-ink);
  margin-top: 0;
  margin-bottom: 12px;
  max-width: 38em;
}

@media (min-width: 768px) {
  .es-modul__section-heading { font-size: 1.5rem; margin-top: 32px; }
  .es-modul__section-text { font-size: 1.2rem; }
}

/* ── Konversation-Block ───────────────────────────────────── */
.es-modul__conversation {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--es-line);
}

/* Audio-Bar voll-breit und bündig */
.es-modul__audio-bar {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .es-modul__lead { font-size: 26px; margin-top: 20px; }
  .es-modul__conversation { margin-top: 64px; padding-top: 40px; }
}


/* ─────────────────────────────────────────────────────────────
   7 · ES-MODULE-NAV · Horizontal pill bar above bottom-nav
   ───────────────────────────────────────────────────────────── */
.es-module-nav {
  position: fixed;
  top: 0;
  bottom: auto;
  left: 0; right: 0;
  z-index: 1001;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  padding: 12px var(--es-page-pad-mobile);
  background: var(--es-paper);
  border-bottom: 1px solid var(--es-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-family: var(--es-mono);
  font-size: var(--es-mono-s);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.es-module-nav::-webkit-scrollbar { display: none; }
.es-module-nav__item {
  flex-shrink: 0;
  color: var(--es-ink-muted);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
}
.es-module-nav__item i { font-size: 11px; }
.es-module-nav__item:hover:not(.es-module-nav__item--locked) { color: var(--es-ink); }
.es-module-nav__item--done   { color: var(--es-green); }
.es-module-nav__item--active { color: var(--es-blue); font-weight: 700; }
.es-module-nav__item--active::before { content: '▎'; margin-right: 6px; }
.es-module-nav__item--locked { color: var(--es-line); cursor: not-allowed; }

@media (min-width: 768px) {
  .es-module-nav { padding-left: var(--es-page-pad-tablet); padding-right: var(--es-page-pad-tablet); }
}
@media (min-width: 1024px) {
  .es-module-nav { padding-left: var(--es-page-pad); padding-right: var(--es-page-pad); }
}