/*
 * 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. Hauptfarbe bleibt Lila.
 * ALLE Farben kommen aus tfm-academy-core.css — diese Datei definiert
 * keine eigenen Farbwerte mehr, sondern referenziert nur noch.
 *
 * ── STRUKTUR ──────────────────────────────────────────────────
 *  1. Academy-Variablen (jetzt in tfm-academy-core.css)
 *  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 — ausgelagert nach tfm-academy-core.css
   ============================================================ */

/* Die Variablen-Definitionen sind nach tfm-academy-core.css gewandert.
   Diese Datei benutzt sie nur noch. Core wird per Enqueue-Abhängigkeit
   in tfm-academy.php garantiert vorher geladen. */

/* ============================================================
   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(var(--academy-muted-rgb), 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: var(--academy-parchment) !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(var(--academy-parchment-rgb), 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(var(--academy-parchment-rgb), 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(var(--academy-accent-rgb), 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);
}
.tfm-grim-page--right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.tfm-grim-page--right > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
}

@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); }
}

.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(var(--academy-accent-soft-rgb), 0.55);
  margin-bottom: 1.2rem;
}
.tfm-grim-book-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--academy-ink);
  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: var(--academy-muted);
  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.35rem;
}

.tfm-grim-chapter {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--academy-muted);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.25s, color 0.25s, border-color 0.25s, padding-left 0.2s;
}
.tfm-grim-chapter:hover {
  background: rgba(var(--academy-accent-rgb), 0.08);
  border-color: var(--academy-accent-glow);
  color: var(--academy-ink);
  padding-left: 1.15rem;
}
.tfm-grim-chapter + .tfm-grim-chapter {
  border-top: 1px solid rgba(var(--academy-accent-rgb), 0.08);
}

.tfm-grim-chapter__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(var(--academy-accent-soft-rgb), 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;
  text-transform: capitalize;
}

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

.tfm-grim-empty {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--academy-muted);
  padding: 1rem 0;
}

/* ============================================================
   6. GRIMOIRE — RECHTE SEITE (Content-Bereich)
   ============================================================ */

.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: 2rem !important;
  font-weight: 500 !important;
  color: var(--academy-ink) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.6rem !important;
}

.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.4rem;
}

.tfm-grim-content-body {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--academy-body-text);
}
.tfm-grim-content-body em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--academy-accent-soft);
  font-size: 1.05rem;
}

/* ── Enter-Button — Call-to-Action zum eigentlichen Kapitel/Modul-Post ──
   ZWEI EINSATZORTE MIT UNTERSCHIEDLICHER STRUKTUR:
     1. PHP-generierter "Enter the Chapter"-Link: <a class="tfm-grim-enter-btn">
        DIREKT, ganz ohne Elementor drumherum — Klasse sitzt direkt auf
        dem Link. Bleibt inline-sized (passt sich seinem Inhalt an),
        genau wie bisher.
     2. Elementor-Button-Widget ("Back to the Academy"): Klasse sitzt auf
        dem äußeren Wrapper-<div>, der echte klickbare Link steckt drei
        Ebenen tiefer als <a class="elementor-button"> — bestätigt per
        Konsolen-Check am Modul-Pendant. Ohne Unterscheidung würde ein
        Fix für Fall 2 Fall 1 kaputt machen (der PHP-Link würde plötzlich
        volle Breite bekommen statt sich am Inhalt zu orientieren).
     Deshalb: "a.tfm-grim-enter-btn" für Fall 1 (Tag-Selektor grenzt exakt
     auf den echten Link ein), ".tfm-grim-enter-btn:not(a) .elementor-button"
     für Fall 2 (der Wrapper ist immer ein <div>, nie ein <a>). */

/* Gemeinsame Optik für BEIDE Fälle */
a.tfm-grim-enter-btn,
a.tfm-grim-enter-btn *,
.tfm-grim-enter-btn:not(a) .elementor-button,
.tfm-grim-enter-btn:not(a) .elementor-button * {
  background: transparent !important;
  border-color: var(--academy-accent-glow) !important;
  color: var(--academy-accent-soft) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  fill: var(--academy-accent-soft) !important;
}

