/*
 * TFM Syllabus — "Die Schriftrolle"
 * /wp-content/themes/blocksy-child/css/tfm-academy-syllabus.css
 *
 * Geladen auf: class-Taxonomie-Archiv + class-chapter Einzelseite
 * (via php/tfm-academy-syllabus.php)
 *
 * Eigene Datei statt Erweiterung von tfm-academy.css: das Syllabus hat
 * mit Alterung, Entrollen, Wärme-Verlauf, Fasertextur und Zertifikat
 * genug eigenes Gewicht, und die Datei soll nur dort laden, wo sie
 * gebraucht wird. Die Farb-Variablen aus tfm-academy.css werden
 * mitbenutzt, aber mit Fallback abgesichert — falls die Academy-Datei
 * auf dieser Seite einmal nicht geladen ist, bricht nichts.
 *
 * ── STRUKTUR ──────────────────────────────────────────────────
 *  1. Variablen + Grundlagen
 *  2. Kopfbereich (Kennzahlen, Rückkehr-Erinnerung)
 *  3. Siegel-Leiste (inkl. Alterung, Entrollen, Theorie/Praxis-Zeichen)
 *  4. Pergament-Panel (Grundaufbau)
 *  5. Dekorations-Ebenen (Textur, atmender Schein, Wärme, Ecken-Ranken)
 *  6. Cover (inkl. langsamer Zoom)
 *  7. Typografie + gestaffelte Tinte
 *  8. Zertifikat
 *  9. Tageszeit-Varianten
 * 10. Responsive + Bewegungsreduktion
 *
 * NAMENSKONVENTION: alle Klassen mit Präfix .tfm-syl-, damit es keine
 * Kollisionen mit den .tfm-grim-* Klassen des Grimoire gibt. Die beiden
 * Bereiche sehen verwandt aus, sind aber bewusst unabhängig — eine
 * Änderung am Grimoire soll das Syllabus nie unbeabsichtigt mitziehen.
 */

/* ============================================================
   1. VARIABLEN + GRUNDLAGEN
   ============================================================ */

.tfm-syl-root {
  /* Fallback-Werte, falls tfm-academy.css hier nicht geladen ist */
  --syl-accent:      var(--academy-accent, #5ab87a);
  --syl-accent-soft: var(--academy-accent-soft, #a5e8b8);
  --syl-accent-deep: var(--academy-accent-deep, #3a8659);
  --syl-accent-glow: var(--academy-accent-glow, rgba(90, 184, 122, .35));
  --syl-accent-dim:  var(--academy-accent-dim, rgba(90, 184, 122, .15));
  --syl-gold:        #f5e6a8;
  --syl-ink:         #d8f0d5;
  --syl-body:        #ddd4f0;
  --syl-muted:       #9a8fbb;

  /* Pergament-Farben — werden weiter unten pro Tageszeit überschrieben */
  --syl-paper-a:     rgba(35, 20, 55, .94);
  --syl-paper-b:     rgba(24, 14, 42, .94);

  /* Lesefortschritt im aktiven Modul, 0–1. Wird vom JS gesetzt und
     steuert die Wärme des Pergaments. */
  --syl-read: 0;

  position: relative;
}

/* ============================================================
   2. KOPFBEREICH
   ============================================================ */

.tfm-syl-head {
  margin-bottom: 1.8rem;
}

.tfm-syl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  align-items: flex-end;
}

.tfm-syl-stat {
  font-family: 'Jost', sans-serif;
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(154, 143, 187, .7);
}
.tfm-syl-stat b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--syl-accent-soft);
}

/* ── Rückkehr-Erinnerung ──
   Erscheint leicht verzögert, damit sie nicht mit dem Entrollen der
   Leiste konkurriert — zwei gleichzeitige Bewegungen beim Seitenaufbau
   lesen sich unruhig. */
