/*
 * TFM Town Square — Hauptseite Styling
 * /wp-content/themes/blocksy-child/css/tfm-townsquare.css
 *
 * Geladen auf: die Town-Square-Hauptseite (via php/tfm-townsquare.php)
 *
 * FARBEN: Nutzt ausschließlich die bestehenden globalen Variablen aus
 * eurer "TFM Color Theme CSS" — --area-accent / --area-accent-soft /
 * --area-accent-glow. Diese werden automatisch korrekt, sobald die
 * Seite body.tfm-area-square trägt (das übernimmt tfm-townsquare.php),
 * inklusive aller Tageszeit-Varianten — dafür ist hier NICHTS weiter
 * nötig, das globale System kümmert sich komplett selbst darum.
 *
 * Es gibt dort kein RGB-Tripel zum Selberbauen von Zwischen-
 * Transparenzwerten — für Opazitäten, die --area-accent-glow nicht
 * schon fertig mitbringt, wird deshalb color-mix() verwendet
 * (von allen gängigen Browsern unterstützt).
 *
 * ── STRUKTUR ──────────────────────────────────────────────────
 *  1. Hero-Textstile
 *  2. Town-Crier-Bereich (falls nicht als eigenständiges HTML-Widget
 *     genutzt, siehe town-crier-widget.html)
 *  3. Places — Elementor-Accordion-Styling (Market Street / Quiet Corner)
 *  4. Sub-Kacheln + Schaufenster-Bausteine (innerhalb der Accordion-Panels)
 *  5. Trophy Hall (eigenständige Karte)
 *  6. Allgemeine Bausteine: Spotlight-Hover, Parallax-Vorbereitung
 *  7. Atmosphäre — Ambient-Partikel + wanderndes Detail (per JS injiziert)
 *  8. Responsive + Bewegungsreduktion
 */

/* ============================================================
   1. HERO-TEXTSTILE
   An Elementor Heading/Text-Widgets im Hero-Container vergeben.
   Wildcard " *" aus demselben Grund wie überall sonst: Elementor
   setzt die Klasse auf den äußeren Wrapper, der Text steckt
   verschachtelt (z.B. <h1 class="elementor-heading-title">).
   ============================================================ */

.tfm-sq-hero-eyebrow,
.tfm-sq-hero-eyebrow * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--area-accent-soft) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7) !important;
}

.tfm-sq-hero-title,
.tfm-sq-hero-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  color: var(--area-accent-soft) !important;
  letter-spacing: 0.01em !important;
}
/* text-shadow bewusst NICHT im Wildcard — siehe tfm-academy.css,
   Begründung "Vererbung statt direkt am Kind-Element setzen", damit
   du den Schatten in Elementor selbst frei einstellen kannst. */
.tfm-sq-hero-title {
  text-shadow:
    0 4px 18px rgba(0, 0, 0, .9),
    0 1px 5px rgba(0, 0, 0, 1);
}

.tfm-sq-hero-subtitle,
.tfm-sq-hero-subtitle * {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 300 !important;
  color: var(--body-text, #e4ddf0) !important;
}
.tfm-sq-hero-subtitle {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

/* ============================================================
   2. TOWN-CRIER-BEREICH
   Nur relevant, falls du den Banner NICHT über das eigenständige
   town-crier-widget.html baust, sondern lieber aus Elementor-
   Widgets zusammensetzt (Container + Icon + Heading + Text).
   ============================================================ */

.tfm-sq-crier {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  background: rgba(30, 22, 52, 0.72);
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent);
  border-radius: 14px;
  box-shadow: 0 0 30px -8px var(--area-accent-glow);
}
.tfm-sq-crier > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
}
.tfm-sq-crier-glyph,
.tfm-sq-crier-glyph * {
  color: var(--area-accent-soft) !important;
  font-family: 'Cormorant Garamond', serif !important;
}
.tfm-sq-crier-label,
.tfm-sq-crier-label * {
  font-family: 'Jost', sans-serif !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--area-accent-soft) !important;
  font-weight: 600 !important;
}
.tfm-sq-crier-text,
.tfm-sq-crier-text * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.08rem !important;
  color: var(--ink, #f6f1ea) !important;
}

