/*
 * TFM Academy of Teachings — Styling
 * /wp-content/themes/blocksy-child/css/tfm-academy.css
 *
 * Geladen auf: Bibliotheks-Seite, Grimoire-Archiv, Kapitel-Single
 * (via php/tfm-academy.php)
 *
 * Akzentfarbe der Academy: Grün (#5ab87a). Hauptfarbe bleibt Lila.
 *
 * ── STRUKTUR ──────────────────────────────────────────────────
 *  1. Academy-Variablen (grüne Akzente)
 *  2. Bibliothek — Regale (.tfm-lib-shelf …)      ← in Elementor gebaut
 *  3. Bibliothek — Bücher (.tfm-lib-book …)       ← in Elementor gebaut
 *  4. Grimoire   — Zwei-Seiten-Layout             ← Elementor + Shortcode
 *  5. Grimoire   — Kapitel-Liste (Shortcode)
 *  6. Grimoire   — rechte Seite (Content-Bereich, Elementor)
 *  7. Bibliothek — Gemischter Block: Classes + Books
 *                  (.tfm-lib-block …)              ← in Elementor gebaut
 *  8. Syllabus   — Modul-Liste (Shortcode, Pendant zu Grimoire)
 *  9. Bibliothek — Hero-Bereich (Textstile)         ← in Elementor gebaut
 * 10. Atmosphäre — Tageszeit-Hintergrund + atmender Schein + Sterne
 *                  (per JS injiziert, siehe tfm-academy.js)
 * 11. Regal-Kerzen — kleine flackernde Kerze am Regalrand
 *
 * HINWEIS zu Bibliothek-Klassen:
 *   Diese Klassen werden per Hand an Elementor-Container/Widgets vergeben.
 *   Das CSS ist bewusst tolerant gebaut, damit es mit Elementors
 *   eigener Struktur (.e-con, .elementor-widget …) zusammenarbeitet.
 *
 * HINWEIS zu Classes vs. Books:
 *   Classes sind bewusst als "Kurs-Karte" (horizontales Format) gestaltet,
 *   nicht als stehender Buchrücken — sie sollen sich klar als anderes
 *   Lernformat lesen lassen (linear, modul-basiert), während Books als
 *   Nachschlagewerk (nicht-linear) über die klassische Buchrücken-Optik
 *   erkennbar bleiben. Classes stehen im gemischten Block IMMER vor den
 *   Books (siehe Sektion 7) — nie dazwischen vermischt.
 */

/* ============================================================
   1. ACADEMY-VARIABLEN
   ============================================================ */

:root {
  --academy-accent:       #5ab87a;
  --academy-accent-soft:  #a5e8b8;
  --academy-accent-deep:  #3a8659;
  --academy-accent-glow:  rgba(90, 184, 122, 0.35);
  --academy-accent-dim:   rgba(90, 184, 122, 0.15);
  --academy-shelf-wood:   rgba(70, 45, 25, 0.65);
  --academy-shelf-wood-d: rgba(50, 30, 15, 0.85);
}

/* ============================================================
   2. BIBLIOTHEK — REGALE
   Klasse an einen Elementor-Container vergeben, der eine Reihe
   von Büchern enthält. Der Container selbst wird zum "Regal".
   ============================================================ */

/* Regal-Wrapper (optional, umschließt Label + Regalbrett) */
.tfm-lib-shelf-wrap {
  margin-bottom: 3.5rem;
}

/* Regal-Beschriftung (Elementor Heading-Widget)
   WICHTIG: Die Klasse landet in Elementor auf dem äußeren
   .elementor-element Wrapper, der eigentliche Text steckt aber
   verschachtelt in einem <h2>/<p>. Elementor setzt dort eigene
   Schriftgröße/Farbe direkt am Element — das gewinnt immer gegen
   vererbte Werte vom Elternteil. Daher zusätzlich der Wildcard-
   Selektor " *", der alle Kind-Elemente direkt mit anspricht. */