.tfm-syl-memo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding: .85rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--syl-accent-dim);
  background: rgba(90, 184, 122, .07);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .98rem;
  color: var(--syl-muted);
  animation: tfmSylMemoIn .8s ease .9s backwards;
}
@keyframes tfmSylMemoIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.tfm-syl-memo b {
  color: var(--syl-accent-soft);
  font-style: normal;
  font-weight: 500;
}
.tfm-syl-memo__btn {
  margin-left: auto;
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--syl-accent-soft);
  border: 1px solid var(--syl-accent-glow);
  border-radius: 6px;
  padding: .5rem 1rem;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.tfm-syl-memo__btn:hover {
  background: rgba(90, 184, 122, .16);
  border-color: var(--syl-accent);
}

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

/* ============================================================
   3. SIEGEL-LEISTE
   ============================================================ */

.tfm-syl-strip {
  position: relative;
  margin: 2rem 0;
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(240, 232, 216, .05), rgba(20, 12, 35, .5));
  border-top: 1px solid rgba(240, 232, 216, .14);
  border-bottom: 1px solid rgba(240, 232, 216, .14);
}

.tfm-syl-strip__scroll {
  overflow-x: auto;
  padding: 2rem 1.4rem 1.5rem;
  scrollbar-width: thin;
}
.tfm-syl-strip__scroll::-webkit-scrollbar { height: 5px; }
.tfm-syl-strip__scroll::-webkit-scrollbar-track { background: transparent; }
.tfm-syl-strip__scroll::-webkit-scrollbar-thumb {
  background: var(--syl-accent-glow);
  border-radius: 3px;
}

.tfm-syl-rail {
  display: flex;
  align-items: flex-start;
  min-width: min-content;
  position: relative;
}

/* Einzelnes Siegel. flex-basis statt fester Breite: bei wenigen Modulen
   verteilen sie sich über die volle Breite, bei vielen entsteht der
   horizontale Scroll. */
.tfm-syl-seal {
  flex: 1 0 132px;
  background: none;
  border: 0;
  padding: 0 .4rem;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
  position: relative;
}

/* Die verbindende Linie zwischen den Siegeln — sie ist der eigentliche
   "Faden" der Schriftrolle. Bei abgeschlossenen Modulen leuchtet sie. */
.tfm-syl-seal::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(154, 143, 187, .22);
  transition: background .4s;
}
.tfm-syl-seal.is-done::before {
  background: var(--syl-accent-glow);
}

.tfm-syl-seal__dot {
  position: relative;
  z-index: 2;
  width: 27px;
  height: 27px;
  margin: 0 auto .65rem;
  border-radius: 50%;
  border: 1px solid rgba(154, 143, 187, .35);
  background: #0d0819;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem;
  color: var(--syl-muted);
  transition: transform .3s, border-color .3s, color .3s, box-shadow .3s, opacity .3s;
}
.tfm-syl-seal.is-done .tfm-syl-seal__dot {
  border-color: var(--syl-accent);
  background: rgba(90, 184, 122, .18);
  color: var(--syl-accent-soft);
}
.tfm-syl-seal:hover .tfm-syl-seal__dot {
  border-color: var(--syl-accent-soft);
}
.tfm-syl-seal.is-active .tfm-syl-seal__dot {
  border-color: var(--syl-gold);
  color: var(--syl-gold);
  transform: scale(1.22);
  box-shadow: 0 0 16px rgba(245, 230, 168, .35);
}

.tfm-syl-seal__label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .84rem;
  line-height: 1.3;
  color: rgba(154, 143, 187, .85);
  transition: color .3s;
}
.tfm-syl-seal.is-active .tfm-syl-seal__label {
  color: var(--syl-ink);
}
.tfm-syl-seal:hover .tfm-syl-seal__label {
  color: var(--syl-accent-soft);
}

/* ── ALTERUNG ──
   Gelesene Module wirken abgegriffen (heller, mit einer leichten
   Vertiefung im Siegel), noch nicht gelesene bleiben zurückhaltend.
   Das ersetzt eine klassische Fortschrittsanzeige: man SIEHT, wie weit
   die Rolle bereits benutzt wurde, statt eine Zahl zu lesen. */