/* ============================================================
   3. PLACES — ELEMENTOR-ACCORDION-STYLING
   Klasse (z.B. "tfm-sq-place") auf das Accordion-WIDGET selbst
   legen (Advanced → CSS Classes). Alles hier zielt auf Elementors
   eigene, intern erzeugte Klassen (klassisches "Accordion"-Widget,
   nicht "Nested Accordion") — falls sich das optisch nicht wie
   erwartet verhält, per DevTools die tatsächlichen Klassennamen
   prüfen, dann passen wir die Selektoren gezielt an.
   ============================================================ */

.tfm-sq-place {
  background: rgba(30, 22, 52, 0.72) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.tfm-sq-place:hover {
  border-color: color-mix(in srgb, var(--area-accent) 45%, transparent) !important;
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.55), 0 0 26px -10px var(--area-accent-glow);
  transform: translateY(-3px);
}

/* Einzelnes Accordion-Item (natives <details>): kein eigener Rahmen
   zwischen den Panels, die äußere .tfm-sq-place Box reicht als
   Umrandung. list-style/marker-Reset, weil <summary> browserseitig
   einen eigenen Aufklapp-Pfeil mitbringt, den Elementor zwar meist
   schon unterdrückt, aber sicherheitshalber hier nochmal explizit. */
.tfm-sq-place .e-n-accordion-item {
  border: none !important;
  background: transparent !important;
}

/* Panel-Kopf (Klick-Bereich = <summary>) */
.tfm-sq-place .e-n-accordion-item-title {
  padding: 20px 22px !important;
  list-style: none !important;
  /* Elementors Standardrahmen (hellgrau, #D5D8DC) — die äußere
     .tfm-sq-place Box ist die einzige Umrandung. */
  border: none !important;
}
.tfm-sq-place .e-n-accordion-item-title::marker,
.tfm-sq-place .e-n-accordion-item-title::-webkit-details-marker {
  display: none !important;
}
.tfm-sq-place .e-n-accordion-item-title,
.tfm-sq-place .e-n-accordion-item-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--ink, #f6f1ea) !important;
}
.tfm-sq-place .e-n-accordion-item-title-icon,
.tfm-sq-place .e-n-accordion-item-title-icon * {
  color: var(--area-accent-soft) !important;
  fill: var(--area-accent-soft) !important;
}

/* Panel-Inhalt: Der Inhaltsbereich ist ein ganz normaler Elementor-
   Container, direktes Kind des <details>-Elements (per DevTools-Ausgabe
   bestätigt — die frühere Klasse e-n-accordion-item-content existiert
   bei dir nicht). Hier wird nur Elementors hellgrauer Standardrahmen
   entfernt. Innenabstände stellst du wie gewohnt selbst im Container
   unter Layout bzw. Advanced ein, dafür erzwingt das CSS nichts. */
.tfm-sq-place .e-n-accordion-item > .e-con,
.tfm-sq-place .e-n-accordion-item > .e-con-full {
  border: none !important;
}

/* ============================================================
   4. SUB-KACHELN + SCHAUFENSTER
   Innerhalb eines Accordion-Panels frei mit Elementor-Containern
   aufgebaut. Eine Sub-Kachel = ein Container mit dieser Klasse,
   enthält Heading + die passenden Schaufenster-Bausteine darunter.
   ============================================================ */

.tfm-sq-subtile {
  background: rgba(0, 0, 0, .18) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
  border-radius: 10px !important;
}
.tfm-sq-subtile-title,
.tfm-sq-subtile-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--ink, #f6f1ea) !important;
}
/* Small star in front and a thin accent line below. Pseudo-elements
   are not matched by the wildcard above, so they carry their own
   declarations. */
.tfm-sq-subtile-title .elementor-heading-title::before {
  content: '\2726';
  font-size: .5em;
  vertical-align: .35em;
  margin-right: .6em;
  color: var(--area-accent-soft);
}
.tfm-sq-subtile-title .elementor-heading-title::after {
  content: '';
  display: block;
  width: 56px;
  /* 2px instead of 1px: a 1px line on a fractional pixel position is
     smeared over two pixel rows and becomes almost invisible until a
     repaint (e.g. a hover transform) snaps it to a full row. */
  height: 2px;
  margin-top: .45rem;
  background: linear-gradient(90deg, var(--area-accent), transparent);
}