/* Fall 1 — PHP-Link: inline-sized wie bisher, unverändert */
a.tfm-grim-enter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 1.6rem;
  border: 1px solid var(--academy-accent-glow) !important;
  padding: 0.7rem 2rem;
  border-radius: 6px !important;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s;
}
a.tfm-grim-enter-btn:hover,
a.tfm-grim-enter-btn:hover * {
  background: rgba(var(--academy-accent-rgb), 0.16) !important;
  border-color: var(--academy-accent) !important;
  color: var(--academy-ink) !important;
}
a.tfm-grim-enter-btn:hover {
  box-shadow: 0 0 20px var(--academy-accent-glow) !important;
}

/* Fall 2 — Elementor-Widget: Breite bis zum echten Link durchreichen.
   KEIN !important bei padding — reine Spezifität reicht bereits gegen
   Elementors Basis-Regel, blockiert aber nicht mehr dein eigenes
   Padding-Feld (Style-Tab → Button → Padding). */
.tfm-grim-enter-btn:not(a) {
  display: block;
  align-self: stretch;
}
.tfm-grim-enter-btn:not(a) .elementor-widget-container,
.tfm-grim-enter-btn:not(a) .elementor-button-wrapper {
  width: 100%;
}
.tfm-grim-enter-btn:not(a) .elementor-button {
  display: flex !important;
  width: 100%;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border: 1px solid var(--academy-accent-glow) !important;
  padding: 0.7rem 2rem;
  border-radius: 6px !important;
  line-height: 1.4;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* Hintergrund NUR auf den Link selbst beim Hover — nicht auf "*", sonst
   bekommt jedes verschachtelte Element einen eigenen Hintergrund. */
.tfm-grim-enter-btn:not(a) .elementor-button:hover {
  background: rgba(var(--academy-accent-rgb), 0.16) !important;
  border-color: var(--academy-accent) !important;
  color: var(--academy-ink) !important;
  box-shadow: 0 0 20px var(--academy-accent-glow) !important;
}
.tfm-grim-enter-btn:not(a) .elementor-button:hover * {
  color: var(--academy-ink) !important;
}

/* ============================================================
   7. BIBLIOTHEK — GEMISCHTER BLOCK: CLASSES + BOOKS
   ============================================================ */

.tfm-lib-block {
  border: 1px solid rgba(var(--academy-accent-rgb), 0.18) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(15, 10, 25, 0.3);
}

.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;
}
.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;
}
.tfm-lib-courses > *,
.tfm-lib-courses > .e-con-inner > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.tfm-lib-block .tfm-lib-shelf {
  border-radius: 0;
}

.tfm-lib-course {
  background: rgba(20, 12, 40, 0.6) !important;
  border: 1px solid rgba(var(--academy-accent-rgb), 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;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

.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(var(--academy-accent-rgb), 0.2));
}
.tfm-lib-course:hover {
  border-color: rgba(var(--academy-accent-rgb), 0.55) !important;
  transform: translateY(-3px);
}

.tfm-lib-course__top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  margin-bottom: 0.4rem !important;
}
.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(var(--academy-muted-rgb), 0.55) !important;
}

.tfm-lib-course__title,
.tfm-lib-course__title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem !important;
  color: var(--academy-ink) !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;
}

.tfm-lib-course__desc,
.tfm-lib-course__desc * {
  font-size: 0.76rem !important;
  color: var(--academy-muted) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  line-height: 1.55 !important;
  margin: 0 0 0.6rem 0 !important;
}

.tfm-lib-course__progress {
  display: flex !important;
  gap: 3px;
}
.tfm-lib-course__dot {
  width: 14px; height: 3px;
  border-radius: 2px;
  background: rgba(var(--academy-muted-rgb), 0.25);
}
.tfm-lib-course__dot.done {
  background: var(--academy-accent);
}

/* ============================================================
   8. SYLLABUS — MODUL-LISTE (Shortcode tfm_syllabus_modules)
   ============================================================ */

.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: var(--academy-muted);
  transition: background 0.25s, color 0.25s, border-color 0.25s, padding-left 0.2s;
}
.tfm-syllabus-module__link:hover {
  background: rgba(var(--academy-accent-rgb), 0.08);
  border-color: var(--academy-accent-glow);
  color: var(--academy-ink);
  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(var(--academy-muted-rgb), 0.6);
}

