/*
 * TFM Enchanting Village — Page Styles v2
 * /wp-content/themes/blocksy-child/css/tfm-village.css
 *
 * Baut auf dem globalen System auf:
 *   --area-accent / --area-accent-soft / --area-accent-glow  (Color Theme CSS)
 *   --text-body / --text-dim / --cream                       (Site Settings CSS)
 *   --border-subtle / --border-glow / --bg-page              (Site Settings CSS)
 *   tfm-time-night / tfm-time-sunrise / tfm-time-sunset      (Color Theme JS)
 *   tfm-area-village                                          (Color Theme JS)
 *
 * Hier NUR Village-spezifische Stile und District-Farben
 * die nicht im globalen System existieren.
 */

/* ============================================================
   1. DISTRICT-FARBEN (nur die 5 die NICHT der Village-Akzent sind)
   Wanderers = --area-accent (global, automatisch Tageszeit-aware)
   ============================================================ */
:root {
  --feral:         #8b5a2b;
  --feral-s:       #b8834a;
  --devotion:      #a8623f;
  --devotion-s:    #d4936f;
  --temptations:   #8b2252;
  --temptations-s: #c4547a;
  --ecstasy:       #7b4a9e;
  --ecstasy-s:     #b07ad4;
  --archives:      #4a6080;
  --archives-s:    #7a9ac0;
}

/* ============================================================
   2. WAYPOINT BUTTON (position: fixed, top-right)
   ============================================================ */
.tfm-waypoint-wrap {
  position: fixed;
  bottom: 5.5rem;
  right: 5rem;
  z-index: 9999;
}
.tfm-waypoint__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.10);
  border: 1px solid rgba(212, 168, 67, 0.38);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tfm-waypoint__btn:hover {
  background: rgba(212, 168, 67, 0.20);
  border-color: var(--area-accent-soft);
  box-shadow: 0 0 16px var(--area-accent-glow);
}
.tfm-waypoint__btn.is-open {
  background: rgba(212, 168, 67, 0.22);
  border-color: var(--area-accent);
  box-shadow: 0 0 20px var(--area-accent-glow);
}
.tfm-waypoint__btn svg {
  width: 19px;
  height: 19px;
  stroke: var(--area-accent-soft);
}

/* ============================================================
   3. WAYPOINT POPUP
   ============================================================ */
.tfm-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 1.5rem);
  background: rgba(12, 7, 26, 0.98);
  border: 1px solid rgba(212, 168, 67, 0.38);
  border-radius: 14px;
  padding: 1.4rem;
  z-index: 200;
  display: none;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6);
}
.tfm-popup.is-open {
  display: block;
  animation: tfmPopIn 0.22s ease;
}
@keyframes tfmPopIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tfm-popup__inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.tfm-popup__figure { flex: 0 0 auto; }
.tfm-popup__body   { flex: 1; min-width: 0; }
.tfm-popup__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.96rem;
  color: var(--area-accent-soft);
  margin: 0 0 0.9rem;
  line-height: 1.4;
}
.tfm-popup__empty {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.65;
  margin: 0;
}
.tfm-stat { margin-bottom: 0.72rem; }
.tfm-stat:last-child { margin-bottom: 0; }
.tfm-stat__name {
  display: block;
  font-size: 0.59rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.18rem;
  font-family: 'Jost', sans-serif;
}
.tfm-stat__row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.tfm-stat__pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  line-height: 1;
}
.tfm-stat__time {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
}
.tfm-stat--wanderers   .tfm-stat__pct { color: var(--area-accent-soft); }
.tfm-stat--feral       .tfm-stat__pct { color: var(--feral-s); }
.tfm-stat--devotion    .tfm-stat__pct { color: var(--devotion-s); }
.tfm-stat--temptations .tfm-stat__pct { color: var(--temptations-s); }
.tfm-stat--ecstasy     .tfm-stat__pct { color: var(--ecstasy-s); }
.tfm-stat--archives    .tfm-stat__pct { color: var(--archives-s); }