/* Schaufenster-Variante A: Thumbnail-Reihe (z.B. Games, Inspirations) */
.tfm-sq-showcase-label,
.tfm-sq-showcase-label * {
  font-family: 'Jost', sans-serif !important;
  font-size: .62rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--area-accent-soft) !important;
  font-weight: 600 !important;
  opacity: .85;
}
.tfm-sq-showcase-thumbs {
  display: flex !important;
  gap: 7px !important;
}
.tfm-sq-showcase-thumbs > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 7px !important;
}
/* Für echte Bilder (Elementor Image-Widget) statt Platzhalter: einfach
   die Breite/Höhe im Image-Widget selbst einstellen, diese Klasse
   kümmert sich nur um die Ecken-Rundung + den Rahmen. */
.tfm-sq-showcase-thumb img {
  border-radius: 6px !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
}

/* Titel unter einem Thumbnail: Heading-Widget im Loop Item (Dynamic
   Tag "Post Title"), Klasse auf das Heading-Widget legen. Überschreibt
   bewusst die große Standard-Überschrift des Themes. */
.tfm-sq-showcase-caption,
.tfm-sq-showcase-caption * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: .88rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--body-text, #e4ddf0) !important;
  margin: 0 !important;
}

/* Schaufenster-Variante B: Textzeilen (z.B. Mantra der Woche) */
.tfm-sq-showcase-text,
.tfm-sq-showcase-text * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: .92rem !important;
  color: var(--body-text, #e4ddf0) !important;
  line-height: 1.6 !important;
}

/* Schaufenster-Variante C: Checkliste (z.B. offene Aufgaben) — am
   einfachsten mit Elementors Icon-List-Widget umzusetzen, diese
   Klasse passt nur Icon-Farbe + Textgröße an. */
