/* ===== Zeitgeist-Karte (Startseite, Annual Forum): Szene und Lampe der Zeitgeist-Seite =====
   Kleine Fassung des Finales von /zeitgeist: Die Lampe ruckelt und gluecht, dann steigt die
   Szene aus der Tuelle, mit drei Nebelschleiern. Ohne JavaScript oder bei reduzierter
   Bewegung ist das Bild einfach da. Quer- oder Hochformat je nach Bildschirm. */
@property --zgm-rv {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.mf-art.zg-mini {
  max-width: 840px;
}
.zg-mini__stage {
  --sx: 25.8%;
  --sy: 66.3%;
  position: relative;
  width: 100%;
  aspect-ratio: 3840 / 2161;
}
.mf-art.zg-mini .zg-mini__scene,
.mf-art.zg-mini .zg-mini__scene img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Raender laufen weich in die Karte aus, keine harte Bildkante */
.zg-mini__scene {
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.mf-art.zg-mini .zg-mini__lamp {
  position: absolute;
  z-index: 3;
  left: 1.589%;
  top: 65.433%;
  width: 24.323%;
  height: auto;
  transform-origin: 46% 96%;
  pointer-events: none;
}
.mf-art.zg-mini .zg-mini__lamp--v {
  display: none;
}
.zg-mini__mist {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.zg-mini__mist i {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 46%;
  aspect-ratio: 1;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255,250,240,.95), rgba(214,210,255,.55) 45%, rgba(214,210,255,0) 100%);
}
.zg-mini__mist i:nth-child(2) {
  background: radial-gradient(closest-side, rgba(255,236,214,.9), rgba(255,200,170,.45) 45%, rgba(255,200,170,0) 100%);
}
.zg-mini__mist i:nth-child(3) {
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(196,200,255,.5) 45%, rgba(196,200,255,0) 100%);
}

/* --- Hochformat --- */
@media (orientation: portrait) {
  .mf-art.zg-mini {
    max-width: 460px;
  }
  .zg-mini__stage {
    --sx: 37%;
    --sy: 80.3%;
    aspect-ratio: 1450 / 2049;
  }
  .zg-mini__scene {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .mf-art.zg-mini .zg-mini__lamp--h { display: none; }
  .mf-art.zg-mini .zg-mini__lamp--v {
    display: block;
    left: 2.828%;
    top: 79.844%;
    width: 34.69%;
  }
  .zg-mini__mist i {
    width: 30%;
    margin: -15% 0 0 -15%;
  }
}

/* --- Ausgangszustand (nur mit JavaScript): Szene noch in der Lampe --- */
.zg-mini--armed .zg-mini__scene {
  --zgm-rv: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 160px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 60px), transparent var(--zgm-rv)),
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 160px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 60px), transparent var(--zgm-rv)),
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect, intersect;
}
@media (orientation: portrait) {
  .zg-mini--armed .zg-mini__scene {
    -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 160px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 60px), transparent var(--zgm-rv)),
      linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 160px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 60px), transparent var(--zgm-rv)),
      linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}