.tfm-syl-seal.is-done .tfm-syl-seal__label {
  color: rgba(220, 212, 240, .92);
}
.tfm-syl-seal.is-done .tfm-syl-seal__dot {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
}
.tfm-syl-seal.is-open .tfm-syl-seal__label {
  color: rgba(154, 143, 187, .5);
}
.tfm-syl-seal.is-open .tfm-syl-seal__dot {
  opacity: .62;
}
.tfm-syl-seal.is-open .tfm-syl-kind {
  opacity: .4;
}
/* Das aktive Siegel gewinnt immer gegen die Alterung — sonst würde ein
   noch nicht gelesenes, gerade geöffnetes Modul gedämpft dargestellt. */
.tfm-syl-seal.is-active.is-open .tfm-syl-seal__dot,
.tfm-syl-seal.is-active.is-open .tfm-syl-kind {
  opacity: 1;
}

/* ── THEORIE / PRAXIS ZEICHEN ── */
.tfm-syl-kind {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-top: .45rem;
  color: rgba(165, 232, 184, .6);
  transition: opacity .3s, color .3s;
}
.tfm-syl-kind svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.tfm-syl-kind span {
  font-family: 'Jost', sans-serif;
  font-size: .53rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(154, 143, 187, .6);
}
.tfm-syl-seal.is-active .tfm-syl-kind {
  color: var(--syl-gold);
}
.tfm-syl-seal.is-active .tfm-syl-kind span {
  color: rgba(245, 230, 168, .75);
}

/* ── ENTROLLEN BEIM LADEN ──
   Die Leiste öffnet sich von der Mitte nach außen, die Siegel erscheinen
   nacheinander. Die Klasse 'is-unrolling' setzt und entfernt das JS —
   dadurch läuft die Animation genau einmal und blockiert danach nichts
   mehr (dauerhafte Animationen auf Layout-Elementen verhindern sonst
   z.B. sauberes horizontales Scrollen). */
.tfm-syl-strip.is-unrolling {
  animation: tfmSylUnrollStrip .6s cubic-bezier(.22, .9, .3, 1);
}
@keyframes tfmSylUnrollStrip {
  0%   { clip-path: inset(0 42% 0 42%); }
  100% { clip-path: inset(0); }
}