.tfm-sq-showcase-checklist .elementor-icon-list-icon,
.tfm-sq-showcase-checklist .elementor-icon-list-icon * {
  color: var(--area-accent-soft) !important;
}
.tfm-sq-showcase-checklist .elementor-icon-list-text,
.tfm-sq-showcase-checklist .elementor-icon-list-text * {
  font-size: .82rem !important;
  color: var(--body-text, #e4ddf0) !important;
}

/* Aufgaben-Zähler-Zeile (Dynamic Tag für die Zahl selbst, siehe PHP) */
.tfm-sq-task-tracker,
.tfm-sq-task-tracker * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: .86rem !important;
  color: var(--area-accent-soft) !important;
}
.tfm-sq-task-tracker b {
  color: var(--ink, #f6f1ea) !important;
  font-style: normal !important;
}

/* Sub-tile button. Padding is intentionally NOT forced, set it in
   Elementor (Style tab > Button > Padding). The arrow comes from
   ::after on the button text, so the label itself stays editable.
   For more presence set the button alignment to "Justified" in
   Elementor (full width). */
.tfm-sq-sub-btn .elementor-button,
.tfm-sq-sub-btn .elementor-button * {
  border-color: color-mix(in srgb, var(--area-accent) 40%, transparent) !important;
  color: var(--area-accent-soft) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.tfm-sq-sub-btn .elementor-button * {
  background: transparent !important;
}
.tfm-sq-sub-btn .elementor-button {
  background: color-mix(in srgb, var(--area-accent) 10%, transparent) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 8px !important;
  padding: 10px 18px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.tfm-sq-sub-btn .elementor-button-text::after {
  content: '\2192';
  display: inline-block;
  margin-left: .7em;
  transition: transform .25s ease;
}
.tfm-sq-sub-btn .elementor-button:hover {
  background: color-mix(in srgb, var(--area-accent) 22%, transparent) !important;
  border-color: var(--area-accent) !important;
  color: var(--ink, #f6f1ea) !important;
  box-shadow: 0 0 18px -4px var(--area-accent-glow) !important;
}
.tfm-sq-sub-btn .elementor-button:hover * {
  color: var(--ink, #f6f1ea) !important;
}
.tfm-sq-sub-btn .elementor-button:hover .elementor-button-text::after {
  transform: translateX(4px);
}

/* ---- Framed loop item (Games / Inspirations) ----
   Class goes on the ROOT CONTAINER of the Loop Item template, so image
   and caption sit together in one card. Set the inner padding (about
   8px) on that container in Elementor, the CSS only draws the frame. */
.tfm-sq-showcase-item {
  background: rgba(0, 0, 0, .2) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
  border-radius: 10px !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tfm-sq-showcase-item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--area-accent) 45%, transparent) !important;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6), 0 0 18px -8px var(--area-accent-glow);
}
.tfm-sq-showcase-item .tfm-sq-showcase-thumb .elementor-widget-container {
  overflow: hidden;
  border-radius: 6px;
}
.tfm-sq-showcase-item .tfm-sq-showcase-thumb img {
  border: none !important;
  transition: transform .4s ease;
}
.tfm-sq-showcase-item:hover .tfm-sq-showcase-thumb img {
  transform: scale(1.06);
}

/* ---- Daily Task: task row ----
   One container per task (today's task and the two previous ones use the
   same row). Elementor settings for the row: direction Row, vertical
   alignment Center, gap about 12px, padding about 12px 16px. The JS puts
   a pin in front and the status box at the end (see initTaskRows in the
   JS file), so the pin and box are real elements and not ::before, which
   Elementor containers use for their own background overlay. */
.tfm-sq-taskrow {
  background: color-mix(in srgb, var(--area-accent) 6%, rgba(30, 22, 52, .7)) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 22%, transparent) !important;
  border-radius: 10px !important;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.tfm-sq-taskrow:hover {
  border-color: color-mix(in srgb, var(--area-accent) 45%, transparent) !important;
  box-shadow: 0 0 18px -8px var(--area-accent-glow);
}
.tfm-sq-taskrow.is-empty {
  display: none !important;
}

/* Title widget inside the row: takes the free space between pin and label. */
/* Elementor gives widgets inside a row container flex-grow: 1 by default, so
   all widgets stretch evenly. For this row the title has to take the free
   space and everything else stays compact at the right, hence !important
   on the flex values of title and label. */
.tfm-sq-taskrow-title {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
}
.tfm-sq-taskrow-title,
.tfm-sq-taskrow-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--ink, #f6f1ea) !important;
  text-decoration: none !important;
  transition: opacity .25s ease;
}

/* Pin (injected by JS). Slightly tilted like a pushed-in pin; remove the
   rotate() to get it upright. Fills with the accent color once done. */
.tfm-sq-pin {
  display: inline-flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--area-accent-soft);
  opacity: .8;
  transform: rotate(28deg);
  transition: color .25s ease, opacity .25s ease, filter .25s ease;
}
.tfm-sq-pin svg {
  width: 100%;
  height: 100%;
}
.tfm-sq-taskrow.is-done .tfm-sq-pin {
  color: var(--area-accent);
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--area-accent-glow));
}

/* "Abgeschlossen" text widget, plain label next to the status box. */
.tfm-sq-check-label,
.tfm-sq-check-label * {
  font-family: 'Jost', sans-serif !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--area-accent-soft) !important;
  white-space: nowrap;
}
.tfm-sq-check-label {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto;
}

/* Optional carrier of the task ID (Dynamic Tag "TFM: Aufgabe – ID"). Hidden
   on the website, but visible in the Elementor editor so it can be edited. */
body:not(.elementor-editor-active) .tfm-sq-task-id {
  display: none !important;
}

/* Status box (injected by JS). Display only: it shows whether the logged-in
   user completed the task. Ticking happens on the task's single page. */