.tfm-syllabus-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--academy-ink);
  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: var(--academy-muted);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 1.4rem;
}

/* ============================================================
   9. BIBLIOTHEK — HERO-BEREICH (Textstile)
   ============================================================ */

.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;
}
/* text-shadow bewusst NUR auf der äußeren Klasse, nicht im Wildcard
   oben — Grund: bei Text-Editor-Widgets (z.B. Subtitle) steckt der Text
   zusätzlich in <p><strong>...</strong></p> verschachtelt. Ein Wildcard-
   Schatten würde dort DIREKT auf <strong> sitzen und so jede von
   Elementor auf einer höheren Ebene (z.B. <p>) gesetzte eigene
   Einstellung blockieren — Vererbung verliert immer gegen eine direkt
   am Element gesetzte Regel, unabhängig von Spezifität. Nur auf der
   äußeren Klasse vererbt sich der Wert stattdessen ganz normal nach
   unten durch, und deine eigene Einstellung kann ihn auf jeder Ebene
   frei überschreiben. */
.tfm-ac-hero-pretitle {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .95),
    0 1px 4px rgba(0, 0, 0, 1);
}

.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: var(--academy-accent) !important;
  letter-spacing: 0.03em !important;
  line-height: 1.15 !important;
  text-align: left !important;
}
.tfm-ac-hero-title {
  text-shadow:
    0 4px 18px rgba(0, 0, 0, .9),
    0 1px 5px rgba(0, 0, 0, 1);
}
.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: var(--academy-muted) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.tfm-ac-hero-subtitle {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, .95),
    0 1px 4px rgba(0, 0, 0, 1);
}

/* Elementors "Highlighted Text"-Funktion erzeugt für das hervorgehobene
   Wort einen eigenen <span> (.elementor-headline-highlighted-word) —
   falls du die mal einsetzt, erbt der Span den Schatten der äußeren
   Klasse automatisch, hier ist nichts weiter nötig. */

/* ============================================================
   10. ATMOSPHÄRE — Tageszeit-Hintergrund, atmender Schein, Sterne
   ============================================================ */

.tfm-ac-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.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%);
}
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%);
}
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%);
}
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%);
}

.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(var(--academy-accent-rgb), 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;    }
}

.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; }
}

@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
   ============================================================ */

.tfm-lib-shelf {
  position: relative;
}

.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; }

.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);
}

.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; }
}

.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)
   ============================================================ */

.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;
}

.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: var(--academy-muted) !important;
  text-align: center;
}

/* ============================================================
   13. GRIMOIRE/SYLLABUS — DYNAMISCHES LAYOUT
   ============================================================ */

.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;
  }
}

.tfm-grim-chapter.active {
  background: rgba(var(--academy-accent-rgb), 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);
}

.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); }
}

.tfm-grim-content-cover-wrap {
  width: 138px;
  height: 184px;
  border-radius: 4px;
  overflow: hidden;
  float: right;
  margin: 0 0 0.8rem 1.2rem;
  border: 1px solid var(--academy-accent-dim);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
}
.tfm-grim-content-cover-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}
.tfm-grim-content-cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

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

.tfm-grim-page--right .tfm-grim-content::after {
  content: '';
  display: table;
  clear: both;
}

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

/* ============================================================
   14. GRIMOIRE — ILLUMINIERTES BUCH
   ============================================================ */

.tfm-grim-book {
  background: linear-gradient(to right,
    rgba(28, 18, 46, 0.90),
    rgba(30, 20, 50, 0.88) 12%,
    rgba(35, 20, 55, 0.96) 47%,
    rgba(35, 20, 55, 0.96) 53%,
    rgba(30, 20, 50, 0.88) 88%,
    rgba(28, 18, 46, 0.90)) !important;
  transition: background 1.4s ease, box-shadow 1.4s ease;
  position: relative;
}
.tfm-grim-book::after { display: none !important; }