.tfm-lib-shelf-name,
.tfm-lib-shelf-name * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  color: var(--academy-accent-soft) !important;
  letter-spacing: 0.02em !important;
}

/* Regal-Zusatzinfo (z.B. "6 Volumes") — Elementor Text-Widget */
.tfm-lib-shelf-count,
.tfm-lib-shelf-count * {
  font-size: 0.66rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(154, 143, 187, 0.55) !important;
}

/* Das eigentliche Regalbrett — Container der die Bücher hält.
   display:flex sorgt für die horizontale Bücher-Reihe.
   Elementor-Container sind meist schon flex — diese Regeln
   ergänzen nur Optik + horizontales Scrollen. */
.tfm-lib-shelf {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.4rem !important;
  align-items: flex-end !important;
  padding: 1.5rem 1.6rem 1.2rem !important;
  border-radius: 6px;
  background:
    linear-gradient(to bottom,
      rgba(20, 15, 30, 0.35) 0%,
      rgba(15, 10, 25, 0.6) 88%,
      var(--academy-shelf-wood) 88%,
      var(--academy-shelf-wood-d) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0, 0, 0, 0.4),
    0 6px 18px rgba(0, 0, 0, 0.35);
  overflow-x: auto;
}
.tfm-lib-shelf::-webkit-scrollbar { height: 6px; }
.tfm-lib-shelf::-webkit-scrollbar-track { background: transparent; }
.tfm-lib-shelf::-webkit-scrollbar-thumb {
  background: var(--academy-accent-glow);
  border-radius: 3px;
}

/* ============================================================
   3. BIBLIOTHEK — BÜCHER (Variante A: Titel auf dem Cover)
   Klasse an einen verlinkten Elementor-Container / Image-Box.
   Cover-Bild als Hintergrund oder als <img> im Container.
   ============================================================ */

.tfm-lib-book {
  flex: 0 0 auto !important;
  width: 130px !important;
  height: 195px !important;
  position: relative !important;
  border-radius: 3px 6px 6px 3px !important;
  overflow: hidden !important;
  cursor: pointer;
  text-decoration: none !important;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s;
  box-shadow:
    inset -2px 0 4px rgba(0, 0, 0, 0.45),
    inset 4px 0 6px rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Innerer Zierrahmen */
.tfm-lib-book::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px; right: 3px; bottom: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* Abdunkelung unten für Titel-Lesbarkeit */
.tfm-lib-book::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(5, 3, 15, 0.9) 0%,
    rgba(5, 3, 15, 0.4) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.tfm-lib-book:hover {
  transform: translateY(-16px) rotate(-1deg);
  box-shadow:
    inset -2px 0 4px rgba(0, 0, 0, 0.45),
    inset 4px 0 6px rgba(255, 255, 255, 0.06),
    0 20px 32px rgba(0, 0, 0, 0.6),
    0 0 20px var(--academy-accent-glow);
}

/* Cover-Bild — falls als <img> im Container statt als Background */
.tfm-lib-book img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0;
}

/* Buchtitel (Elementor Heading/Text-Widget im Buch-Container)
   Positionierung bleibt am Wrapper (dort muss sie greifen).
   Typografie zusätzlich über Wildcard an das verschachtelte
   Text-Element, da Elementor dort eigene Werte setzt. */
.tfm-lib-book-title {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  margin: 0 !important;
}
.tfm-lib-book-title,
.tfm-lib-book-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #f0e8d8 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* Kategorie/Autor-Label oben auf dem Cover (optionales Widget) */
.tfm-lib-book-label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  margin: 0 !important;
}
.tfm-lib-book-label,
.tfm-lib-book-label * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.6rem !important;
  color: rgba(240, 232, 216, 0.65) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Optionaler Zier-Stern in der Cover-Mitte (rein dekorativ) */