.tfm-popup__divider { height: 1px; background: var(--border-subtle); margin: 0.85rem 0; }
.tfm-popup__reset {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.tfm-popup__reset:hover { color: var(--text-body); }

/* ============================================================
   4. HERO SECTION — Elementor Container Build
   Struktur: .tfm-hero Container (outer) → .tfm-hero__text Container (inner)
   Hintergrundbild wird in Elementor gesetzt (einfach austauschbar).
   CSS liefert: Fallback-Gradient, Tageszeit-Tint, unterer Overlay.
   ============================================================ */

.tfm-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 320px;
  max-height: 520px;
  /* Fallback-Hintergrund wenn kein Bild in Elementor gesetzt */
  background-color: var(--time-bg, #0d0a1a);
}

/* Tageszeit-Tint — liegt als semi-transparente Schicht über dem Bild */
.tfm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 1.4s ease;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    transparent         55%
  );
}
body.tfm-time-night   .tfm-hero::before { background: rgba(7,   5, 16, 0.32); }
body.tfm-time-sunrise .tfm-hero::before { background: rgba(15, 12, 28, 0.14); }
body.tfm-time-sunset  .tfm-hero::before { background: rgba(30, 14, 30, 0.20); }

/* Unterer dunkler Gradient — immer aktiv, für Lesbarkeit der Texte */
.tfm-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 7, 20, 0.88) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Text-Container — Elementor setzt ihn via Justify Content ans untere Ende */
.tfm-hero__text {
  position: relative;
  z-index: 3;
  padding: 0 0 1.8rem 2.2rem;
  width: 100%;
}

/* Heading-Widget im Hero */
.tfm-hero__h1 .elementor-heading-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(1.8rem, 5vw, 3rem) !important;
  color: var(--area-accent-soft) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

/* Text-Widget (Untertitel) im Hero */
.tfm-hero__sub p {
  font-family: 'Jost', sans-serif !important;
  font-size: clamp(0.62rem, 1.5vw, 0.78rem) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  margin: 0 !important;
}

/* ============================================================
   5. LATEST POSTS STRIP
   ============================================================ */