/* Abspielen: Lampe ruckelt und gluecht, Szene steigt aus der Tuelle, Nebel quillt */
.zg-mini--armed.is-play .zg-mini__lamp {
  animation: zgmRub 1s cubic-bezier(.36,.07,.19,.97) 1 both, zgmGlow 2.6s ease-out 1 both;
}
.zg-mini--armed.is-play .zg-mini__scene {
  --zgm-rv: 1500px;
  transition: --zgm-rv 3.4s cubic-bezier(.45,0,.2,1) .55s;
}
.zg-mini--armed.is-play .zg-mini__mist i {
  animation: zgmMist 3s cubic-bezier(.3,0,.25,1) .5s 1 both;
}
.zg-mini--armed.is-play .zg-mini__mist i:nth-child(1) { --mx: 22%; --my: -18%; }
.zg-mini--armed.is-play .zg-mini__mist i:nth-child(2) { --mx: 48%; --my: -38%; animation-delay: .8s; }
.zg-mini--armed.is-play .zg-mini__mist i:nth-child(3) { --mx: 78%; --my: -56%; animation-delay: 1.1s; }
@media (orientation: portrait) {
  .zg-mini--armed.is-play .zg-mini__mist i:nth-child(1) { --mx: 18%; --my: -40%; }
  .zg-mini--armed.is-play .zg-mini__mist i:nth-child(2) { --mx: 40%; --my: -95%; }
  .zg-mini--armed.is-play .zg-mini__mist i:nth-child(3) { --mx: 60%; --my: -160%; }
}
@keyframes zgmRub{
  0%   { rotate: 0deg; translate: 0 0; }
  12%  { rotate: -5deg; translate: -2px 0; }
  26%  { rotate: 5deg; translate: 2px -2px; }
  40%  { rotate: -4deg; translate: -2px 0; }
  54%  { rotate: 3.5deg; translate: 1px -1px; }
  68%  { rotate: -2deg; translate: 0 0; }
  82%  { rotate: 1deg; }
  100% { rotate: 0deg; translate: 0 0; }
}
@keyframes zgmGlow{
  0%   { filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
  25%  { filter: drop-shadow(0 0 14px rgba(255,214,140,.95)) brightness(1.12); }
  100% { filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
}
@keyframes zgmMist{
  0%   { opacity: 0; transform: translate(0, 0) scale(.15); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .zg-mini__mist { display: none; }
}

/* ===== v2: randlos =====
   Mit JavaScript laeuft das Bild bis an die Kartenkante (einschliesslich Rahmenlinie, links,
   rechts und unten). zg-mini.js setzt --zgm-l/-r/-b aus Innenabstand plus Rahmen der Karte.
   Die Karte bekommt die Himmelsfarbe des Bildes, so dass oben keine Naht entsteht; der
   Lichtkreis aus der Lampe waechst bis ueber die fernste Ecke des Blocks hinaus. */
.zg-bleed-card {
  overflow: clip !important;
  overflow-clip-margin: 1px;
}
.formats .fa-temple .zg-bleed-card,
.an-card.zg-bleed-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.04) 70px, rgba(255,255,255,0) 150px),
    linear-gradient(180deg, #1E348C 0, #142F80 110px, #0F2B7B 190px, #0F2B7B 100%) !important;
}
@media (orientation: portrait) {
  .formats .fa-temple .zg-bleed-card,
  .an-card.zg-bleed-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.04) 70px, rgba(255,255,255,0) 150px),
      linear-gradient(180deg, #1E348C 0, #122D83 140px, #0D2881 240px, #0D2881 100%) !important;
  }
}
/* Aufklapp-Huelle: unten und seitlich nicht mehr selbst abschneiden (das macht die Karte),
   die Hoehenanimation bleibt ueber clip-path erhalten */