.tfm-lib-book-ornament::after {
  content: '\2726';
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  color: rgba(240, 232, 216, 0.22);
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   4. GRIMOIRE — ZWEI-SEITEN-LAYOUT
   Der äußere Buch-Rahmen wird idealerweise in Elementor gebaut
   (Container mit Klasse .tfm-grim-book). Diese Regeln geben ihm
   die aufgeschlagene-Buch-Optik.
   ============================================================ */

.tfm-grim-book {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  position: relative;
  border-radius: 8px 12px 12px 8px;
  background:
    linear-gradient(to right,
      rgba(30, 20, 50, 0.85),
      rgba(35, 20, 55, 0.95) 48%,
      rgba(15, 8, 30, 0.95) 50%,
      rgba(35, 20, 55, 0.95) 52%,
      rgba(30, 20, 50, 0.85));
  border: 1px solid var(--academy-accent-glow);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(90, 184, 122, 0.05);
  overflow: hidden;
}

/* Buchrücken-Schatten in der Mitte */
.tfm-grim-book::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 49%; right: 49%; width: 2%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
  pointer-events: none;
}

/* Einzelne Buchseite */
.tfm-grim-page {
  padding: 2.2rem !important;
  position: relative;
}
.tfm-grim-page--left {
  border-right: 1px solid var(--academy-accent-dim);
}

/* Responsive: auf schmalen Screens Seiten untereinander */
@media (max-width: 768px) {
  .tfm-grim-book { grid-template-columns: 1fr !important; }
  .tfm-grim-book::after { display: none; }
  .tfm-grim-page--left { border-right: none; border-bottom: 1px solid var(--academy-accent-dim); }
}

/* ── Linke Seite: Buchtitel + Kapitelzahl (Shortcode tfm_grimoire_title) ── */
.tfm-grim-toc-header {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(165, 232, 184, 0.55);
  margin-bottom: 1.2rem;
}
.tfm-grim-book-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #d8f0d5;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.tfm-grim-book-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--academy-accent-soft);
  opacity: 0.65;
  margin-bottom: 1.4rem;
}
.tfm-grim-book-desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #9a8fbb;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 1.4rem;
}

/* ============================================================
   5. GRIMOIRE — KAPITEL-LISTE (Shortcode tfm_grimoire_chapters)
   ============================================================ */

.tfm-grim-chapter-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tfm-grim-chapter {
  margin: 0 !important;
  padding: 0 !important;
}

.tfm-grim-chapter__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  color: #9a8fbb;
  transition: background 0.25s, color 0.25s, border-color 0.25s, padding-left 0.2s;
}
.tfm-grim-chapter__link:hover {
  background: rgba(90, 184, 122, 0.08);
  border-color: var(--academy-accent-glow);
  color: #d8f0d5;
  padding-left: 1rem;
}

.tfm-grim-chapter__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(165, 232, 184, 0.55);
  min-width: 28px;
  flex-shrink: 0;
}

.tfm-grim-chapter__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tfm-grim-chapter__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
}

.tfm-grim-chapter__meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(154, 143, 187, 0.6);
}

.tfm-grim-empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #9a8fbb;
  padding: 1rem 0;
}

/* ============================================================
   6. GRIMOIRE — RECHTE SEITE (Content-Bereich)
   Diese Klassen kannst du in Elementor auf der rechten Buchseite
   nutzen, um Kapitel-Prosa im Grimoire-Stil zu setzen. Optional —
   je nachdem wie viel du dort in Elementor frei baust.
   ============================================================ */

.tfm-grim-content-subtitle {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--academy-accent-soft) !important;
  opacity: 0.7;
  margin-bottom: 0.5rem !important;
}

.tfm-grim-content-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  color: #d8f0d5 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.4rem !important;
}

/* Kleines Titelbild + Reading-Time direkt unter dem Titel */
.tfm-grim-content-cover {
  width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  object-fit: cover;
  float: right;
  margin: 0 0 0.8rem 1rem;
  border: 1px solid var(--academy-accent-dim);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.tfm-grim-content-meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--academy-accent-soft);
  opacity: 0.75;
  margin-bottom: 1.2rem;
}