.tfm-latest {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}
.tfm-latest__head {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.tfm-latest__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.tfm-post-card {
  display: none;
  flex-direction: row;
  background: rgba(18, 12, 34, 0.80);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
}
.tfm-post-card.is-active {
  display: flex;
  animation: tfmFadeIn 0.6s ease;
}
@keyframes tfmFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tfm-post-card__img {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
}
.tfm-post-card__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.tfm-post-card__img svg {
  width: 36px; height: 36px; opacity: 0.35;
  fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.tfm-post-card--wanderers   .tfm-post-card__img { background: linear-gradient(135deg, rgba(212,168,67, 0.22), rgba(10,6,22,0.92)); }
.tfm-post-card--feral       .tfm-post-card__img { background: linear-gradient(135deg, rgba(139,90, 43, 0.26), rgba(10,6,22,0.92)); }
.tfm-post-card--devotion    .tfm-post-card__img { background: linear-gradient(135deg, rgba(168,98, 63, 0.24), rgba(10,6,22,0.92)); }
.tfm-post-card--temptations .tfm-post-card__img { background: linear-gradient(135deg, rgba(139,34, 82, 0.24), rgba(10,6,22,0.92)); }
.tfm-post-card--ecstasy     .tfm-post-card__img { background: linear-gradient(135deg, rgba(123,74, 158,0.22), rgba(10,6,22,0.92)); }
.tfm-post-card--archives    .tfm-post-card__img { background: linear-gradient(135deg, rgba(74, 96, 128,0.22), rgba(10,6,22,0.92)); }
.tfm-post-card--wanderers   .tfm-post-card__img svg { stroke: var(--area-accent-soft); }
.tfm-post-card--feral       .tfm-post-card__img svg { stroke: var(--feral-s); }
.tfm-post-card--devotion    .tfm-post-card__img svg { stroke: var(--devotion-s); }
.tfm-post-card--temptations .tfm-post-card__img svg { stroke: var(--temptations-s); }
.tfm-post-card--ecstasy     .tfm-post-card__img svg { stroke: var(--ecstasy-s); }
.tfm-post-card--archives    .tfm-post-card__img svg { stroke: var(--archives-s); }

.tfm-post-card__body {
  flex: 1;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tfm-post-card__tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tfm-post-card--wanderers   .tfm-post-card__tag { color: var(--area-accent-soft); }
.tfm-post-card--feral       .tfm-post-card__tag { color: var(--feral-s); }
.tfm-post-card--devotion    .tfm-post-card__tag { color: var(--devotion-s); }
.tfm-post-card--temptations .tfm-post-card__tag { color: var(--temptations-s); }
.tfm-post-card--ecstasy     .tfm-post-card__tag { color: var(--ecstasy-s); }
.tfm-post-card--archives    .tfm-post-card__tag { color: var(--archives-s); }

.tfm-post-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 1.2rem; color: var(--cream); line-height: 1.3; margin: 0;
}
.tfm-post-card__excerpt {
  font-family: 'Jost', sans-serif;
  font-size: 0.79rem; color: var(--text-dim); line-height: 1.65; flex: 1; margin: 0;
}
.tfm-post-card__date {
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem; color: var(--text-dim); margin: 0;
}
.tfm-post-dots {
  display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.85rem;
}
.tfm-post-dot {
  width: 6px; height: 6px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.15); transition: background 0.3s ease; padding: 0;
}
.tfm-post-dot.is-active { background: var(--area-accent-soft); }

/* ============================================================
   6. VILLAGE CONTAINER + INTRO
   ============================================================ */
.tfm-village {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 3.5rem;
  font-family: 'Jost', sans-serif;
}
.tfm-intro { text-align: center; margin-bottom: 2.4rem; }
.tfm-intro p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.06rem; color: var(--text-dim);
  max-width: 420px; margin: 0 auto; line-height: 1.85;
}

/* ============================================================
   7. DISTRICT BANDS
   ============================================================ */
.tfm-band {
  position: relative; overflow: hidden;
  border-radius: 0 14px 14px 0;
  border-left: 3px solid transparent;
  padding: 1.4rem 1.6rem; margin-bottom: 1.2rem;
  transition: box-shadow 1.0s ease;
}
.tfm-band--wanderers   { background: rgba(212,168,67, 0.065); border-color: rgba(212,168,67, 0.50); }
.tfm-band--feral       { background: rgba(139,90, 43, 0.090); border-color: rgba(139,90, 43, 0.50); }
.tfm-band--devotion    { background: rgba(168,98, 63, 0.085); border-color: rgba(168,98, 63, 0.50); }
.tfm-band--temptations { background: rgba(139,34, 82, 0.085); border-color: rgba(139,34, 82, 0.50); }
.tfm-band--ecstasy     { background: rgba(123,74, 158,0.080); border-color: rgba(123,74, 158,0.50); }
.tfm-band--archives    { background: rgba(74, 96, 128,0.080); border-color: rgba(74, 96, 128,0.50); }