body.tfm-time-sunset .tfm-grim-book {
  background: linear-gradient(to right,
    rgba(44, 24, 40, 0.90),
    rgba(48, 26, 44, 0.92) 12%,
    rgba(56, 28, 48, 0.96) 47%,
    rgba(56, 28, 48, 0.96) 53%,
    rgba(48, 26, 44, 0.92) 88%,
    rgba(44, 24, 40, 0.90)) !important;
}
body.tfm-time-night .tfm-grim-book {
  background: linear-gradient(to right,
    rgba(14, 10, 32, 0.92),
    rgba(16, 12, 36, 0.94) 12%,
    rgba(20, 14, 42, 0.97) 47%,
    rgba(20, 14, 42, 0.97) 53%,
    rgba(16, 12, 36, 0.94) 88%,
    rgba(14, 10, 32, 0.92)) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.78),
              inset 0 0 60px rgba(60, 40, 160, 0.09) !important;
}

.tfm-grim-stack-left,
.tfm-grim-stack-right {
  position: absolute;
  top: 9px; bottom: 9px;
  width: 8px;
  background: repeating-linear-gradient(to right,
    rgba(var(--academy-parchment-rgb), 0.15) 0px, rgba(var(--academy-parchment-rgb), 0.15) 1px,
    rgba(20, 12, 35, 0.90) 1px, rgba(20, 12, 35, 0.90) 2px);
  pointer-events: none;
  z-index: 0;
}
.tfm-grim-stack-left  { left: -8px;  border-radius: 4px 0 0 4px; }
.tfm-grim-stack-right { right: -8px; border-radius: 0 4px 4px 0; }

.tfm-grim-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.012) 0px, transparent 1px,
      transparent 2px, rgba(255,255,255,0.012) 3px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.01) 0px, transparent 1px,
      transparent 3px, rgba(0,0,0,0.015) 4px),
    radial-gradient(ellipse at 30% 20%, rgba(255,240,200,0.025), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(200,180,255,0.02), transparent 55%);
}

.tfm-grim-spine-left,
.tfm-grim-spine-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 78px;
  pointer-events: none;
  z-index: 3;
}
.tfm-grim-spine-left  { right: 50%; background: linear-gradient(to right, transparent, rgba(0,0,0,0.5)); }
.tfm-grim-spine-right { left: 50%;  background: linear-gradient(to left,  transparent, rgba(0,0,0,0.5)); }

.tfm-grim-page {
  z-index: 4;
}
.tfm-grim-page > * {
  position: relative;
  z-index: 2;
}
.tfm-grim-page--left {
  border-right: none !important;
  padding-right: 3.4rem !important;
}

.tfm-grim-corner {
  position: absolute;
  width: 54px; height: 54px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}
.tfm-grim-corner svg { width: 100%; height: 100%; }
.tfm-grim-corner--tl { top: 5px; left: 5px; }
.tfm-grim-corner--tr { top: 5px; right: 5px; transform: scaleX(-1); }
.tfm-grim-corner--bl { bottom: 5px; left: 5px; transform: scaleY(-1); }
.tfm-grim-corner--br { bottom: 5px; right: 5px; transform: scale(-1, -1); }

.tfm-grim-chapter-list { gap: 0.45rem; }
.tfm-grim-chapter + .tfm-grim-chapter { border-top: none; }
.tfm-grim-chapter + .tfm-grim-chapter::before {
  content: '\2726';
  position: absolute;
  top: -0.62rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.52rem;
  color: rgba(var(--academy-accent-soft-rgb), 0.42);
  padding: 0 0.5rem;
  z-index: 2;
}
.tfm-grim-chapter + .tfm-grim-chapter::after {
  content: '';
  position: absolute;
  top: -0.34rem; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    rgba(var(--academy-accent-rgb), 0.22) 22%, transparent 44%,
    transparent 56%, rgba(var(--academy-accent-rgb), 0.22) 78%, transparent);
}

.tfm-grim-chapter__num {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--academy-accent-soft) !important;
  opacity: 0.7;
  min-width: 40px !important;
  letter-spacing: 0.05em;
  border-right: 1px solid rgba(var(--academy-accent-rgb), 0.2);
  padding-right: 0.6rem;
  margin-right: 0.15rem;
}
.tfm-grim-chapter.active .tfm-grim-chapter__num {
  opacity: 1;
  text-shadow: 0 0 12px rgba(var(--academy-accent-soft-rgb), 0.5);
}