.tfm-grim-content-body {
  font-size: 0.86rem;
  line-height: 1.85;
  color: #ddd4f0;
}
.tfm-grim-content-body em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--academy-accent-soft);
  font-size: 0.95rem;
}

/* Enter-Button (falls im Grimoire ein Link zum Kapitel gesetzt wird) */
.tfm-grim-enter-btn {
  display: inline-block;
  margin-top: 1.3rem;
  background: transparent;
  border: 1px solid var(--academy-accent-glow);
  color: var(--academy-accent-soft);
  padding: 0.55rem 1.6rem;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.tfm-grim-enter-btn:hover {
  background: rgba(90, 184, 122, 0.14);
  color: #d8f0d5;
  box-shadow: 0 0 18px var(--academy-accent-glow);
}

/* ============================================================
   7. BIBLIOTHEK — GEMISCHTER BLOCK: CLASSES + BOOKS
   Ein Elementor-Container mit Klasse .tfm-lib-block umschließt:
     - oben: .tfm-lib-courses (Grid mit .tfm-lib-course Karten)
     - unten: .tfm-lib-shelf (bestehendes Bücherregal, Sektion 3)
   Classes stehen IMMER vor den Books, nie dazwischen vermischt —
   die Reihenfolge im Elementor-Container muss entsprechend gebaut
   werden (Kurse-Container zuerst, Regal-Container danach).
   ============================================================ */

/* Äußerer Rahmen, umschließt Kurse-Grid + Regal als eine Einheit */
.tfm-lib-block {
  border: 1px solid rgba(90, 184, 122, 0.18) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(15, 10, 25, 0.3);
}

/* Kurse-Grid — oberer Bereich des Blocks */
.tfm-lib-courses {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 0.9rem !important;
  padding: 1.2rem 1.3rem !important;
}
/* Gleiches Elementor-Verhalten wie bei .tfm-lib-course: die
   eigentlichen Karten sind Kinder von .e-con-inner, nicht direkt
   von .tfm-lib-courses. Grid-Verhalten daher zusätzlich dort setzen. */
.tfm-lib-courses > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 0.9rem !important;
  width: 100% !important;
}
/* Direkte Grid-Kinder dürfen nicht über ihre Spalte hinauswachsen.
   min-width:0 verhindert das klassische Flex/Grid-Overflow-Problem,
   falls Elementor den Karten eine Mindestbreite mitgibt. */
.tfm-lib-courses > *,
.tfm-lib-courses > .e-con-inner > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Innerhalb von .tfm-lib-block braucht das Regal keine eigene
   Abrundung oben mehr (das Regal sitzt direkt unter den Kursen) */
.tfm-lib-block .tfm-lib-shelf {
  border-radius: 0;
}

/* Einzelne Kurs-Karte — bewusst horizontales Format, klar
   unterscheidbar von der stehenden Buch-Optik */
.tfm-lib-course {
  background: rgba(20, 12, 40, 0.6) !important;
  border: 1px solid rgba(90, 184, 122, 0.28) !important;
  border-radius: 8px !important;
  padding: 0.9rem 1.1rem !important;
  cursor: pointer;
  text-decoration: none !important;
  position: relative;
  transition: border-color 0.25s, transform 0.25s;
  /* Karte selbst als vertikale Flexbox: erzwingt dass die inneren
     Widgets (Kopfzeile, Titel, Beschreibung, Punkte) UNTEREINANDER
     liegen — unabhängig davon was Elementor am Container voreinstellt.
     width:auto sorgt dafür dass die Karte sich ins Grid einfügt statt
     Elementors Default width:100% zu übernehmen. */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* !!! WICHTIG !!!
   Elementor-Container haben eine ZUSÄTZLICHE innere Ebene namens
   .e-con-inner, die die eigentlichen Kind-Widgets hält. Dieser
   innere Wrapper liest seine Ausrichtung über CSS-Variablen
   (var(--display), var(--flex-direction)) die Elementor je nach
   Editor-Einstellung setzt — eine !important-Regel auf .tfm-lib-course
   selbst beeinflusst diese Variable NICHT, weil sie eine andere,
   tiefer liegende Ebene betrifft. Deshalb hier zusätzlich direkt auf
   den inneren Wrapper zielen und mit normalen (nicht variablen)
   Werten überschreiben — das gewinnt immer, unabhängig von Elementors
   --Variablen. */
.tfm-lib-course > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 0.4rem !important;
}
.tfm-lib-course::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to bottom, var(--academy-accent), rgba(90, 184, 122, 0.2));
}
.tfm-lib-course:hover {
  border-color: rgba(90, 184, 122, 0.55) !important;
  transform: translateY(-3px);
}