/* Tier glows */
.tfm-band--wanderers.t1   { box-shadow: -3px 0 26px rgba(212,168,67, 0.16); }
.tfm-band--wanderers.t2   { box-shadow: -3px 0 40px rgba(212,168,67, 0.30), inset 0 0 80px rgba(212,168,67, 0.035); }
.tfm-band--feral.t1       { box-shadow: -3px 0 26px rgba(139,90, 43, 0.18); }
.tfm-band--feral.t2       { box-shadow: -3px 0 40px rgba(139,90, 43, 0.32), inset 0 0 80px rgba(139,90, 43, 0.040); }
.tfm-band--devotion.t1    { box-shadow: -3px 0 26px rgba(168,98, 63, 0.18); }
.tfm-band--devotion.t2    { box-shadow: -3px 0 40px rgba(168,98, 63, 0.32), inset 0 0 80px rgba(168,98, 63, 0.040); }
.tfm-band--temptations.t1 { box-shadow: -3px 0 26px rgba(139,34, 82, 0.18); }
.tfm-band--temptations.t2 { box-shadow: -3px 0 40px rgba(139,34, 82, 0.30), inset 0 0 80px rgba(139,34, 82, 0.040); }
.tfm-band--ecstasy.t1     { box-shadow: -3px 0 26px rgba(123,74, 158,0.16); }
.tfm-band--ecstasy.t2     { box-shadow: -3px 0 40px rgba(123,74, 158,0.28), inset 0 0 80px rgba(123,74, 158,0.035); }
.tfm-band--archives.t1    { box-shadow: -3px 0 26px rgba(74, 96, 128,0.16); }
.tfm-band--archives.t2    { box-shadow: -3px 0 40px rgba(74, 96, 128,0.28), inset 0 0 80px rgba(74, 96, 128,0.035); }

/* Decorative background motif */
.tfm-band__motif {
  position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.8s ease;
  width: 90px; height: 90px;
}
.tfm-band.t1 .tfm-band__motif { opacity: 0.09; }
.tfm-band.t2 .tfm-band__motif { opacity: 0.20; }

/* Band text */
.tfm-band__name {
  position: relative; z-index: 2;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: 1.22rem; margin: 0 0 0.3rem;
}
.tfm-band--wanderers   .tfm-band__name { color: var(--area-accent-soft); }
.tfm-band--feral       .tfm-band__name { color: var(--feral-s); }
.tfm-band--devotion    .tfm-band__name { color: var(--devotion-s); }
.tfm-band--temptations .tfm-band__name { color: var(--temptations-s); }
.tfm-band--ecstasy     .tfm-band__name { color: var(--ecstasy-s); }
.tfm-band--archives    .tfm-band__name { color: var(--archives-s); }

.tfm-band__mood {
  position: relative; z-index: 2;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 0.9rem; color: var(--text-dim); margin: 0 0 1.1rem; min-height: 1.35em;
}

/* ============================================================
   8. TILE GRID
   ============================================================ */
.tfm-tiles {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem;
}
.tfm-tile {
  display: block; background: rgba(14, 9, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 10px;
  overflow: hidden; cursor: pointer; color: var(--text-body);
  text-decoration: none; transition: border-color 0.3s ease, transform 0.3s ease;
}
.tfm-tile:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); }
.tfm-tile__img {
  width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden;
}
.tfm-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-tile__img svg {
  width: 30px; height: 30px; opacity: 0.38;
  fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.tfm-band--wanderers   .tfm-tile__img { background: linear-gradient(155deg, rgba(212,168,67, 0.18), rgba(8,5,18,0.94)); }
.tfm-band--feral       .tfm-tile__img { background: linear-gradient(155deg, rgba(139,90, 43, 0.22), rgba(8,5,18,0.94)); }
.tfm-band--devotion    .tfm-tile__img { background: linear-gradient(155deg, rgba(168,98, 63, 0.20), rgba(8,5,18,0.94)); }
.tfm-band--temptations .tfm-tile__img { background: linear-gradient(155deg, rgba(139,34, 82, 0.20), rgba(8,5,18,0.94)); }
.tfm-band--ecstasy     .tfm-tile__img { background: linear-gradient(155deg, rgba(123,74, 158,0.18), rgba(8,5,18,0.94)); }
.tfm-band--archives    .tfm-tile__img { background: linear-gradient(155deg, rgba(74, 96, 128,0.18), rgba(8,5,18,0.94)); }
.tfm-band--wanderers   .tfm-tile__img svg { stroke: var(--area-accent-soft); }
.tfm-band--feral       .tfm-tile__img svg { stroke: var(--feral-s); }
.tfm-band--devotion    .tfm-tile__img svg { stroke: var(--devotion-s); }
.tfm-band--temptations .tfm-tile__img svg { stroke: var(--temptations-s); }
.tfm-band--ecstasy     .tfm-tile__img svg { stroke: var(--ecstasy-s); }
.tfm-band--archives    .tfm-tile__img svg { stroke: var(--archives-s); }

.tfm-tile__body { padding: 0.75rem 0.8rem; }
.tfm-tile__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.02rem; color: var(--cream); margin: 0 0 0.3rem; line-height: 1.2;
}
.tfm-tile__desc {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; color: var(--text-dim); line-height: 1.55; margin: 0;
}