.tfm-syl-rail.is-unrolling .tfm-syl-seal {
  animation: tfmSylUnrollSeal .75s cubic-bezier(.22, .9, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * .075s);
}
@keyframes tfmSylUnrollSeal {
  0%   { opacity: 0; transform: scaleX(.2) translateY(6px); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   4. PERGAMENT-PANEL
   ============================================================ */

.tfm-syl-panels {
  position: relative;
}

.tfm-syl-panel {
  display: none;
  position: relative;
  border-radius: 6px;
  padding: 2.2rem 2.4rem;
  background: linear-gradient(135deg, var(--syl-paper-a), var(--syl-paper-b));
  border: 1px solid var(--syl-accent-dim);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .5),
    inset 0 0 60px rgba(90, 184, 122, .04);
  /* overflow:hidden hält alle Dekorations-Ebenen (Textur, Schein, Wärme)
     innerhalb der abgerundeten Ecken. */
  overflow: hidden;
  transition: background 1.2s ease, box-shadow 1.2s ease;
}
.tfm-syl-panel.is-active {
  display: grid;
  grid-template-columns: 158px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Seitenwechsel-Bewegung. Die Klasse setzt das JS beim Umschalten und
   entfernt sie danach wieder, damit sie erneut greifen kann. */
.tfm-syl-panel.is-switching {
  animation: tfmSylFlip .5s cubic-bezier(.3, .8, .4, 1);
}
@keyframes tfmSylFlip {
  0%   { opacity: .3; transform: rotateY(-7deg) translateX(16px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   5. DEKORATIONS-EBENEN
   ============================================================ */

/* ── Papierfaser + Flecken ──
   background-image kommt als Inline-Style aus dem PHP (pro Modul über
   die Post-ID variiert). Hier nur Position und Deckkraft. */
.tfm-syl-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* ── Atmender Schein ──
   Bewusst deutlich langsamer als der Schein auf der Bibliotheks-Seite
   (16s statt 9s): hier wird gelesen, dort geschaut. */
.tfm-syl-breathe {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(90, 184, 122, .14), transparent 62%);
  filter: blur(30px);
  animation: tfmSylBreathe 16s ease-in-out infinite;
}
@keyframes tfmSylBreathe {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.12); }
}

/* ── Wärme mit Lesefortschritt ──
   Mehrschichtiger Verlauf: ein diagonaler Hauptverlauf plus zwei
   radiale Glutpunkte, die den unteren Bereich zuerst erwärmen — dort,
   wo der Leser gerade ankommt. Deckkraft folgt --syl-read (0–1), das
   das JS beim Scrollen setzt. */
.tfm-syl-warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--syl-read) * 1);
  transition: opacity .3s linear;
  background:
    radial-gradient(ellipse 60% 55% at 82% 88%, rgba(255, 150, 70, .22), transparent 62%),
    radial-gradient(ellipse 70% 60% at 12% 78%, rgba(255, 120, 60, .14), transparent 60%),
    linear-gradient(148deg,
      rgba(255, 200, 130, .04) 0%,
      rgba(255, 176, 96, .13) 38%,
      rgba(255, 132, 62, .18) 72%,
      rgba(214, 92, 48, .16) 100%);
}

/* ── Ecken-Ranken ──
   Werden per JS injiziert (siehe tfm-academy-syllabus.js), damit in Elementor
   nichts davon gebaut werden muss. */
.tfm-syl-vine {
  position: absolute;
  width: 52px;
  height: 52px;
  z-index: 3;
  opacity: .45;
  pointer-events: none;
}
.tfm-syl-vine svg { width: 100%; height: 100%; }
.tfm-syl-vine--tl { top: 6px;    left: 6px; }
.tfm-syl-vine--tr { top: 6px;    right: 6px;  transform: scaleX(-1); }
.tfm-syl-vine--bl { bottom: 6px; left: 6px;   transform: scaleY(-1); }
.tfm-syl-vine--br { bottom: 6px; right: 6px;  transform: scale(-1, -1); }

/* Nachschwingen beim Modulwechsel. Jede Ecke braucht eigene Keyframes,
   weil ihre Ruhelage bereits eine Transformation ist (Spiegelung) —
   eine gemeinsame Animation würde diese Spiegelung überschreiben. */
.tfm-syl-panel.is-switching .tfm-syl-vine--tl { animation: tfmSylSwayTl 1.1s ease-out; }
.tfm-syl-panel.is-switching .tfm-syl-vine--tr { animation: tfmSylSwayTr 1.1s ease-out; }
.tfm-syl-panel.is-switching .tfm-syl-vine--bl { animation: tfmSylSwayBl 1.1s ease-out; }
.tfm-syl-panel.is-switching .tfm-syl-vine--br { animation: tfmSylSwayBr 1.1s ease-out; }

@keyframes tfmSylSwayTl {
  0%   { transform: rotate(-4deg) scale(1.04); }
  45%  { transform: rotate(2deg); }
  100% { transform: none; }
}
@keyframes tfmSylSwayTr {
  0%   { transform: scaleX(-1) rotate(-4deg); }
  45%  { transform: scaleX(-1) rotate(2deg); }
  100% { transform: scaleX(-1); }
}
@keyframes tfmSylSwayBl {
  0%   { transform: scaleY(-1) rotate(4deg); }
  45%  { transform: scaleY(-1) rotate(-2deg); }
  100% { transform: scaleY(-1); }
}
@keyframes tfmSylSwayBr {
  0%   { transform: scale(-1, -1) rotate(4deg); }
  45%  { transform: scale(-1, -1) rotate(-2deg); }
  100% { transform: scale(-1, -1); }
}