/* Kopfzeile der Kurs-Karte: Glyph links, Modulanzahl rechts */
.tfm-lib-course__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  margin-bottom: 0.4rem !important;
}
/* Gleiches Elementor-Verhalten: falls die Kopfzeile ein Container-
   Widget ist, sitzt die tatsächliche Row-Anordnung im inneren
   .e-con-inner, nicht am äußeren Element mit der Klasse. */
.tfm-lib-course__top > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}
.tfm-lib-course__glyph,
.tfm-lib-course__glyph * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  color: var(--academy-accent-soft) !important;
  font-size: 1rem !important;
}
.tfm-lib-course__modcount,
.tfm-lib-course__modcount * {
  font-size: 0.6rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(154, 143, 187, 0.55) !important;
}

/* Kurstitel */
.tfm-lib-course__title,
.tfm-lib-course__title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  color: #d8f0d5 !important;
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.25 !important;
}
.tfm-lib-course__title em {
  color: var(--academy-accent-soft) !important;
  font-style: italic !important;
}

/* Optionale Kurzbeschreibung */
.tfm-lib-course__desc,
.tfm-lib-course__desc * {
  font-size: 0.76rem !important;
  color: #9a8fbb !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  margin: 0 0 0.6rem 0 !important;
}

/* Fortschritts-Punkte — Anzahl der Punkte = Anzahl Module,
   .done markiert abgeschlossene Module. Wird derzeit manuell
   in Elementor gesetzt; spätere Automatisierung über User-Progress
   ist ein separates Thema und noch nicht Teil dieser Datei. */
.tfm-lib-course__progress {
  display: flex !important;
  gap: 3px;
}
.tfm-lib-course__dot {
  width: 14px; height: 3px;
  border-radius: 2px;
  background: rgba(154, 143, 187, 0.25);
}
.tfm-lib-course__dot.done {
  background: var(--academy-accent);
}

/* ============================================================
   8. SYLLABUS — MODUL-LISTE (Shortcode tfm_syllabus_modules)
   Pendant zu Sektion 5 (Grimoire-Kapitel-Liste). Fortlaufend
   nummeriert ("Module 1", "Module 2" …) statt römischer Ziffern,
   da Classes im Gegensatz zu Books linear sind.
   ============================================================ */

.tfm-syllabus-module-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tfm-syllabus-module {
  margin: 0 !important;
  padding: 0 !important;
}

.tfm-syllabus-module__link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  color: #9a8fbb;
  transition: background 0.25s, color 0.25s, border-color 0.25s, padding-left 0.2s;
}
.tfm-syllabus-module__link:hover {
  background: rgba(90, 184, 122, 0.08);
  border-color: var(--academy-accent-glow);
  color: #d8f0d5;
  padding-left: 1rem;
}

.tfm-syllabus-module__num {
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--academy-accent-soft);
  min-width: 76px;
  flex-shrink: 0;
}

.tfm-syllabus-module__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tfm-syllabus-module__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
}

.tfm-syllabus-module__meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(154, 143, 187, 0.6);
}