.tfm-sq-check {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid color-mix(in srgb, var(--area-accent) 55%, transparent);
  border-radius: 6px;
  background: transparent;
  color: transparent;
  font-size: .8rem;
  line-height: 1;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
/* Without a label widget the box pushes itself to the right edge. */
.tfm-sq-check--solo {
  margin-left: auto;
}
.tfm-sq-taskrow.is-done .tfm-sq-check {
  background: var(--area-accent);
  border-color: var(--area-accent);
  color: #0d0a1a;
}

/* Done row: calmer title, everything else stays readable. */
.tfm-sq-taskrow.is-done .tfm-sq-taskrow-title,
.tfm-sq-taskrow.is-done .tfm-sq-taskrow-title * {
  opacity: .62;
}

/* ---- Mantra: text that slowly fades out ----
   Class on the Text widget that carries the excerpt (Dynamic Tag
   "TFM: Neuester Beitrag – Kurztext"). The text starts fully visible and
   fades toward the bottom. min-height reserves about three lines so even
   a one-line mantra sits in the solid part; max-height cuts very long
   excerpts, which then vanish into the fade. white-space keeps the line
   breaks of the excerpt (set "Max. Wörter" to 0 in the tag, otherwise the
   tag flattens them). */
.tfm-sq-mantra-fade,
.tfm-sq-mantra-fade * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--ink, #f6f1ea) !important;
  white-space: pre-line;
}
.tfm-sq-mantra-fade {
  min-height: 5.2em;
  max-height: 6.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
}

/* ============================================================
   5. TROPHY HALL — eigenständige Karte, kein Accordion nötig
   ============================================================ */

.tfm-sq-solo {
  background: rgba(30, 22, 52, 0.72) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
  border-radius: 14px !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.tfm-sq-solo:hover {
  border-color: color-mix(in srgb, var(--area-accent) 45%, transparent) !important;
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.55), 0 0 26px -10px var(--area-accent-glow);
  transform: translateY(-3px);
}

/* ============================================================
   5b. ARCHIVE — back link, cards, pagination
   Used by the archive templates (and later the single pages) of Games,
   Inspirations, Mantras and Daily Tasks.
   ============================================================ */

/* "Back to Town Square": an Elementor button styled as a quiet text link.
   Padding is not forced, set it in Elementor if needed. */
.tfm-sq-back .elementor-button,
.tfm-sq-back .elementor-button * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: 'Jost', sans-serif !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--area-accent-soft) !important;
}
.tfm-sq-back .elementor-button {
  padding: 4px 0;
}
.tfm-sq-back .elementor-button-text::before {
  content: '\2190';
  display: inline-block;
  margin-right: .7em;
  transition: transform .25s ease;
}
.tfm-sq-back .elementor-button:hover,
.tfm-sq-back .elementor-button:hover * {
  color: var(--ink, #f6f1ea) !important;
}
.tfm-sq-back .elementor-button:hover .elementor-button-text::before {
  transform: translateX(-4px);
}

/* Archive card: class on the ROOT CONTAINER of the Loop Item. Set direction
   Column and the inner padding of the text area in Elementor. */
.tfm-sq-card {
  background: rgba(30, 22, 52, 0.72) !important;
  border: 1px solid color-mix(in srgb, var(--area-accent) 18%, transparent) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tfm-sq-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--area-accent) 45%, transparent) !important;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .55), 0 0 26px -10px var(--area-accent-glow);
}

/* Image widget of the card (Dynamic Tag "Featured Image"). Set the aspect
   ratio (e.g. 4:3) and the link in Elementor. */
.tfm-sq-card-image .elementor-widget-container {
  overflow: hidden;
}
.tfm-sq-card-image img {
  width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tfm-sq-card:hover .tfm-sq-card-image img {
  transform: scale(1.05);
}

.tfm-sq-card-title,
.tfm-sq-card-title * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: normal !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--ink, #f6f1ea) !important;
  text-decoration: none !important;
}

/* Short text of the card, cut after five lines. Add the extra class
   tfm-sq-card-text--full to show the whole text (e.g. for mantras). */
.tfm-sq-card-text,
.tfm-sq-card-text * {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--body-text, #e4ddf0) !important;
}
.tfm-sq-card-text .elementor-widget-container,
.tfm-sq-card-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.tfm-sq-card-text--full .elementor-widget-container,
.tfm-sq-card-text--full p {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: pre-line;
}