/* ============================================================
   6. COVER
   ============================================================ */

.tfm-syl-cover {
  position: relative;
  height: 210px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--syl-accent-dim);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  z-index: 3;
}
.tfm-syl-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* object-position:top — beim Zuschneiden bevorzugt der obere
     Bildbereich, wo das Motiv meist sitzt (gleiche Entscheidung wie
     beim Grimoire-Cover). */
  object-position: center top !important;
  display: block;
  /* Langsamer Zoom. Sehr lange Dauer und alternate, damit die Bewegung
     nie als "Animation" wahrgenommen wird, sondern nur als Tiefe. */
  animation: tfmSylKenBurns 24s ease-in-out infinite alternate;
}
@keyframes tfmSylKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-2%, -3%); }
}

/* Vignette + innerer Rahmen, damit ein rohes Foto sich wie ein Cover
   anfühlt statt wie ein Schnappschuss. */
.tfm-syl-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  pointer-events: none;
}

/* Platzhalter, falls kein Beitragsbild gesetzt ist */
.tfm-syl-cover--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(42, 26, 74, .9), rgba(18, 8, 42, .9));
}
.tfm-syl-cover--empty span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  color: rgba(245, 230, 168, .35);
}

/* ============================================================
   7. TYPOGRAFIE + GESTAFFELTE TINTE
   ============================================================ */

.tfm-syl-col {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.tfm-syl-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--syl-accent-soft);
  opacity: .85;
  margin-bottom: .5rem;
}

.tfm-syl-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.1rem;
  font-weight: 500;
  color: var(--syl-ink);
  line-height: 1.15;
  margin: 0 0 .5rem;
  letter-spacing: .01em;
}

.tfm-syl-meta {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--syl-accent-soft);
  opacity: .75;
  margin-bottom: 1.2rem;
}

/* Lesebereich. Die Höhenbegrenzung hält das Panel bei unterschiedlich
   langen Modulen ruhig und liefert gleichzeitig den Scrollwert für den
   Wärme-Verlauf. Ist der Text kürzer, entsteht kein Scroll und das JS
   fällt auf den Seiten-Scroll zurück. */
.tfm-syl-reader {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 1.2rem;
  scrollbar-width: thin;
}
.tfm-syl-reader::-webkit-scrollbar { width: 4px; }
.tfm-syl-reader::-webkit-scrollbar-track { background: transparent; }
.tfm-syl-reader::-webkit-scrollbar-thumb {
  background: rgba(90, 184, 122, .25);
  border-radius: 3px;
}
.tfm-syl-reader p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--syl-body);
  margin: 0 0 .9rem;
}
.tfm-syl-reader p:last-child { margin-bottom: 0; }
.tfm-syl-reader h2,
.tfm-syl-reader h3,
.tfm-syl-reader h4 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--syl-accent-soft);
  margin: 1.5rem 0 .4rem;
}
.tfm-syl-reader em {
  color: var(--syl-accent-soft);
}

/* ── Gestaffelte Tinte ──
   Die Textblöcke erscheinen nacheinander statt gleichzeitig: erst der
   Kicker, dann Titel, Meta, Text. Das liest sich als "wird geschrieben"
   statt als "wird geladen". Feste Verzögerungen pro Klasse statt
   nth-child, weil im Panel auch die Dekorations-Divs als Kinder liegen
   und nth-child dadurch verrutschen würde. */
.tfm-syl-panel.is-switching .tfm-syl-ink {
  animation: tfmSylInk .85s ease-out backwards;
}
.tfm-syl-panel.is-switching .tfm-syl-kicker { animation-delay: 0s; }
.tfm-syl-panel.is-switching .tfm-syl-title  { animation-delay: .09s; }
.tfm-syl-panel.is-switching .tfm-syl-meta   { animation-delay: .18s; }
.tfm-syl-panel.is-switching .tfm-syl-reader { animation-delay: .28s; }