/* Titel-Block für die Syllabus-Archiv-Seite (Shortcode tfm_syllabus_title) */
.tfm-syllabus-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #d8f0d5;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.tfm-syllabus-count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--academy-accent-soft);
  opacity: 0.65;
  margin-bottom: 1.4rem;
}
.tfm-syllabus-desc {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #9a8fbb;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 1.4rem;
}

/* ============================================================
   9. BIBLIOTHEK — HERO-BEREICH (Textstile)
   Diese Klassen werden an Elementor Heading/Text-Widgets im
   Hero-Container der Academy-Hauptseite vergeben. Layout (Höhe,
   Zentrierung, Abstände) wird komplett über Elementor-Container-
   Einstellungen gesteuert — hier nur Typografie + Farbe.

   WICHTIG: Elementor setzt die CSS-Klasse auf den äußeren
   .elementor-element Wrapper, der eigentliche Text steckt aber
   verschachtelt (z.B. <h2 class="elementor-heading-title">).
   Elementor definiert dort eigene Schriftgröße/Farbe direkt am
   Element — das gewinnt immer gegen vererbte Werte vom Eltern-
   Wrapper, unabhängig von !important dort. Deshalb zusätzlich
   der Wildcard-Selektor " *", der alle Kind-Elemente direkt
   anspricht und so IMMER greift, egal ob Heading- oder Text-
   Editor-Widget verwendet wird.
   ============================================================ */

.tfm-ac-hero-pretitle,
.tfm-ac-hero-pretitle * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--academy-accent-soft) !important;
  text-align: left !important;
}

.tfm-ac-hero-title,
.tfm-ac-hero-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  color: #f0e8d8 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  text-align: left !important;
}
.tfm-ac-hero-title em {
  color: var(--academy-accent) !important;
  font-style: italic !important;
}

.tfm-ac-hero-subtitle,
.tfm-ac-hero-subtitle * {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  color: #9a8fbb !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

/* ============================================================
   10. ATMOSPHÄRE — Tageszeit-Hintergrund, atmender Schein, Sterne
   Die Wrapper-Elemente werden per JS (tfm-academy.js) am Anfang
   des <body> injiziert, damit in Elementor nichts gebaut werden
   muss. Alles liegt hinter dem Content (z-index negativ/0).

   Die Tageszeit wird über die vom globalen Color-Theme-JS
   gesetzte Body-Klasse gesteuert:
     .tfm-time-sunrise / (kein Suffix = day) / .tfm-time-sunset / .tfm-time-night
   Diese Academy-Datei reagiert zusätzlich mit kräftigeren
   Akzent-Glows auf genau diese Body-Klassen.
   ============================================================ */

/* Grund-Wrapper, deckt den ganzen Viewport ab, hinter allem.
   z-index: -1 sorgt dafür, dass die Atmosphäre IMMER hinter dem
   gesamten Seiteninhalt liegt, ohne dass wir alle Geschwister-
   Elemente anfassen müssen (das wäre zu invasiv für Blocksy/
   Elementor-Header etc.). pointer-events:none lässt alle Klicks
   durch. */
.tfm-ac-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Hinweis: Da .tfm-ac-atmosphere auf z-index:-1 sitzt, liegt sie
   automatisch hinter dem normalen Seiteninhalt — es ist kein
   zusätzlicher Eingriff an den Content-Wrappern nötig. Wichtig ist
   nur, dass der <body> selbst keinen eigenen Hintergrund hat, der
   die Atmosphäre verdeckt (Blocksy nutzt i.d.R. transparent). Falls
   der Seitenhintergrund die Atmosphäre verdeckt, kann in Elementor
   der Seiten-Hintergrund auf transparent gesetzt werden. */

/* ---- Tageszeit-Farbfelder (kräftig) ---- */
.tfm-ac-atmo-color {
  position: absolute;
  inset: 0;
  transition: background 1.4s ease;
  background:
    radial-gradient(ellipse 70% 55% at 18% 25%, rgba(120, 40, 220, 0.30) 0%, transparent 62%),
    radial-gradient(ellipse 65% 50% at 82% 72%, rgba(80, 30, 190, 0.28) 0%, transparent 62%);
}
/* Sunrise — warmes Rosé/Orange */
body.tfm-time-sunrise .tfm-ac-atmo-color {
  background:
    radial-gradient(ellipse 70% 55% at 20% 25%, rgba(255, 150, 90, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 82% 72%, rgba(200, 70, 140, 0.26) 0%, transparent 60%);
}
/* Sunset — warmes Rot/Magenta */
body.tfm-time-sunset .tfm-ac-atmo-color {
  background:
    radial-gradient(ellipse 70% 55% at 22% 28%, rgba(230, 110, 70, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 80% 70%, rgba(150, 50, 170, 0.28) 0%, transparent 60%);
}
/* Night — tiefes Blau/Violett */
body.tfm-time-night .tfm-ac-atmo-color {
  background:
    radial-gradient(ellipse 70% 55% at 20% 22%, rgba(60, 30, 180, 0.32) 0%, transparent 62%),
    radial-gradient(ellipse 65% 50% at 82% 74%, rgba(40, 20, 140, 0.30) 0%, transparent 62%);
}

/* ---- Atmender Schein (Variante 6) ---- */
.tfm-ac-atmo-breathe {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: min(900px, 90vw);
  height: min(700px, 70vh);
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(90, 184, 122, 0.20),
    rgba(120, 50, 200, 0.09) 45%,
    transparent 70%);
  filter: blur(40px);
  animation: tfmAcBreathe 9s ease-in-out infinite;
}
@keyframes tfmAcBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.25); opacity: 1;    }
}