/* Loop Grid widget (class tfm-sq-grid): pagination in the area colors. */
.tfm-sq-grid .elementor-pagination {
  text-align: center;
}
.tfm-sq-grid .elementor-pagination .page-numbers {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--muted, #b6afc7);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tfm-sq-grid .elementor-pagination a.page-numbers:hover {
  color: var(--area-accent-soft);
  border-color: color-mix(in srgb, var(--area-accent) 40%, transparent);
}
.tfm-sq-grid .elementor-pagination .page-numbers.current {
  color: var(--ink, #f6f1ea);
  border-color: color-mix(in srgb, var(--area-accent) 55%, transparent);
  background: color-mix(in srgb, var(--area-accent) 12%, transparent);
}

/* ============================================================
   6. ALLGEMEINE BAUSTEINE — Spotlight + Parallax
   Diese beiden Klassen reichen aus, um die JS-Effekte zu aktivieren
   (siehe tfm-townsquare.js) — einfach auf den gewünschten Elementor-
   Container legen, der Rest passiert automatisch.
   ============================================================ */

.tfm-sq-spotlight {
  position: relative !important;
}
.tfm-sq-spotlight::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: opacity .3s ease;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--area-accent) 14%, transparent), transparent 70%);
}
.tfm-sq-spotlight:hover::before { opacity: 1; }
/* Direkte Kind-Elemente über die Spotlight-Ebene heben, damit Klicks
   weiterhin ankommen (gleiches Prinzip wie bei den Academy-Buttons). */
.tfm-sq-spotlight > .e-con-inner,
.tfm-sq-spotlight > .elementor-widget-wrap {
  position: relative;
  z-index: 1;
}

/* .tfm-sq-parallax: JS liest optional data-speed (0–1, Default .3) vom
   Element selbst — in Elementor über Advanced → Eigene Attribute setzen:
   data-speed | 0.4 */
.tfm-sq-parallax {
  will-change: transform;
}

/* ============================================================
   7. ATMOSPHÄRE — Ambient-Partikel + wanderndes Detail
   Werden per JS injiziert, sobald irgendwo auf der Seite ein
   Element mit der Klasse .tfm-sq-root existiert (auf den äußersten
   Elementor-Container der Seite legen). Kein manueller Aufbau nötig.
   ============================================================ */

.tfm-sq-atmosphere { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.tfm-sq-particle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--area-accent) 90%, transparent), transparent 70%);
  opacity: .55;
  animation: tfmSqFloatUp linear infinite;
}
body.tfm-area-square.tfm-time-night .tfm-sq-particle { animation-name: tfmSqTwinkle; }
@keyframes tfmSqFloatUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .5; }
  100% { transform: translateY(-140px) translateX(12px); opacity: 0; }
}
@keyframes tfmSqTwinkle {
  0%, 100% { opacity: .15; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.3); }
}

.tfm-sq-bird-layer { position: fixed; top: 8%; left: 0; width: 100%; z-index: -1; pointer-events: none; }
.tfm-sq-bird { position: absolute; width: 46px; height: 22px; color: color-mix(in srgb, var(--area-accent) 50%, transparent); left: -60px; opacity: 0; }
.tfm-sq-bird.is-flying { animation: tfmSqBirdFly 14s linear forwards; }
.tfm-sq-bird svg { width: 100%; height: 100%; }
@keyframes tfmSqBirdFly {
  0%   { left: -60px; opacity: 0; transform: translateY(0); }
  6%   { opacity: 1; }
  50%  { transform: translateY(-26px); }
  94%  { opacity: 1; }
  100% { left: 106%; opacity: 0; transform: translateY(4px); }
}

/* ============================================================
   8. RESPONSIVE + BEWEGUNGSREDUKTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .tfm-sq-particle,
  .tfm-sq-bird.is-flying {
    animation: none !important;
    opacity: 0 !important;
  }
  .tfm-sq-parallax,
  .tfm-sq-showcase-item,
  .tfm-sq-card,
  .tfm-sq-card-image img,
  .tfm-sq-pin {
    transform: none !important;
  }
}