@keyframes tfmSylInk {
  0%   { opacity: 0;   filter: blur(4px); letter-spacing: .13em; }
  60%  { opacity: .85; filter: blur(1px); }
  100% { opacity: 1;   filter: blur(0);   letter-spacing: normal; }
}

/* ── Tinten-Markierung ──
   Textselektion im Grün der Academy statt im Browser-Blau. Bewusst nur
   innerhalb von .tfm-syl-root, damit Header/Footer unangetastet bleiben. */
.tfm-syl-root ::selection {
  background: rgba(90, 184, 122, .32);
  color: #f3fff5;
}
.tfm-syl-root ::-moz-selection {
  background: rgba(90, 184, 122, .32);
  color: #f3fff5;
}

/* ── Button "Modul beginnen" ── */
.tfm-syl-enter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.4rem;
  background: transparent;
  border: 1px solid var(--syl-accent-glow);
  color: var(--syl-accent-soft);
  padding: .7rem 1.9rem;
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 4;
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.tfm-syl-enter:hover {
  background: rgba(90, 184, 122, .16);
  border-color: var(--syl-accent);
  color: var(--syl-ink);
  box-shadow: 0 0 20px var(--syl-accent-glow);
}

/* Screenreader-Ansage beim Modulwechsel — visuell versteckt, aber
   nicht display:none (das würde von Screenreadern ignoriert). */
.tfm-syl-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   8. ZERTIFIKAT
   ============================================================ */

.tfm-syl-cert-trigger {
  text-align: center;
  margin-top: 2.4rem;
}

.tfm-syl-cert-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(6, 4, 14, .88);
  backdrop-filter: blur(6px);
  animation: tfmSylCertFade .6s ease;
}
/* [hidden] muss explizit gesetzt werden, weil display:grid oben sonst
   gewinnt — das native hidden-Attribut hat nur display:none mit
   niedrigerer Spezifität. */
.tfm-syl-cert-overlay[hidden] { display: none; }

@keyframes tfmSylCertFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tfm-syl-cert {
  position: relative;
  max-width: 540px;
  width: 100%;
  padding: 3rem 2.6rem 2.4rem;
  text-align: center;
  border-radius: 6px;
  border: 1px solid rgba(245, 230, 168, .35);
  background: linear-gradient(150deg, rgba(38, 24, 58, .98), rgba(20, 12, 38, .98));
  box-shadow:
    0 0 90px rgba(90, 184, 122, .22),
    0 30px 70px rgba(0, 0, 0, .7);
  animation: tfmSylCertRise .8s cubic-bezier(.2, .9, .3, 1);
  overflow: hidden;
}
@keyframes tfmSylCertRise {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.tfm-syl-cert__glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(245, 230, 168, .14), transparent 62%);
  animation: tfmSylBreathe 8s ease-in-out infinite;
}
.tfm-syl-cert > *:not(.tfm-syl-cert__glow) {
  position: relative;
  z-index: 2;
}

.tfm-syl-cert__seal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  color: var(--syl-gold, #f5e6a8);
  text-shadow: 0 0 24px rgba(245, 230, 168, .5);
  margin-bottom: .6rem;
}
.tfm-syl-cert__eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--academy-accent-soft, #a5e8b8);
  opacity: .8;
}
.tfm-syl-cert__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 500;
  color: #f0e8d8;
  margin: .8rem 0 .3rem;
  line-height: 1.2;
}
.tfm-syl-cert__line {
  width: 70px;
  height: 1px;
  margin: 1.1rem auto;
  background: linear-gradient(90deg, transparent, #f5e6a8, transparent);
}
.tfm-syl-cert__text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: #ddd4f0;
  margin: 0 0 1.4rem;
}
.tfm-syl-cert__text em {
  color: #a5e8b8;
  font-style: normal;
}
.tfm-syl-cert__date {
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(154, 143, 187, .7);
}
.tfm-syl-cert__link {
  display: block;
  margin-top: 1.2rem;
  font-family: 'Jost', sans-serif;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a5e8b8;
  text-decoration: none;
  border-bottom: 1px solid rgba(165, 232, 184, .3);
  padding-bottom: .2rem;
  width: fit-content;
  margin-inline: auto;
}
.tfm-syl-cert__link:hover {
  color: #f5e6a8;
  border-bottom-color: rgba(245, 230, 168, .5);
}
.tfm-syl-cert .tfm-syl-enter {
  margin-top: 1.6rem;
}