/* ---- Sterne — nur bei Nacht sichtbar ---- */
.tfm-ac-atmo-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.tfm-time-night .tfm-ac-atmo-stars {
  opacity: 1;
}
.tfm-ac-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #ffffff;
  animation: tfmAcTwinkle ease-in-out infinite;
}
@keyframes tfmAcTwinkle {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.85; }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .tfm-ac-atmo-breathe { animation: none; }
  .tfm-ac-star { animation: none; opacity: 0.5; }
}

/* ============================================================
   11. REGAL-KERZEN — kleine flackernde Kerze am Regalrand
   Wird per JS an jedes .tfm-lib-shelf angehängt (ein Element
   .tfm-shelf-candle links, eins rechts). Sitzt auf dem
   Holzbrett-Bereich unten am Regal.
   ============================================================ */

.tfm-lib-shelf {
  position: relative; /* Anker für die Kerzen */
}

.tfm-shelf-candle {
  position: absolute;
  bottom: 6px;
  width: 8px;
  height: 22px;
  pointer-events: none;
  z-index: 5;
}
.tfm-shelf-candle--left  { left: 10px; }
.tfm-shelf-candle--right { right: 10px; }

/* Kerzenkörper (Wachs) */
.tfm-shelf-candle__body {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 16px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(to bottom, #f0e2c0, #c9b48a);
  box-shadow: 0 0 4px rgba(255, 230, 180, 0.3);
}

/* Flamme */
.tfm-shelf-candle__flame {
  position: absolute;
  bottom: 15px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 9px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%,
    #fff3c0 0%, #ffb347 45%, #ff7518 80%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255, 160, 70, 0.8),
    0 0 16px rgba(255, 130, 40, 0.5),
    0 0 26px rgba(255, 110, 30, 0.3);
  transform-origin: 50% 100%;
  animation: tfmCandleFlicker 2.4s ease-in-out infinite;
}
@keyframes tfmCandleFlicker {
  0%, 100% { transform: translateX(-50%) scaleY(1)    scaleX(1);    opacity: 1;    }
  25%      { transform: translateX(-52%) scaleY(1.12) scaleX(0.92); opacity: 0.92; }
  50%      { transform: translateX(-49%) scaleY(0.95) scaleX(1.05); opacity: 1;    }
  75%      { transform: translateX(-51%) scaleY(1.06) scaleX(0.96); opacity: 0.95; }
}

/* Kleiner Lichtschein um die Flamme */
.tfm-shelf-candle__glow {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 80, 0.22), transparent 70%);
  animation: tfmCandleGlow 2.4s ease-in-out infinite;
}
@keyframes tfmCandleGlow {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1);    }
  50%      { opacity: 0.9; transform: translateX(-50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-shelf-candle__flame,
  .tfm-shelf-candle__glow { animation: none; }
}

/* ============================================================
   12. INTRO- + CLOSING-SEKTION (Textstile)
   Für die Einleitung unter dem Hero und den Abschlusstext am
   Seitenende. Werden an Elementor Heading/Text-Widgets vergeben.
   Wie bei den Hero-Klassen: Wildcard " *" damit die Typografie
   auch das verschachtelte Elementor-Text-Element erreicht.
   ============================================================ */

/* --- Intro --- */
.tfm-ac-intro-pretitle,
.tfm-ac-intro-pretitle * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--academy-accent) !important;
  opacity: 0.75;
  text-align: center;
}