.ff-js .format-feature > .ff-body.zg-bleed-body {
  overflow: visible;
  clip-path: inset(0 -800px 0 -800px);
}
.ff-js .format-feature.is-open > .ff-body.zg-bleed-body {
  clip-path: inset(0 -800px calc(-1 * var(--zgm-b, 0px) - 2px) -800px);
}
.zg-bleed-card .mf-art.zg-mini.zg-mini--bleed {
  max-width: none !important;
  width: auto;
  margin-left: calc(-1 * var(--zgm-l, 0px)) !important;
  margin-right: calc(-1 * var(--zgm-r, 0px)) !important;
  margin-bottom: calc(-1 * var(--zgm-b, 0px)) !important;
}
.zg-mini--bleed .zg-mini__scene {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%);
  mask-image: linear-gradient(180deg, transparent 0, #000 11%);
}
.zg-mini--bleed.zg-mini--armed .zg-mini__scene {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv)),
    linear-gradient(180deg, transparent 0, #000 11%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv)),
    linear-gradient(180deg, transparent 0, #000 11%);
  mask-composite: intersect;
}
.zg-mini--bleed.zg-mini--armed.is-play .zg-mini__scene {
  --zgm-rv: calc(170vmax + 200px);
  transition: --zgm-rv 3.6s cubic-bezier(.45,0,.2,1) .55s;
}

/* Glitzer aus der Lampe (wie auf der Zeitgeist-Seite) */
.zg-mini__glitter { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.zg-mini__glitter i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,214,130,.95)) drop-shadow(0 0 10px rgba(255,180,90,.55));
}
.zg-mini__glitter i.d { border-radius: 50%; background: radial-gradient(circle, #FFFDF6 0 22%, rgba(255,196,96,.9) 40%, rgba(255,170,70,0) 72%); }
.zg-mini__glitter i.s { background: radial-gradient(circle, #FFFFFF 0 18%, #FFD27A 55%, #F6A743 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.zg-mini--armed.is-play .zg-mini__glitter i {
  animation: zgmGlitIn 1.6s cubic-bezier(.2,.8,.3,1) var(--dl) 1 both, zgmGlitTw var(--tw) ease-in-out calc(var(--dl) + 1.6s) infinite;
}
@keyframes zgmGlitIn{
  0%   { opacity: 0; transform: translate(calc(var(--dx) * -1.6), 14px) scale(.2) rotate(-40deg); }
  30%  { opacity: 1; transform: translate(0, 0) scale(1.5) rotate(0deg); }
  100% { opacity: .9; transform: translate(var(--dx), var(--dy)) scale(1); }
}
@keyframes zgmGlitTw{
  0%,100% { opacity: .9; transform: translate(var(--dx), var(--dy)) scale(1); }
  45%     { opacity: .3; transform: translate(var(--dx), calc(var(--dy) - 3px)) scale(.6); }
  55%     { opacity: 1;  transform: translate(var(--dx), calc(var(--dy) - 3px)) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { .zg-mini__glitter { display: none; } }

/* ===== Lampe in der blauen Karte: ruhiger, organischer =====
   Langsameres, weicheres Wiegen statt Ruckeln, laengeres Gluehen, die Szene quillt
   gemaechlich aus der Tuelle, Nebel und Glitzer folgen mit mehr Zeit. */
.zg-mini--armed.is-play .zg-mini__lamp {
  animation: zgmSway 2.6s cubic-bezier(.45,.05,.35,1) 1 both, zgmGlowSoft 4.2s ease-in-out 1 both;
}
@keyframes zgmSway{
  0%   { rotate: 0deg; translate: 0 0; }
  22%  { rotate: -2.6deg; translate: -1px -1px; }
  48%  { rotate: 2deg; translate: 1px -2px; }
  72%  { rotate: -1deg; translate: 0 -1px; }
  100% { rotate: 0deg; translate: 0 0; }
}
@keyframes zgmGlowSoft{
  0%   { filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
  40%  { filter: drop-shadow(0 0 16px rgba(255,214,140,.85)) brightness(1.08); }
  100% { filter: drop-shadow(0 0 0 rgba(255,214,140,0)); }
}
.zg-mini--bleed.zg-mini--armed.is-play .zg-mini__scene {
  transition: --zgm-rv 5.2s cubic-bezier(.4,0,.15,1) 1.3s;
}
.zg-mini--armed.is-play .zg-mini__mist i {
  animation: zgmMist 5s cubic-bezier(.25,0,.2,1) 1.2s 1 both;
}
.zg-mini--armed.is-play .zg-mini__mist i:nth-child(2) { animation-delay: 1.7s; }
.zg-mini--armed.is-play .zg-mini__mist i:nth-child(3) { animation-delay: 2.2s; }
.zg-mini--armed.is-play .zg-mini__glitter i {
  animation: zgmGlitIn 2.6s cubic-bezier(.22,.7,.25,1) calc(var(--dl) * 1.7 + .4s) 1 both,
             zgmGlitTw calc(var(--tw) * 1.3) ease-in-out calc(var(--dl) * 1.7 + 3s) infinite;
}

/* ===== Sternenhimmel wie auf der Zeitgeist-Seite (zg-mini.js setzt die Sterne) =====
   Rauten, die ruhig atmen. Sie kommen mit der Szene aus der Lampe und bleiben. Nur Deckkraft
   wird animiert (laeuft auf der Grafikkarte); bei zugeklappter Karte stehen sie still. */
.zg-mini__stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* kein mask-image mehr: der weiche Rand oben steckt in --f jedes Sterns (zg-mini.js) */
}
.zg-mini__stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * .62%);
  aspect-ratio: 1;
  background: var(--c, #F5F1E8);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: calc(var(--lo, .35) * var(--f, 1));
  animation: zgmStar var(--td, 5s) ease-in-out var(--dl, 0s) infinite both;
}
@keyframes zgmStar{
  0%,100% { opacity: calc(var(--lo, .35) * .6 * var(--f, 1)); }
  50%     { opacity: calc(.95 * var(--f, 1)); }
}
.zg-mini__stars--v { display: none; }
@media (orientation: portrait) {
  .zg-mini__stars--h { display: none; }
  .zg-mini__stars--v { display: block; }
}
/* mit der Szene einblenden: der Lichtkreis aus der Lampe erreicht den Himmel spaet */
.zg-mini--armed .zg-mini__stars { opacity: 0; }
.zg-mini--armed.is-play .zg-mini__stars {
  opacity: 1;
  transition: opacity 2.4s ease 3.2s;
}
/* Leistung: Funkeln nur in der aufgeklappten Karte */
.format-feature:not(.is-open) .zg-mini__stars i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .zg-mini__stars i { animation: none; opacity: calc(.8 * var(--f, 1)); }
}

/* ===== Startseite: ruhige Fassung (zg-mini--calm) =====
   Wie das Mentor & Fellowship Bild: steht still, kein Rauch, kein Glitzer, kein Funkeln,
   keine Lampenbewegung. Beim Aufklappen nur ein ruhiges Einblenden. */
.zg-mini--calm .zg-mini__mist,
.zg-mini--calm .zg-mini__glitter { display: none; }
.zg-mini--calm .zg-mini__stars i {
  animation: none !important;
  opacity: calc((var(--lo, .35) + .4) * var(--f, 1));
}
.ff-js .format-feature .ff-body__in > .mf-art.zg-mini--calm,
.ff-js .format-feature.is-open .ff-body__in > .mf-art.zg-mini--calm { transform: none; }
.zg-mini--calm.zg-calm-armed .zg-mini__stage { opacity: 0; }
.zg-mini--calm.zg-calm-armed.is-in .zg-mini__stage { opacity: 1; transition: opacity 1.2s ease .1s; }
@media (prefers-reduced-motion: reduce) {
  .zg-mini--calm.zg-calm-armed .zg-mini__stage { opacity: 1; transition: none; }
}

/* Glitzer ohne Schattenfilter (wie auf der Zeitgeist-Seite): der warme Hof ist eine eigene
   weiche Flaeche, so muessen die Funken beim Funkeln nicht staendig neu gezeichnet werden */
.zg-mini__glitter i { filter: none !important; }
.zg-mini__glitter i.s { background: none; clip-path: none; }
.zg-mini__glitter i::before,
.zg-mini__glitter i.s::after { content: ""; position: absolute; pointer-events: none; }
.zg-mini__glitter i::before {
  inset: -9px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,130,.85) 0, rgba(255,196,110,.5) 22%, rgba(255,180,90,.22) 45%, rgba(255,180,90,0) 70%);
}
.zg-mini__glitter i.s::after {
  inset: 0;
  background: radial-gradient(circle, #FFFFFF 0 18%, #FFD27A 55%, #F6A743 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.zg-mini__glitter i.d { background: none; }
.zg-mini__glitter i.d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFDF6 0 22%, rgba(255,196,96,.9) 40%, rgba(255,170,70,0) 72%);
}

/* Sterne von Anfang an sichtbar: das Bild steigt in den Sternenhimmel hinein, statt ihn zu
   ueberdecken (wie auf der Zeitgeist-Seite) */
.zg-mini--armed .zg-mini__stars,
.zg-mini--armed.is-play .zg-mini__stars { opacity: 1; transition: none; }
/* Funkeln ohne Groessenwechsel (siehe zeitgeist.css): laeuft ohne Neuzeichnen */
@keyframes zgmGlitTw{
  0%,100% { opacity: .9;  transform: translate(var(--dx), var(--dy)); }
  45%     { opacity: .25; transform: translate(var(--dx), calc(var(--dy) - 3px)); }
  55%     { opacity: 1;   transform: translate(var(--dx), calc(var(--dy) - 3px)); }
}

/* ===== Neue Szene im Pinselstil (Okt. 2026) =====
   Freigestellte Szene: kein Ausblenden an den Raendern mehr noetig, die Karte bildet den Grund.
   Lampe und Tuelle an ihrer neuen Stelle im Bild. */
.zg-mini__stage {
  --sx: 24.64%;
  --sy: 73.54%;
}
.mf-art.zg-mini .zg-mini__lamp {
  left: 1.316%;
  top: 70.032%;
  width: 24.043%;
}
.zg-mini__scene,
.zg-mini--bleed .zg-mini__scene {
  -webkit-mask-image: none;
  mask-image: none;
}
.zg-mini--armed .zg-mini__scene,
.zg-mini--bleed.zg-mini--armed .zg-mini__scene {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv));
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv));
}
@media (orientation: portrait) {
  .zg-mini__stage {
    --sx: 47.98%;
    --sy: 82.1%;
  }
  .zg-mini__scene,
  .zg-mini--bleed .zg-mini__scene {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .zg-mini--armed .zg-mini__scene,
  .zg-mini--bleed.zg-mini--armed .zg-mini__scene {
    -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv));
    mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--zgm-rv) - 180px), rgba(0,0,0,.55) calc(var(--zgm-rv) - 70px), transparent var(--zgm-rv));
  }
  .mf-art.zg-mini .zg-mini__lamp--v {
    left: 6.945%;
    top: 80.078%;
    width: 42.136%;
  }
}