/* ============================================================
   9. TAGESZEIT-VARIANTEN
   Reagiert auf die Body-Klassen des globalen Color-Theme-JS.
   Nur das Pergament und der Schein ändern sich — die Siegel-Leiste
   bleibt konstant, damit die Navigation zu jeder Tageszeit gleich
   lesbar ist.
   ============================================================ */

body.tfm-time-sunrise .tfm-syl-root {
  --syl-paper-a: rgba(52, 30, 52, .94);
  --syl-paper-b: rgba(34, 20, 42, .94);
}
body.tfm-time-sunset .tfm-syl-root {
  --syl-paper-a: rgba(56, 28, 48, .95);
  --syl-paper-b: rgba(38, 20, 38, .95);
}
body.tfm-time-night .tfm-syl-root {
  --syl-paper-a: rgba(20, 14, 42, .96);
  --syl-paper-b: rgba(14, 10, 32, .96);
}
body.tfm-time-night .tfm-syl-panel {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, .78),
    inset 0 0 60px rgba(60, 40, 160, .09);
}
/* Nachts ist der Schein etwas kräftiger — bei Tag würde derselbe Wert
   im helleren Umfeld untergehen. */
body.tfm-time-night .tfm-syl-breathe {
  background: radial-gradient(ellipse at 50% 45%, rgba(90, 184, 122, .2), transparent 62%);
}

/* ============================================================
   10. RESPONSIVE + BEWEGUNGSREDUKTION
   ============================================================ */

@media (max-width: 820px) {
  .tfm-syl-panel.is-active {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .tfm-syl-panel {
    padding: 1.8rem 1.5rem;
  }
  .tfm-syl-cover {
    width: 132px;
    height: 176px;
  }
  .tfm-syl-title {
    font-size: 1.75rem;
  }
  /* Auf Mobil kein interner Scrollbereich — zwei ineinander liegende
     Scrollflächen sind auf Touch praktisch nicht bedienbar. Der
     Wärme-Verlauf fällt dann automatisch auf den Seiten-Scroll zurück
     (siehe tfm-academy-syllabus.js). */
  .tfm-syl-reader {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  .tfm-syl-vine {
    width: 38px;
    height: 38px;
  }
  .tfm-syl-memo__btn {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .tfm-syl-strip__scroll { padding: 1.6rem 1rem 1.2rem; }
  .tfm-syl-seal { flex: 1 0 116px; }
  .tfm-syl-cert { padding: 2.2rem 1.4rem 1.8rem; }
  .tfm-syl-cert__title { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-syl-strip.is-unrolling,
  .tfm-syl-rail.is-unrolling .tfm-syl-seal,
  .tfm-syl-panel.is-switching,
  .tfm-syl-panel.is-switching .tfm-syl-ink,
  .tfm-syl-panel.is-switching .tfm-syl-vine,
  .tfm-syl-breathe,
  .tfm-syl-cover img,
  .tfm-syl-memo,
  .tfm-syl-cert,
  .tfm-syl-cert__glow {
    animation: none !important;
  }
  /* Der Wärme-Verlauf bleibt erhalten, springt aber ohne Übergang —
     er ist Information (Lesefortschritt), keine Dekoration. */
  .tfm-syl-warm { transition: none; }
}