.tfm-ac-intro-text,
.tfm-ac-intro-text * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: #d8d0ea !important;
  text-align: center;
}
.tfm-ac-intro-text em {
  font-style: italic !important;
  color: var(--academy-accent-soft) !important;
}

/* --- Closing --- */
.tfm-ac-closing-glyph,
.tfm-ac-closing-glyph * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  color: var(--academy-accent) !important;
  opacity: 0.6;
  text-align: center;
}

.tfm-ac-closing-text,
.tfm-ac-closing-text * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
  color: #9a8fbb !important;
  text-align: center;
}

/* ============================================================
   13. GRIMOIRE/SYLLABUS — DYNAMISCHES LAYOUT
   Ausgegeben von [tfm_grimoire] / [tfm_syllabus] Shortcodes.
   Ein Shortcode-Widget in einem Elementor-Container mit Klasse
   .tfm-grim-book gibt das komplette Zwei-Seiten-Layout aus.
   JS (tfm-academy.js) übernimmt den Kapitel-Wechsel per Klick.
   ============================================================ */

/* Zwei-Spalten-Layout innerhalb des Shortcode-Outputs.
   Der äußere .tfm-grim-book Container (Elementor) liefert die
   Buch-Optik (Border, Shadow, Background). Dieses .tfm-grim-layout
   teilt den Inhalt in linke + rechte Seite. */
.tfm-grim-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
  width: 100%;
}
@media (max-width: 768px) {
  .tfm-grim-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Klickbare Kapitel-Liste: aktiver Zustand ── */
.tfm-grim-chapter {
  cursor: pointer;
  user-select: none;
}
.tfm-grim-chapter.active {
  background: rgba(90, 184, 122, 0.12);
  border-color: var(--academy-accent-glow) !important;
  color: var(--academy-accent-soft);
}
.tfm-grim-chapter.active .tfm-grim-chapter__num {
  color: var(--academy-accent-soft);
}

/* ── Rechte Seite: Content-Panels ── */
.tfm-grim-content {
  display: none;
  animation: tfmGrimFadeIn 0.35s ease;
}
.tfm-grim-content.active {
  display: block;
}
@keyframes tfmGrimFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cover-Bild-Wrapper (Featured Image, kleines Format) */
.tfm-grim-content-cover-wrap {
  width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  float: right;
  margin: 0 0 0.8rem 1rem;
  border: 1px solid var(--academy-accent-dim);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tfm-grim-content-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .tfm-grim-content-cover-wrap {
    float: none;
    margin: 0 auto 1rem auto;
    width: 100px;
  }
}

/* Rechte Seite: Clear-Fix damit der Float sauber abschließt */
.tfm-grim-page--right .tfm-grim-content::after {
  content: '';
  display: table;
  clear: both;
}

@media (prefers-reduced-motion: reduce) {
  .tfm-grim-content { animation: none; }
}