/* Secret tile row */
.tfm-secret-row {
  position: relative; z-index: 2;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 1.0s ease, opacity 0.9s ease, margin-top 0.9s ease;
}
.tfm-band.t2 .tfm-secret-row { max-height: 130px; opacity: 1; margin-top: 0.85rem; }
.tfm-tile--secret {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 0.9rem; text-align: center;
  border-style: dashed !important; border-color: rgba(255, 255, 255, 0.12) !important;
  padding: 0.85rem; background: none;
}
.tfm-tile--secret .secret-glyph { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; opacity: 0.65; }
.tfm-band--wanderers   .tfm-tile--secret { color: var(--area-accent-soft); }
.tfm-band--feral       .tfm-tile--secret { color: var(--feral-s); }
.tfm-band--devotion    .tfm-tile--secret { color: var(--devotion-s); }
.tfm-band--temptations .tfm-tile--secret { color: var(--temptations-s); }
.tfm-band--ecstasy     .tfm-tile--secret { color: var(--ecstasy-s); }
.tfm-band--archives    .tfm-tile--secret { color: var(--archives-s); }

/* ============================================================
   9. AMBIENT PARTICLES
   ============================================================ */
.tfm-p {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.tfm-band--wanderers .tfm-p,
.tfm-band--devotion  .tfm-p,
.tfm-band--archives  .tfm-p { width: 4px; height: 4px; bottom: 14%; }
.tfm-band--wanderers .tfm-p { background: var(--area-accent-soft); }
.tfm-band--devotion  .tfm-p { background: var(--devotion-s); }
.tfm-band--archives  .tfm-p { background: var(--archives-s); }
.tfm-band--wanderers .tfm-p--base,
.tfm-band--devotion  .tfm-p--base,
.tfm-band--archives  .tfm-p--base { animation: tfmEmb var(--dur, 6s) ease-in infinite; }
.tfm-band--wanderers .tfm-p--t1,
.tfm-band--devotion  .tfm-p--t1,
.tfm-band--archives  .tfm-p--t1   { animation: tfmEmb var(--dur, 5s) ease-in infinite; }
.tfm-band--wanderers .tfm-p--t2,
.tfm-band--devotion  .tfm-p--t2,
.tfm-band--archives  .tfm-p--t2   { animation: tfmEmb var(--dur, 4.4s) ease-in infinite; }

.tfm-band--feral       .tfm-p,
.tfm-band--temptations .tfm-p {
  width: 54px; height: 22px; border-radius: 50%; filter: blur(2px); bottom: 4px;
}
.tfm-band--feral       .tfm-p { background: radial-gradient(circle, rgba(184,131,74,0.48), transparent 70%); }
.tfm-band--temptations .tfm-p { background: radial-gradient(circle, rgba(196,84,122,0.44), transparent 70%); }
.tfm-band--feral       .tfm-p--base,
.tfm-band--temptations .tfm-p--base { animation: tfmSmk var(--dur, 11s) ease-in-out infinite; }
.tfm-band--feral       .tfm-p--t1,
.tfm-band--temptations .tfm-p--t1   { animation: tfmSmk var(--dur, 8.5s) ease-in-out infinite; }
.tfm-band--feral       .tfm-p--t2,
.tfm-band--temptations .tfm-p--t2   { animation: tfmSmk var(--dur, 13s) ease-in-out infinite; }

.tfm-band--ecstasy .tfm-p { width: 5px; height: 5px; background: var(--ecstasy-s); top: -8px; }
.tfm-band--ecstasy .tfm-p--base { animation: tfmPet var(--dur, 8s)   linear infinite; }
.tfm-band--ecstasy .tfm-p--t1   { animation: tfmPet var(--dur, 6.2s) linear infinite; }
.tfm-band--ecstasy .tfm-p--t2   { animation: tfmPet var(--dur, 9.8s) linear infinite; }

.tfm-p--t1, .tfm-p--t2 { display: none; }
.tfm-band.t1 .tfm-p--t1, .tfm-band.t2 .tfm-p--t1 { display: block; }
.tfm-band.t2 .tfm-p--t2 { display: block; }

@keyframes tfmEmb {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 0.95; }
  85%  { opacity: 0; }
  100% { transform: translateY(-85px) scale(0.3); opacity: 0; }
}
@keyframes tfmSmk {
  0%   { transform: translate(0, 5px) scale(0.65); opacity: 0; }
  30%  { opacity: 0.52; }
  100% { transform: translate(46px, -56px) scale(1.45); opacity: 0; }
}
@keyframes tfmPet {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.88; }
  100% { transform: translate(-30px, 95px) rotate(185deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tfm-p { display: none !important; }
  .tfm-band__motif { transition: none; }
  .tfm-band__mood  { transition: none; }
  .tfm-secret-row  { transition: none; }
  .tfm-band        { transition: none; }
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .tfm-tiles { grid-template-columns: 1fr 1fr; }
  .tfm-post-card { flex-direction: column; }
  .tfm-post-card__img { flex: none; min-height: 90px; }
  .tfm-hero__text { left: 1.2rem; bottom: 1.2rem; }
  .tfm-village, .tfm-latest { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 420px) {
  .tfm-tiles { grid-template-columns: 1fr; }
}

/* ── Latest Posts Plugin Override ── */

/* Einzelne Karte */
.latest-post-selection article {
  background: rgba(18, 12, 34, 0.85) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.latest-post-selection article:hover {
  border-color: var(--area-accent-glow) !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(212, 168, 67, 0.12) !important;
}

/* Bild */
.latest-post-selection .article_image img {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Text-Bereich */
.latest-post-selection .article_info {
  padding: 1rem !important;
  background: transparent !important;
}

/* Titel */
.latest-post-selection .article__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
  margin: 0 0 0.6rem !important;
}

/* Read more Link */
.latest-post-selection .article_link.read-more {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  color: var(--area-accent-soft) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
}
.latest-post-selection .article_link.read-more:hover {
  color: var(--area-accent) !important;
}

/* ── Latest Posts Schriftart ── */
.latest-post-selection h3.article__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

/* ── Latest Posts — Goldene Akzente + Tageszeit ── */

/* Goldener Border immer sichtbar, subtil */
.latest-post-selection article {
  border: 1px solid rgba(212, 168, 67, 0.25) !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* Goldener Glow beim Hover */
.latest-post-selection article:hover {
  border-color: var(--area-accent) !important;
  box-shadow: 0 0 22px rgba(212, 168, 67, 0.18) !important;
  transform: translateY(-3px) !important;
}

/* Titel-Farbe via CSS-Variable — passt sich automatisch an Tageszeit an */
.latest-post-selection h3.article__title,
.latest-post-selection h3.article__title a {
  color: var(--area-accent-soft) !important;
}

/* Hintergrund per Tageszeit — überschreibt den hardcodierten Wert im Shortcode */
.latest-post-selection article {
  background: rgba(18, 6, 30, 0.88) !important;
}
body.tfm-time-night .latest-post-selection article {
  background: rgba(7, 5, 16, 0.92) !important;
}
body.tfm-time-sunrise .latest-post-selection article {
  background: rgba(15, 10, 28, 0.88) !important;
}
body.tfm-time-sunset .latest-post-selection article {
  background: rgba(18, 8, 24, 0.90) !important;
}