.tfm-grim-initial {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 4.4rem;
  line-height: 0.78;
  background: linear-gradient(160deg,
    var(--academy-gold) 0%,
    var(--academy-accent-soft) 38%,
    var(--academy-accent) 74%,
    var(--academy-accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 12px rgba(var(--academy-accent-rgb), 0.28);
  margin: 0.1rem 0.35rem 0 0;
  padding-right: 0.06em;
  position: relative;
}
.tfm-grim-initial::after {
  content: '';
  position: absolute;
  left: -5px; right: 0; top: -5px; bottom: -3px;
  border: 1px solid rgba(var(--academy-gold-rgb), 0.2);
  border-radius: 3px;
  pointer-events: none;
}

.tfm-grim-title-rest {
  min-width: 0;
}

.tfm-grim-content-subtitle {
  letter-spacing: 0.24em !important;
  margin-bottom: 0.75rem !important;
}

.tfm-grim-content-title::after {
  content: '';
  display: table;
  clear: both;
}
.tfm-grim-divider {
  width: 64px;
  height: 1px;
  margin: 0.5rem 0 0.9rem 0;
  background: linear-gradient(90deg, var(--academy-accent), transparent);
}

.tfm-grim-content-title {
  font-size: 2.4rem !important;
  line-height: 1.13 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0 !important;
  display: block !important;
}
.tfm-grim-content-meta {
  margin-bottom: 1.5rem !important;
}

.tfm-grim-page--right {
  perspective: 1500px;
  padding-left: 3.4rem !important;
}

@keyframes tfmGrimPageFlip {
  0%   { opacity: 0; transform: rotateY(-36deg) translateX(26px); transform-origin: left center; }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0) translateX(0); }
}
@keyframes tfmGrimInkBloom {
  0%   { opacity: 0; filter: blur(4px); letter-spacing: 0.14em; }
  55%  { opacity: 0.85; filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); letter-spacing: normal; }
}

.tfm-grim-content { animation: none; }
.tfm-grim-content.switching {
  animation: tfmGrimPageFlip 0.58s cubic-bezier(0.3, 0.8, 0.4, 1);
}
.tfm-grim-content.switching .tfm-grim-content-subtitle {
  animation: tfmGrimInkBloom 0.62s ease-out backwards;
}
.tfm-grim-content.switching .tfm-grim-content-title {
  animation: tfmGrimInkBloom 0.78s ease-out 0.06s backwards;
}
.tfm-grim-content.switching .tfm-grim-content-meta {
  animation: tfmGrimInkBloom 0.7s ease-out 0.14s backwards;
}
.tfm-grim-content.switching .tfm-grim-content-body {
  animation: tfmGrimInkBloom 0.95s ease-out 0.2s backwards;
}

.tfm-grim-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
  z-index: 1;
}
body.tfm-time-night .tfm-grim-stars { opacity: 1; }
.tfm-grim-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #ffffff;
  animation: tfmGrimTwinkle ease-in-out infinite;
}
@keyframes tfmGrimTwinkle {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.75; }
}

.tfm-grim-warmglow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 55% 70% at 6% 42%,
    rgba(255, 180, 90, 0.09), transparent 62%);
  opacity: 0.5;
  transition: opacity 1.4s ease;
}
body.tfm-time-sunset .tfm-grim-warmglow { opacity: 0.85; }
body.tfm-time-night  .tfm-grim-warmglow { opacity: 1; }

@media (max-width: 768px) {
  .tfm-grim-spine-left,
  .tfm-grim-spine-right { display: none; }
  .tfm-grim-stack-left,
  .tfm-grim-stack-right { display: none; }
  .tfm-grim-page--left  { padding-right: 1.6rem !important; }
  .tfm-grim-page--right {
    padding-left: 1.6rem !important;
    border-top: 1px solid var(--academy-accent-dim);
  }
  .tfm-grim-content-title { font-size: 1.9rem !important; }
  .tfm-grim-initial { font-size: 3.4rem; }
  .tfm-grim-corner { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-grim-content.switching,
  .tfm-grim-content.switching * { animation: none !important; }
  .tfm-grim-star { animation: none; opacity: 0.5; }
}