/* Sensus Communis | zeitgeist.css
   Seitenspezifische Grundgestaltung.
   Geladen von: zeitgeist-en, zeitgeist
   Reihenfolge je Seite: fonts, tokens, [subpage], Seite, glass-cards, motion, Seite.layers, site */

/* fixed poster background — identisch zur Annual-Forum-Seite (Mond-Theme) */
.poster-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 116vh;
  z-index: 0;
  overflow: hidden;
}

.poster-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34vh;
  background: linear-gradient(180deg,rgb(var(--c-navy-rgb) / 0),var(--navy));
  pointer-events: none;
}

.poster {
  width: 100%;
  height: 100%;
  display: block;
}

/* content */
main {
  position: relative;
  z-index: 5;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 120px;
}

.subhero {
  min-height: 48vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 0 5vh;
}

.page-label {
  font-family: "Manrope";
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-coral-soft);
  margin-bottom: 14px;
}

.page-title {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: clamp(40px,7vw,68px);
  line-height: 1.02;
  color: var(--c-cream);
  margin-bottom: 0;
  letter-spacing: -.01em;
  text-shadow: 0 2px 30px rgb(var(--c-navy-deep-rgb) / .8),0 1px 4px rgb(var(--c-navy-deep-rgb) / .6);
}

.panel {
  border-radius: 2px;
}

.panel h2 {
  font-family: "EB Garamond",serif;
  font-weight: 600;
  font-size: 25px;
  margin: 38px 0 12px;
  line-height: 1.2;
}

.panel h2:first-child {
  margin-top: 0;
}

.panel p {
  font-size: 18.5px;
  margin-bottom: 14px;
  line-height: 1.62;
}

.panel a {
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--c-rust-rgb) / .3);
}

.panel ul {
  list-style: none;
  margin: 6px 0 18px;
}

.panel li {
  position: relative;
  padding-left: 20px;
  font-size: 17.5px;
  color: var(--ink);
  margin-bottom: 7px;
}

.panel li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--coral);
  transform: rotate(45deg);
}

/* === Layout wie Annual-Forum-Unterseite: transparente Panels, Text auf dem Mond === */
.panel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 40px;
}

.panel h2,
.panel h2.rhythm-h,
.rhythm-h {
  color: var(--c-cream) !important;
}

.rhythm-h em {
  color: var(--c-coral-soft) !important;
}

.panel p,
.panel .lead-p {
  color: rgb(var(--c-cream-rgb) / .86) !important;
}

.lede {
  color: rgb(var(--c-cream-rgb) / .9) !important;
}

.panel a {
  color: var(--c-coral-soft) !important;
  border-bottom-color: rgb(var(--c-coral-soft-rgb) / .4) !important;
}

.rhythm-label {
  color: var(--c-coral-soft) !important;
}

.judgment-typer {
  color: var(--c-cream) !important;
}

.zg-quote {
  border-left-color: var(--sc-enso, #8C9EF5) !important;
}

.zg-quote p,
.zg-verse {
  color: var(--c-cream) !important;
}

.zg-quote cite {
  color: #FFB4A7 !important;
}

.zg-close {
  color: var(--c-cream) !important;
}

.rhythm-steps li {
  border-top-color: rgb(var(--c-cream-rgb) / .18) !important;
}

.rhythm-steps .rs-num {
  color: var(--c-coral-soft) !important;
}

.rhythm-steps b {
  color: var(--c-cream) !important;
}

.rhythm-steps .rs-desc {
  color: rgb(var(--c-cream-rgb) / .78) !important;
}

/* footer is injected by site-footer.js (shared across pages) */
@media (max-width:720px) {
  main {
    padding: 0 18px 90px;
  }
  .subhero {
    min-height: 46vh;
    padding: 96px 0 4vh;
  }
}

/* ===== Colloquium content ===== */
.lede {
  font-family: "EB Garamond",serif;
  font-style: italic;
  font-size: clamp(20.5px,2.4vw,26px);
  line-height: 1.45;
  color: rgb(var(--c-cream-rgb) / .9);
  max-width: 680px;
  margin: 18px 0 0;
  text-shadow: 0 1px 20px rgb(var(--c-navy-deep-rgb) / .6);
}

.coll-stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px;
  margin-top: 36px;
  max-width: 640px;
}

@media (max-width:560px) {
  .coll-stats {
    grid-template-columns: 1fr;
  }
}

.coll-stat {
  padding: 20px 24px;
  border: 1px solid rgb(var(--c-navy-rgb) / .16);
  border-radius: 14px;
  background: rgb(var(--c-paper-rgb) / .55);
  transition: background .36s ease, transform .36s cubic-bezier(.2,.7,.2,1), border-color .36s ease;
}

.coll-stat:hover {
  background: rgb(var(--c-paper-rgb) / .85);
  transform: translateY(-3px);
  border-color: rgb(var(--c-navy-rgb) / .28);
}

.coll-stat small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin-bottom: 7px;
}

.coll-stat span {
  font-family: "EB Garamond",serif;
  font-size: 25px;
  color: var(--navy);
}

/* ===== „Was heißt Urteilsfähigkeit …" — rotierender Schreibmaschinen-Effekt ===== */
.judgment-typer {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: clamp(24px,3vw,32px);
  line-height: 1.25;
  color: var(--navy);
  margin: 18px 0 4px;
  letter-spacing: -.005em;
}

.judgment-typer .jt-suffix {
  transition: color .2s ease;
  font-style: italic;
}

.judgment-typer .jt-cursor {
  display: inline-block;
  width: 2px;
  height: 1.04em;
  margin-left: 3px;
  vertical-align: -0.14em;
  background: currentColor;
  opacity: .7;
  animation: jtBlink 1.05s steps(1) infinite;
}

.judgment-typer .jt-cursor--typing {
  animation: none;
  opacity: .85;
}

@keyframes jtBlink{ 0%,50%{opacity:.7;} 50.01%,100%{opacity:0;} }

@media (prefers-reduced-motion: reduce) {
  .judgment-typer .jt-cursor {
    animation: none;
  }
}

/* The Yearly Rhythm (Block von der Annual-Unterseite) */
.rhythm-label {
  font-family: "Manrope",sans-serif;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-rust);
  margin-bottom: 10px;
  text-shadow: none;
}

.panel h2.rhythm-h {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: clamp(26px,4vw,40px);
  color: var(--c-navy);
  margin: 0 0 16px;
  line-height: 1.06;
  text-shadow: none;
}

.rhythm-h em {
  font-style: italic;
  color: var(--c-rust);
}

.rhythm-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.rhythm-steps li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgb(var(--c-navy-rgb) / .14);
}

.rhythm-steps li::before {
  display: block;
}

.rhythm-steps li:first-child {
  border-top: 0;
}

.rhythm-steps .rs-num {
  font-family: "EB Garamond",serif;
  font-style: italic;
  color: var(--c-rust);
  font-size: 18px;
  min-width: 30px;
  flex: none;
}

.rhythm-steps b {
  display: block;
  font-family: "EB Garamond",serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--c-navy);
  margin-bottom: 2px;
}

.rhythm-steps .rs-desc {
  display: block;
  font-size: 16px;
  color: #13225C;
}

/* Lavendel-Glass-CTA — exakt wie .founder-btn auf der Startseite */
.sc-glass-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-family: "Manrope",sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--c-cream);
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 36%, rgba(255,255,255,0) 60%),
      rgba(206,208,242,.62),
      rgba(255,255,255,.30);
  -webkit-backdrop-filter: blur(16px) saturate(175%);
  backdrop-filter: blur(16px) saturate(175%);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 13px 34px rgba(40,44,110,.26), inset 0 1px 1px rgba(255,255,255,.92), inset 0 -10px 22px rgba(184,186,228,.20), inset 0 -1px 1px rgb(var(--c-violet-rgb) / .12);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s, box-shadow .35s;
}

.sc-glass-cta > span {
  position: relative;
  z-index: 2;
}

.sc-glass-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(2.4px 2.4px at 12% 30%, #fff, transparent 60%),
      radial-gradient(2px 2px at 27% 62%, #fff, transparent 60%),
      radial-gradient(1.8px 1.8px at 45% 26%, rgba(255,255,255,.96), transparent 60%),
      radial-gradient(2.3px 2.3px at 63% 58%, #fff, transparent 60%),
      radial-gradient(1.8px 1.8px at 82% 33%, rgba(255,255,255,.96), transparent 60%),
      radial-gradient(2px 2px at 92% 66%, #fff, transparent 60%),
      radial-gradient(1.6px 1.6px at 37% 75%, rgb(var(--c-navy-rgb) / .5), transparent 60%),
      radial-gradient(1.5px 1.5px at 73% 77%, rgb(var(--c-navy-rgb) / .42), transparent 60%);
  animation: scGlintA 2.6s ease-in-out infinite;
}

.sc-glass-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 19% 48%, #fff, transparent 60%),
      radial-gradient(1.7px 1.7px at 39% 42%, rgba(255,255,255,.92), transparent 60%),
      radial-gradient(2.4px 2.4px at 55% 72%, #fff, transparent 60%),
      radial-gradient(1.9px 1.9px at 70% 30%, #fff, transparent 60%),
      radial-gradient(2px 2px at 87% 52%, rgba(255,255,255,.96), transparent 60%),
      radial-gradient(1.6px 1.6px at 60% 17%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1.5px 1.5px at 30% 22%, rgb(var(--c-navy-rgb) / .42), transparent 60%);
  animation: scGlintB 3.4s ease-in-out .8s infinite;
}

@keyframes scGlintA{ 0%,100%{opacity:.32;} 50%{opacity:1;} }

@keyframes scGlintB{ 0%,100%{opacity:.36;} 45%{opacity:.96;} }

.sc-glass-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.18) 36%, rgba(255,255,255,0) 60%),
      rgba(214,216,246,.72),
      rgba(255,255,255,.34);
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 18px 46px rgba(40,44,110,.32), inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgb(var(--c-violet-rgb) / .14);
}

.sc-glass-cta:active {
  transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .sc-glass-cta::before,
  .sc-glass-cta::after {
    animation: none;
    opacity: .55;
  }
}

.coll-cta-wrap {
  text-align: center;
  margin: 56px 0 12px;
}

.zg-quote {
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--sc-enso, #8C9EF5);
}

.zg-quote p {
  font-family: "EB Garamond",serif;
  font-style: italic;
  font-size: 21.5px;
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0 0 12px;
}

.zg-verse {
  font-size: 24px !important;
}

.zg-quote cite {
  display: block;
  font-family: "Manrope",sans-serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-ink-mute);
}

.zg-quote .zg-work {
  font-style: italic;
}

.zg-close {
  margin-top: 24px;
  font-family: "EB Garamond",serif;
  font-style: italic;
  font-size: 20px;
  color: var(--c-navy);
}

.benefit-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.benefit-list li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-top: 1px solid rgb(var(--c-navy-rgb) / .14);
  font-size: 17.5px;
  color: #13225C;
  line-height: 1.5;
}

.benefit-list li:first-child {
  border-top: 0;
}

.benefit-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 20px;
  width: 7px;
  height: 7px;
  background: var(--c-coral-soft);
  transform: rotate(45deg);
}

/* ===== Der jaehrliche Rhythmus als Zeitstrahl (wie auf der Traditionsseite) =====
   Die Linie ist breiter als die Textspalte und schwingt um die Mitte; die Schritte stehen
   abwechselnd links und rechts. Zeichnung und Aufleuchten: zg-timeline.js. */
.zg-tl {
  position: relative;
  width: min(1060px, calc(100vw - 48px));
  margin: 56px 0 40px calc(50% - min(530px, 50vw - 24px));
  padding: 28px 0 70px;
}
.zg-tl__svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.zg-tl__base {
  fill: none;
  stroke: rgb(var(--c-lavender-rgb) / .16);
  stroke-width: 1.5;
}
.zg-tl__line {
  fill: none;
  stroke: #A9B2FF;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(169,178,255,.45));
}
.zg-tl__head {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6DC 0 22%, rgba(255,214,140,.85) 38%, rgba(255,190,110,0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  will-change: transform;
}
.zg-tl__head.is-on {
  opacity: 1;
}
.zg-tl__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zg-tl__item {
  position: relative;
  display: flex;
  min-height: 150px;
  margin: 0 0 54px;
}
.zg-tl__item:last-child {
  margin-bottom: 0;
}
.zg-tl__item--l {
  justify-content: flex-start;
}
.zg-tl__item--r {
  justify-content: flex-end;
}
.zg-tl__text {
  width: calc(50% - 64px);
}
.zg-tl__item--l .zg-tl__text {
  text-align: right;
  padding-right: calc(var(--dx, 0px) * -1);
}
.zg-tl__item--r .zg-tl__text {
  padding-left: var(--dx, 0px);
}
.zg-tl__dot {
  position: absolute;
  z-index: 2;
  left: calc(50% + var(--dx, 0px));
  top: 30px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--c-cream);
  background: radial-gradient(circle, #C9CEFF 0 38%, #0F1D55 42%);
  box-shadow: 0 0 0 0 rgba(255,190,160,0);
  transition: box-shadow 1s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.zg-tl__item--last .zg-tl__dot {
  border-color: var(--c-coral-soft);
  background: radial-gradient(circle, #FFE3C8 0 38%, #0F1D55 42%);
}
.zg-tl__num {
  font-family: "Manrope",sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #A9B2FF;
  margin-bottom: 8px;
}
.zg-tl__title {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--c-cream);
  margin: 0 0 12px;
}
.zg-tl__title em {
  font-style: italic;
  color: var(--c-coral-soft);
}
.zg-tl__desc {
  font-family: "EB Garamond",serif !important;
  font-style: italic;
  font-size: 19.5px !important;
  line-height: 1.5 !important;
  color: rgb(var(--c-cream-rgb) / .82) !important;
  margin: 0 !important;
}
/* Aufleuchten, sobald die Linie den Punkt erreicht */
.zg-tl--armed .zg-tl__text {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(4px);
}
.zg-tl--armed .zg-tl__dot {
  transform: scale(.4);
  opacity: .5;
}
.zg-tl--armed .is-on .zg-tl__text {
  opacity: 1;
  transform: none;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: opacity .8s ease .08s, transform 1s cubic-bezier(.16,1,.3,1) .08s, filter .9s ease .08s;
}
.zg-tl--armed .is-on .zg-tl__dot {
  transform: none;
  opacity: 1;
  box-shadow: 0 0 18px 4px rgba(255,190,160,.35);
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .4s ease, box-shadow 1.2s ease;
}
.zg-tl--armed .zg-tl__item--last.is-on .zg-tl__dot {
  box-shadow: 0 0 26px 8px rgba(255,150,110,.45);
}
@media (max-width:720px) {
  .zg-tl {
    width: auto;
    margin: 40px 0 28px;
    padding: 12px 0 40px;
  }
  .zg-tl__item {
    display: block;
    min-height: 0;
    margin-bottom: 40px;
    padding-left: 46px;
  }
  .zg-tl__text,
  .zg-tl__item--l .zg-tl__text,
  .zg-tl__item--r .zg-tl__text {
    width: auto;
    text-align: left;
    padding: 0;
  }
  .zg-tl__dot {
    left: 13px;
    top: 26px;
  }
  .zg-tl__desc {
    font-size: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zg-tl__head {
    display: none;
  }
}
.panel .zg-tl__item {
  padding-left: 0;
  font-size: inherit;
}
.panel .zg-tl__item::before {
  content: none;
  display: none;
}
.zg-tl__num {
  text-transform: none;
  letter-spacing: .18em;
  font-size: 13px;
}
.zg-tl__item {
  min-height: 160px;
  margin-bottom: 64px;
}
@media (max-width:720px) {
  .panel .zg-tl__item {
    padding-left: 46px;
    min-height: 0;
    margin-bottom: 40px;
  }
}

/* ===== Finale: die Linie laeuft in die Lampe, das Bild steigt aus der Tuelle =====
   Ohne JavaScript oder bei reduzierter Bewegung ist das Bild einfach da. */
@property --rv {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.zg-art {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  aspect-ratio: 2 / 1;
  margin: 70px auto 0;
  border-radius: 22px;
}
.zg-art__scene {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.zg-art__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zg-art__lamp {
  position: absolute;
  z-index: 3;
  left: 2.31%;
  top: 69.67%;
  width: 25.42%;
  height: auto;
  transform-origin: 46% 96%;
  pointer-events: none;
}
.zg-art__mist,
.zg-art__glitter {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.zg-art__cap {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 34px auto 0;
  max-width: 640px;
}
.zg-art__title {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.05;
  color: var(--c-cream);
  margin: 0 0 12px;
}
.zg-art__title em {
  font-style: italic;
  color: var(--c-coral-soft);
}
.zg-art__text {
  font-family: "EB Garamond",serif !important;
  font-style: italic;
  font-size: 21px !important;
  line-height: 1.5 !important;
  color: rgb(var(--c-cream-rgb) / .86) !important;
  margin: 0 !important;
}
/* --- Ausgangszustand (nur mit JavaScript) --- */
.zg-tl--armed .zg-art__scene {
  --rv: 0px;
  -webkit-mask-image: radial-gradient(circle at 27.6% 74.6%, #000 calc(var(--rv) - 180px), rgba(0,0,0,.55) calc(var(--rv) - 70px), transparent var(--rv));
  mask-image: radial-gradient(circle at 27.6% 74.6%, #000 calc(var(--rv) - 180px), rgba(0,0,0,.55) calc(var(--rv) - 70px), transparent var(--rv));
}
.zg-tl--armed .zg-art__lamp {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
.zg-tl--armed .zg-art__cap {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(4px);
}
/* die Lampe taucht auf, sobald die Linie den vierten Schritt erreicht */
.zg-tl--armed .zg-art.is-near .zg-art__lamp {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.16,1,.3,1);
}
/* die Linie trifft: Gluehen und Ruckeln */
.zg-tl--armed .zg-art.is-rub .zg-art__lamp {
  animation: lampRub 1s cubic-bezier(.36,.07,.19,.97) 1 both, lampGlow 2.6s ease-out 1 both;
}
@keyframes lampRub{
  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 lampGlow{
  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)); }
}
/* Bild steigt aus der Tuelle */
.zg-tl--armed .zg-art.is-open .zg-art__scene {
  --rv: 1500px;
  transition: --rv 3s cubic-bezier(.5,0,.25,1);
}
/* Nebel: drei weiche Schleier quellen aus der Tuelle, ziehen nach rechts oben und vergehen */
.zg-art__mist i {
  position: absolute;
  left: 27.6%;
  top: 74.6%;
  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-art__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-art__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%);
}
.zg-tl--armed .zg-art.is-open .zg-art__mist i {
  animation: mistRise 3.2s cubic-bezier(.3,0,.25,1) 1 both;
}
.zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(1) { --mx: 22%; --my: -18%; }
.zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(2) { --mx: 48%; --my: -38%; animation-delay: .35s; }
.zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(3) { --mx: 80%; --my: -58%; animation-delay: .7s; }
@keyframes mistRise{
  0%   { opacity: 0; transform: translate(0, 0) scale(.15); }
  25%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(1.5); }
}
/* Glitzer: Sterne und Lichtpunkte folgen dem Rauch und funkeln danach ganz leise weiter */
.zg-art__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;
}
.zg-art__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-art__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-tl--armed .zg-art.is-open .zg-art__glitter i {
  animation: glitIn 1.8s cubic-bezier(.2,.8,.3,1) var(--dl) 1 both, glitTw var(--tw) ease-in-out calc(var(--dl) + 1.8s) infinite;
}
@keyframes glitIn{
  0%   { opacity: 0; transform: translate(calc(var(--dx) * -1), 0) scale(.2); }
  35%  { opacity: 1; transform: translate(0, 0) scale(1.25); }
  100% { opacity: .55; transform: translate(var(--dx), var(--dy)) scale(.85); }
}
@keyframes glitTw{
  0%,100% { opacity: .55; transform: translate(var(--dx), var(--dy)) scale(.85); }
  50%     { opacity: .15; transform: translate(var(--dx), var(--dy)) scale(.6); }
}
.zg-tl--armed.zg-tl--done .zg-art__cap {
  opacity: 1;
  transform: none;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter 1s ease;
}
@media (max-width:720px) {
  .zg-art {
    margin-top: 48px;
    border-radius: 14px;
  }
  .zg-art__cap {
    margin-top: 26px;
    text-align: left;
  }
  .zg-art__text {
    font-size: 19px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zg-art__glitter,
  .zg-art__mist {
    display: none;
  }
}

/* ===== Finale v2: die neue Szene randlos, quer oder hochkant =====
   Das Bild laeuft ueber die ganze Breite und loest sich oben und unten weich in die Seite auf.
   Tuelle (--sx/--sy) und Lampe liegen je nach Format an anderer Stelle. */
html,
body {
  overflow-x: clip;
}
.zg-art {
  --sx: 25.7%;
  --sy: 68%;
  --sf: 0%;
  width: min(100vw, 170svh);
  max-width: none;
  aspect-ratio: 1672 / 941;
  margin: 60px 0 0 calc(50% - min(50vw, 85svh));
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 var(--sf), #000 calc(100% - var(--sf)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 88%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 var(--sf), #000 calc(100% - var(--sf)), transparent 100%);
  mask-composite: intersect;
}
@media (min-aspect-ratio: 17/10) {
  .zg-art { --sf: 7%; }
}
.zg-art__scene,
.zg-art__scene img {
  display: block;
  width: 100%;
  height: 100%;
}
.zg-art__lamp--h {
  left: 1.555%;
  top: 65.356%;
  width: 24.402%;
}
.zg-art__lamp--v {
  display: none;
}
.zg-art__mist i {
  left: var(--sx);
  top: var(--sy);
}
.zg-tl--armed .zg-art__scene {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 200px), rgba(0,0,0,.55) calc(var(--rv) - 80px), transparent var(--rv));
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 200px), rgba(0,0,0,.55) calc(var(--rv) - 80px), transparent var(--rv));
}
.zg-tl--armed .zg-art.is-open .zg-art__scene {
  --rv: 2200px;
  transition: --rv 3.4s cubic-bezier(.5,0,.25,1);
}
@media (max-aspect-ratio: 1/1) {
  .zg-art {
    --sx: 38.8%;
    --sy: 80.2%;
    --sf: 0%;
    width: 100vw;
    aspect-ratio: 941 / 1330;
    margin-left: calc(50% - 50vw);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 93%, transparent 100%);
  }
  .zg-art__lamp--h { display: none; }
  .zg-art__lamp--v {
    display: block;
    left: 2.763%;
    top: 79.85%;
    width: 34.857%;
  }
}
@media (max-width:720px) {
  .zg-art {
    border-radius: 0;
  }
}

/* ===== Wechsel beim Finale: die Seite geht von der Nacht in die Daemmerung des Bildes ueber ===== */
.zg-dusk {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(70% 55% at 0% 100%, rgba(246,160,110,.38) 0%, rgba(246,160,110,0) 70%),
    radial-gradient(60% 45% at 100% 100%, rgba(170,140,230,.30) 0%, rgba(170,140,230,0) 70%),
    linear-gradient(180deg, #162767 0%, #1F3280 40%, #3A3E98 72%, #5A4DA8 100%);
  transition: opacity 3.2s ease .2s;
}
body.zg-dusk-on {
  background-color: #1C2E78;
  transition: background-color 3s ease;
}
body.zg-dusk-on .zg-dusk {
  opacity: 1;
}
body.zg-dusk-on .poster-wrap {
  opacity: .35;
  transition: opacity 3s ease;
}
body.zg-dusk-on .poster-wrap::after {
  opacity: 0;
}
/* Akzente der Seite in der Daemmerung: Pfirsich und Lavendel aus dem Bild */
.zg-tl__line {
  transition: stroke 2.5s ease;
}
body.zg-dusk-on .zg-tl__line {
  stroke: #F6B38E;
}
body.zg-dusk-on .zg-tl__num {
  color: #F6B38E;
  transition: color 2.5s ease;
}
body.zg-dusk-on .zg-tl__dot {
  background: radial-gradient(circle, #FFE3C8 0 38%, #2A3584 42%);
  box-shadow: 0 0 18px 4px rgba(246,179,142,.35);
}
@media (prefers-reduced-motion: reduce) {
  .zg-dusk,
  body.zg-dusk-on,
  body.zg-dusk-on .poster-wrap {
    transition: none;
  }
}

/* ===== Finale v3 =====
   Das Bild geht auf jedem Bildschirm randlos bis an beide Raender. Nach dem Oeffnen bleibt die
   Daemmerung der Seite (der mitwandernde Lila-Pfirsich-Schein) dauerhaft stehen. */
.zg-art,
.zg-art {
  --sf: 0%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
@media (min-aspect-ratio: 17/10) {
  .zg-art { --sf: 0%; }
}
.zg-art__lamp--h {
  left: 1.589%;
  top: 65.433%;
  width: 24.323%;
}
@media (max-aspect-ratio: 1/1) {
  .zg-art__lamp--v {
    left: 2.828%;
    top: 79.844%;
    width: 34.69%;
  }
}

/* ===== Finale v4: nahtloser Uebergang, Rauch am Flaschenende, bleibende Faerbung =====
   Bild und Seite gehen ueber einen langen Verlauf ineinander: Die Szene blendet oben und unten
   weich aus, darunter liegt ein Schleier in der Kantenfarbe des Bildes, der weit ueber das Bild
   hinaus in die Daemmerung der Seite auslaeuft. Keine sichtbare Kante mehr. */
.zg-art {
  --edge-t: #0F2C7C;
  --edge-b: #132B7B;
  --sx: 25.8%;
  --sy: 66.3%;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.zg-art::before,
.zg-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
}
.zg-art::before {
  top: -34%;
  height: 50%;
  background: linear-gradient(180deg, rgb(15 44 124 / 0) 0%, rgb(15 44 124 / .55) 38%, var(--edge-t) 68%, var(--edge-t) 100%);
}
.zg-art::after {
  bottom: -40%;
  height: 56%;
  background: linear-gradient(0deg, rgb(19 43 123 / 0) 0%, rgb(19 43 123 / .55) 38%, var(--edge-b) 70%, var(--edge-b) 100%);
}
.zg-art__scene {
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.zg-tl--armed .zg-art__scene {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv)),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv)),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* Ende der Aufblende: der Kreis waechst immer bis ueber die fernste Bildecke hinaus, auch auf
   sehr breiten Bildschirmen, und laeuft weich aus statt abzubrechen */
.zg-tl--armed .zg-art.is-open .zg-art__scene {
  --rv: calc(130vw + 600px);
  transition: --rv 4.2s cubic-bezier(.45,0,.2,1);
}
/* Schleier erscheinen mit dem Bild und bleiben */
.zg-tl--armed .zg-art::before,
.zg-tl--armed .zg-art::after {
  opacity: 0;
}
.zg-tl--armed .zg-art.is-open::before,
.zg-tl--armed .zg-art.is-open::after {
  opacity: 1;
  transition: opacity 3.2s ease .6s;
}
.zg-art__mist,
.zg-art__glitter {
  z-index: 2;
}
.zg-art__lamp {
  z-index: 3;
}
@media (max-aspect-ratio: 1/1) {
  .zg-art {
    --edge-t: #0D2981;
    --edge-b: #1D2E86;
    --sx: 37%;
    --sy: 80.3%;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .zg-art::before {
    background: linear-gradient(180deg, rgb(13 41 129 / 0) 0%, rgb(13 41 129 / .55) 38%, var(--edge-t) 68%, var(--edge-t) 100%);
  }
  .zg-art::after {
    background: linear-gradient(0deg, rgb(29 46 134 / 0) 0%, rgb(29 46 134 / .55) 38%, var(--edge-b) 70%, var(--edge-b) 100%);
  }
  .zg-art__scene,
  .zg-tl--armed .zg-art__scene {
    --fe: 10%;
  }
  /* Rauch quillt aus dem Flaschenende und steigt am Bild nach oben */
  .zg-art__mist i {
    width: 30%;
    margin: -15% 0 0 -15%;
  }
  .zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(1) { --mx: 18%; --my: -40%; }
  .zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(2) { --mx: 40%; --my: -95%; }
  .zg-tl--armed .zg-art.is-open .zg-art__mist i:nth-child(3) { --mx: 60%; --my: -160%; }
}

/* Daemmerung: deutlich rosa-lila und dauerhaft */
.zg-dusk {
  background:
    radial-gradient(75% 60% at 0% 100%, rgba(246,160,140,.42) 0%, rgba(246,160,140,0) 72%),
    radial-gradient(70% 55% at 100% 95%, rgba(196,140,230,.38) 0%, rgba(196,140,230,0) 72%),
    radial-gradient(90% 50% at 50% 0%, rgba(120,110,210,.18) 0%, rgba(120,110,210,0) 70%),
    linear-gradient(180deg, #172A6E 0%, #22348A 40%, #3F3F9C 72%, #6450AC 100%);
}
body.zg-dusk-instant,
body.zg-dusk-instant .zg-dusk {
  transition: none !important;
}
/* Sterne der Szene: kommen mit dem Bild und bleiben */
.zg-art__stars {
  z-index: 2;
}
.zg-tl--armed .zg-art__stars {
  opacity: 0;
}
.zg-tl--armed .zg-art.is-open .zg-art__stars {
  opacity: 1;
  transition: opacity 2s ease 1.6s;
}

/* ===== Leuchten um das Bild: der Hintergrund nimmt das Licht der Szene auf =====
   Die Glut der Lampe, der Abendhimmel und der lavendelfarbene Rauch strahlen weit ueber die
   Bildkanten in die Seite hinaus, so dass das Bild nicht eingesetzt wirkt. Kommt mit dem
   Oeffnen und bleibt. */
.zg-art__aura {
  position: absolute;
  left: 0;
  right: 0;
  top: -55%;
  bottom: -60%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 14% 68%, rgba(255,170,110,.55) 0%, rgba(255,150,120,.22) 45%, rgba(255,150,120,0) 75%),
    radial-gradient(34% 26% at 72% 50%, rgba(255,196,140,.38) 0%, rgba(255,170,150,.14) 50%, rgba(255,170,150,0) 78%),
    radial-gradient(70% 34% at 48% 40%, rgba(196,160,255,.34) 0%, rgba(176,140,240,.14) 50%, rgba(176,140,240,0) 80%),
    radial-gradient(90% 30% at 50% 82%, rgba(150,120,235,.30) 0%, rgba(150,120,235,0) 75%),
    radial-gradient(80% 22% at 50% 14%, rgba(140,130,240,.22) 0%, rgba(140,130,240,0) 75%);
  filter: blur(8px);
}
.zg-art::before,
.zg-art::after {
  z-index: 0;
}
.zg-art::before {
  background: linear-gradient(180deg, rgb(15 44 124 / 0) 0%, rgb(15 44 124 / .35) 45%, rgb(15 44 124 / .75) 80%, var(--edge-t) 100%);
}
.zg-art::after {
  background: linear-gradient(0deg, rgb(19 43 123 / 0) 0%, rgb(19 43 123 / .35) 45%, rgb(19 43 123 / .75) 80%, var(--edge-b) 100%);
}
@media (max-aspect-ratio: 1/1) {
  .zg-art__aura {
    top: -35%;
    bottom: -40%;
    background:
      radial-gradient(55% 22% at 20% 80%, rgba(255,170,110,.55) 0%, rgba(255,150,120,.2) 45%, rgba(255,150,120,0) 75%),
      radial-gradient(50% 18% at 62% 30%, rgba(255,196,140,.32) 0%, rgba(255,196,140,0) 75%),
      radial-gradient(90% 30% at 50% 45%, rgba(196,160,255,.32) 0%, rgba(196,160,255,0) 78%),
      radial-gradient(100% 25% at 50% 90%, rgba(150,120,235,.30) 0%, rgba(150,120,235,0) 75%);
  }
  .zg-art::before {
    background: linear-gradient(180deg, rgb(13 41 129 / 0) 0%, rgb(13 41 129 / .35) 45%, rgb(13 41 129 / .75) 80%, var(--edge-t) 100%);
  }
  .zg-art::after {
    background: linear-gradient(0deg, rgb(29 46 134 / 0) 0%, rgb(29 46 134 / .35) 45%, rgb(29 46 134 / .75) 80%, var(--edge-b) 100%);
  }
}
.zg-tl--armed .zg-art__aura {
  opacity: 0;
}
.zg-tl--armed .zg-art.is-open .zg-art__aura {
  opacity: 1;
  transition: opacity 3.4s ease .8s;
}

/* ===== Glitzer aus der Lampe, kraeftiger (wie in der ersten Fassung) =====
   Goldene Sterne und Lichtpunkte schiessen mit dem Rauch aus der Tuelle, leuchten mit warmem
   Hof und funkeln danach deutlich sichtbar weiter. */
.zg-art__glitter { z-index: 4; }
.zg-art__glitter i.s,
.zg-art__glitter i.d { filter: drop-shadow(0 0 4px rgba(255,214,130,.95)) drop-shadow(0 0 10px rgba(255,180,90,.55)); }
.zg-tl--armed .zg-art.is-open .zg-art__glitter i {
  animation: glitIn2 1.6s cubic-bezier(.2,.8,.3,1) var(--dl) 1 both, glitTw2 var(--tw) ease-in-out calc(var(--dl) + 1.6s) infinite;
}
@keyframes glitIn2{
  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 glitTw2{
  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); }
}


/* ===== Nebel ueber der ganzen Seite (v5) =====
   Der Nebel haengt nicht mehr am Bildschirm (fixed), wo sein rosa Schein beim Scrollen mitwanderte
   und je nach Stelle mal mehr, mal weniger zu sehen war. Er liegt jetzt als eine Flaeche ueber der
   ganzen Seite, von oben bis zur Fusszeile, gleichmaessig verteilt, und kommt erst, wenn das Bild
   ganz aufgegangen ist. Dann steht er. */
body:has(.zg-dusk) { position: relative; }
.zg-dusk {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto;
  transition: opacity 2.4s ease;
  background:
    radial-gradient(75% 12% at 0% 12%,  rgba(246,160,140,.38) 0%, rgba(246,160,140,0) 75%),
    radial-gradient(70% 12% at 100% 30%, rgba(196,140,230,.38) 0%, rgba(196,140,230,0) 75%),
    radial-gradient(75% 12% at 0% 50%,  rgba(246,160,140,.36) 0%, rgba(246,160,140,0) 75%),
    radial-gradient(70% 12% at 100% 68%, rgba(196,140,230,.38) 0%, rgba(196,140,230,0) 75%),
    radial-gradient(80% 12% at 0% 90%,  rgba(246,160,140,.42) 0%, rgba(246,160,140,0) 75%),
    radial-gradient(80% 12% at 100% 97%, rgba(196,140,230,.40) 0%, rgba(196,140,230,0) 75%),
    linear-gradient(180deg, #1D2F7C 0%, #27378E 30%, #34399A 60%, #46449F 85%, #4F48A4 100%);
}
.sc-footer { position: relative; z-index: 1; }

/* ===== Punkte der Linie wie auf der Traditionsseite (Okt. 2026) =====
   Gleicher Punkt: farbiger Kern, schmaler Nachthimmel-Spalt, feiner Ring, leiser Schein.
   Gleiche Ankunft: wie ein kleiner Sonnenaufgang mit warmem Kern, Korona, kurzen weichen
   Strahlen und zwei aufsteigenden Lichtpunkten, danach ein leises Nachgluehen.
   Gleicher Tag: sobald die Seite in die Daemmerung kippt, wird jeder Punkt eine kleine Sonne,
   deren Schein langsam atmet. Werte 1:1 aus css/tradition.layers.css. */
.zg-tl { --dot: 24px; }
.zg-tl__item:nth-child(1) { --ring: #C3C5E8; }
.zg-tl__item:nth-child(2) { --ring: #BAC0EC; }
.zg-tl__item:nth-child(3) { --ring: #B1BBF0; }
.zg-tl__item:nth-child(4) { --ring: #A8B6F4; }
.zg-tl__dot,
.zg-tl__item--last .zg-tl__dot,
.zg-tl__spark {
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
}
.zg-tl__dot,
.zg-tl__item--last .zg-tl__dot {
  border: 0;
  background: radial-gradient(circle, var(--ring) 0 38%, #0B1550 40% 58%, transparent 60%);
  box-shadow: inset 0 0 0 2px var(--ring), 0 0 18px color-mix(in srgb, var(--ring) 45%, transparent);
}
.zg-tl__dot::before,
.zg-tl__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.zg-tl__dot::before {
  width: calc(var(--dot) * 3.3);
  height: calc(var(--dot) * 3.3);
  margin: calc(var(--dot) * -1.65) 0 0 calc(var(--dot) * -1.65);
  background: radial-gradient(circle,
      rgba(255,246,222,1) 0%, rgba(255,206,128,.95) 12%, rgba(255,150,72,.7) 26%,
      rgba(236,102,48,.34) 44%, transparent 68%);
}
.zg-tl__dot::after {
  width: calc(var(--dot) * 3.9);
  height: calc(var(--dot) * 3.9);
  margin: calc(var(--dot) * -1.95) 0 0 calc(var(--dot) * -1.95);
  background: repeating-conic-gradient(from 8deg, rgba(255,160,90,.6) 0deg, rgba(255,160,90,0) 8deg, rgba(255,160,90,0) 22deg, rgba(255,160,90,.6) 30deg);
  filter: blur(1.6px);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
  mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
}
/* zwei weiche Lichtpunkte neben der Sonne: eigene Ebene an der Stelle des Punktes */
.zg-tl__spark {
  position: absolute;
  z-index: 2;
  left: calc(50% + var(--dx, 0px));
  top: 30px;
  pointer-events: none;
}
.zg-tl__spark::before,
.zg-tl__spark::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFE7B8;
  box-shadow: 0 0 8px 2px rgba(255,180,100,.7);
  opacity: 0;
  transform: scale(0);
}
.zg-tl__spark::before { left: calc(100% + 9px); top: -9px; }
.zg-tl__spark::after { left: -12px; top: calc(100% + 5px); width: 4px; height: 4px; }
@media (max-width:720px) {
  .zg-tl__spark { left: 13px; top: 26px; }
}
/* Auftritt: erst wenn die Linie den Punkt erreicht */
.zg-tl--armed .zg-tl__dot {
  opacity: 0;
  transform: scale(.2);
  transition: opacity .5s ease, transform .9s cubic-bezier(.34,1.56,.64,1), box-shadow .6s ease, background 3s ease;
}
.zg-tl--armed .is-on .zg-tl__dot,
.zg-tl--armed .zg-tl__item--last.is-on .zg-tl__dot {
  opacity: 1;
  transform: none;
  box-shadow: inset 0 0 0 2px var(--ring), 0 0 18px color-mix(in srgb, var(--ring) 45%, transparent);
  animation: zgTlCore 1.6s ease-out .05s 1 both;
}
.zg-tl--armed .is-on .zg-tl__dot::before { animation: zgTlSun 2.2s cubic-bezier(.16,1,.3,1) .05s 1 both; }
.zg-tl--armed .is-on .zg-tl__dot::after { animation: zgTlRays 2.4s cubic-bezier(.16,1,.3,1) .08s 1 both; }
.zg-tl--armed .is-on .zg-tl__spark::before { animation: zgTlSpark 1.6s ease-out .42s 1 both; }
.zg-tl--armed .is-on .zg-tl__spark::after { animation: zgTlSpark 1.5s ease-out .62s 1 both; }
@keyframes zgTlSun{
  0%  { opacity:0;   transform:scale(.2); }
  30% { opacity:.95; transform:scale(1.05); }
  100%{ opacity:.4;  transform:scale(.72); }
}
@keyframes zgTlRays{
  0%  { opacity:0; transform:scale(.55) rotate(0deg); }
  35% { opacity:.9; transform:scale(1) rotate(5deg); }
  100%{ opacity:0; transform:scale(1.08) rotate(12deg); }
}
@keyframes zgTlCore{
  0%  { filter:brightness(1); }
  25% { filter:brightness(1.6) sepia(.45) saturate(1.5); }
  100%{ filter:brightness(1.06); }
}
@keyframes zgTlSpark{
  0%  { opacity:0; transform:scale(0) translate(0,0); }
  35% { opacity:.95; transform:scale(1) translate(0,-2px); }
  100%{ opacity:0; transform:scale(.4) translate(0,-7px); }
}
/* ohne JS oder mit reduzierter Bewegung: nur ein ruhiges Nachgluehen */
.zg-tl:not(.zg-tl--armed) .zg-tl__dot::before {
  opacity: .4;
  transform: scale(.72);
}
/* Daemmerung: jeder Punkt eine kleine Sonne, orange im Kern, heller Ring, atmender Schein */
body.zg-dusk-on .zg-tl__dot {
  background: radial-gradient(circle, #FFF4DC 0 10%, #FFB463 22%, #EE7A2C 38%, #FBF6EE 41% 57%, transparent 60%) !important;
  box-shadow: inset 0 0 0 2px var(--ring), 0 0 14px rgba(255,160,80,.45);
  animation: zgTlDotGlow 7s ease-in-out infinite !important;
}
body.zg-dusk-on .zg-tl__item:nth-child(3n+2) .zg-tl__dot { animation-delay: -2.3s !important; }
body.zg-dusk-on .zg-tl__item:nth-child(3n) .zg-tl__dot { animation-delay: -4.6s !important; }
@keyframes zgTlDotGlow{
  0%,100%{ box-shadow:inset 0 0 0 2px var(--ring), 0 0 10px rgba(255,160,80,.32); }
  50%    { box-shadow:inset 0 0 0 2px var(--ring), 0 0 22px rgba(255,160,80,.62); }
}
@media (prefers-reduced-motion: reduce) {
  .zg-tl__dot::after,
  .zg-tl__spark { display: none; }
  .zg-tl__dot,
  .zg-tl__dot::before,
  body.zg-dusk-on .zg-tl__dot { animation: none !important; }
  .zg-tl__dot::before { opacity: .4 !important; transform: scale(.72) !important; }
}

/* ===== Leistung und Sternenhimmel (Okt. 2026, v3) ===== */

/* 1. Sterne oben bleiben in der Daemmerung sichtbar.
   Vorher lag die Daemmerungsflaeche ueber dem ganzen Nachthimmel (und der wurde auf 35 %
   abgeblendet), so verschwanden Sterne und Mond und das Bild wirkte aufgesetzt. Jetzt liegt
   die Daemmerung unter dem Himmel: nur die dunkle Himmelsflaeche blendet aus, Sterne und Mond
   bleiben in voller Staerke stehen und gehen in den Daemmerungshimmel ueber. */
.poster-wrap { z-index: 1; }
.zg-dusk { z-index: 0; }
body.zg-dusk-on .poster-wrap { opacity: 1 !important; }
.poster > rect:first-of-type { transition: opacity 3s ease; }
body.zg-dusk-on .poster > rect:first-of-type { opacity: 0; }
body.zg-dusk-instant .poster > rect:first-of-type { transition: none; }

/* 2. Funkelnde Sterne oben auf der Grafikkarte: dieselben Sterne an denselben Stellen,
   in fuenf duennen Ebenen, deren Deckkraft im eigenen Takt atmet (vorher wurde dafuer
   der ganze Himmel mit Mond in jedem Bild neu gezeichnet) */
.poster-tw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  animation: tw var(--td, 3.4s) ease-in-out var(--dl, 0s) infinite both;
}
.poster-tw .nstar { animation: none !important; fill: var(--c-cream); }
@media (prefers-reduced-motion: reduce) {
  .poster-tw { animation: none; opacity: .7; }
}

/* 3. Leuchtspur der Linie als breiter, zarter Pfad statt Schattenfilter
   (der Filter liess die ganze Zeitleiste bei jedem Scrollschritt neu rechnen) */
.zg-tl__line { filter: none; }
.zg-tl__glow {
  fill: none;
  stroke: #A9B2FF;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: .16;
  transition: stroke 2.5s ease;
}
body.zg-dusk-on .zg-tl__glow { stroke: #F6B38E; }

/* 4. Glitzer aus der Lampe ohne Schattenfilter: der warme Hof ist jetzt eine eigene weiche
   Flaeche hinter jedem Funken. Gleiches Bild, aber der Browser muss die Funken beim Funkeln
   nicht mehr in jedem Bild neu zeichnen. */
.zg-art__glitter i.s,
.zg-art__glitter i.d { filter: none !important; }
.zg-art__glitter i.s { background: none; clip-path: none; }
.zg-art__glitter i::before,
.zg-art__glitter i.s::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.zg-art__glitter i::before {
  inset: -11px;
  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-art__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-art__glitter i.d { background: none; }
.zg-art__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%);
}

/* 5. Sterne der Szene sind von Anfang an da, als Teil des Nachthimmels der Seite. Das Bild
   steigt in diesen Himmel hinein, statt ihn beim Aufgehen zu ueberdecken; die Sterne bleiben
   die ganze Zeit sichtbar und liegen ueber der Szene. */
.zg-tl--armed .zg-art__stars,
.zg-tl--armed .zg-art.is-open .zg-art__stars {
  opacity: 1;
  transition: none;
}

/* 6. Funkeln des Glitzers nach dem Auftritt: Helligkeit und ein Hauch Bewegung statt
   Groessenwechsel. Ein staendiger Groessenwechsel zwingt den Browser, jeden Funken in jedem
   Bild neu zu zeichnen; so laeuft das Funkeln ruhig auf der Grafikkarte. */
@keyframes glitTw2{
  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)); }
}

/* ===== Sternenhimmel ueber die ganze Seite (Okt. 2026) =====
   Dieselben Rauten wie oben im Nachthimmel, ueber die ganze Laenge der Seite verteilt, damit
   die Sterne der Szene nicht als einzelner Streifen dastehen. Einzelne kleine Rauten
   (zg-timeline.js setzt sie), jede atmet im eigenen Takt; das laeuft auf der Grafikkarte. Liegt hinter dem Inhalt und hinter der Linie, bleibt auch in der
   Daemmerung stehen. */
.zg-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 100vh;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.zg-sky i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: rgb(var(--c-cream-rgb) / var(--o, .8));
  transform: translate(-50%, -50%) rotate(45deg);
  animation: zgSkyTw var(--td, 4s) ease-in-out var(--dl, 0s) infinite both;
}
/* feste Werte im Ablauf (ohne Variablen), damit der Browser das Funkeln ganz der
   Grafikkarte ueberlassen kann; die Helligkeit je Stern steckt in der Farbe */
@keyframes zgSkyTw{
  0%,100% { opacity: .3; }
  50%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-sky i { animation: none; }
}

/* ===== Ablauf der Szene (v4) ===== */
/* Die Sterne der Szene gehen mit dem Bild auf: sie folgen demselben Lichtkreis aus der Lampe.
   Vorher liegt nur der Sternenhimmel der Seite da, und der liegt hinter der Linie. */
.zg-tl--armed .zg-art__stars,
.zg-tl--armed .zg-art.is-open .zg-art__stars {
  opacity: 1;
  --rv: 0px;
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv));
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv));
}
.zg-tl--armed .zg-art.is-open .zg-art__stars {
  --rv: calc(130vw + 600px);
  transition: --rv 4.2s cubic-bezier(.45,0,.2,1);
}
/* Nach dem Aufgehen keine Maske mehr (spart Arbeit) */
.zg-tl--armed.zg-tl--settled .zg-art.is-open .zg-art__stars { -webkit-mask-image: none; mask-image: none; }

/* Der rosa-lila Schein um das Bild kommt erst, wenn das Bild ganz aufgegangen ist */
.zg-tl--armed .zg-art.is-open .zg-art__aura {
  opacity: 1;
  transition: opacity 2.6s ease 4.2s;
}

/* Glitzer aus der Lampe: fliegt mit dem Rauch heraus, leuchtet kurz und verblasst dann.
   Nach dem Aufgehen ist er weg, das Bild steht ruhig. */
.zg-tl--armed .zg-art.is-open .zg-art__glitter i {
  animation: glitIn2 1.6s cubic-bezier(.2,.8,.3,1) var(--dl) 1 both,
             glitOut 2.2s ease-in-out calc(var(--dl) + 2.4s) 1 forwards;
}
@keyframes glitOut{
  from { opacity: .9; transform: translate(var(--dx), var(--dy)); }
  to   { opacity: 0;  transform: translate(var(--dx), calc(var(--dy) - 10px)); }
}

/* Handy: dichtere Kacheln, damit auf dem schmalen Bildschirm ebenso viele Sterne stehen wie oben */
@media (max-width: 720px) {
        }
/* Sterne hinter dem aufgegangenen Bild ruhen (sie sind dort ohnehin verdeckt) */
body.zg-art-settled .zg-sky i.ia { animation: none; visibility: hidden; }
.zg-sky__band { position: absolute; left: 0; right: 0; }
/* Streifen ausserhalb des Bildes ruhen (Sterne stehen still in ihrer Helligkeit) */
.zg-sky__band.zs-off i { animation: none; }

/* ===== Uebergang in die Daemmerung, weicher (v5) =====
   Die rosa-lila Verlaeufe an den Seiten und der Schein um das Bild kommen erst, wenn das Bild
   ganz aufgegangen ist, und blenden dann langsam und gleichmaessig ein statt in einem Schlag. */
.zg-dusk { transition: opacity 4.8s cubic-bezier(.4,0,.2,1) !important; }
body.zg-dusk-on { transition: background-color 4.8s cubic-bezier(.4,0,.2,1); }
.poster > rect:first-of-type { transition: opacity 4.8s cubic-bezier(.4,0,.2,1); }
.zg-tl--armed .zg-art.is-open .zg-art__aura {
  transition: opacity 4.4s cubic-bezier(.4,0,.2,1) 4.2s;
}
body.zg-dusk-on .zg-tl__line,
body.zg-dusk-on .zg-tl__glow,
body.zg-dusk-on .zg-tl__num { transition-duration: 4.8s; }

/* ===== Neue Szene im Pinselstil (Okt. 2026) =====
   Die Szene ist jetzt freigestellt (transparent um Rauch und Lampe) und liegt direkt auf der
   Daemmerung der Seite. Darum entfallen die Schleier in der alten Kantenfarbe und das weiche
   Ausblenden oben und unten; die Aufblende aus der Tuelle bleibt. Lampe und Tuelle sitzen an
   ihrer neuen Stelle im Bild. */
.zg-art {
  --sx: 24.64%;
  --sy: 73.54%;
}
.zg-art::before,
.zg-art::after {
  display: none;
}
.zg-art__scene {
  -webkit-mask-image: none;
  mask-image: none;
}
.zg-tl--armed .zg-art__scene {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv));
  mask-image: radial-gradient(circle at var(--sx) var(--sy), #000 calc(var(--rv) - 220px), rgba(0,0,0,.55) calc(var(--rv) - 90px), transparent var(--rv));
}
.zg-art__lamp--h {
  left: 1.316%;
  top: 70.032%;
  width: 24.043%;
}
@media (max-aspect-ratio: 1/1) {
  .zg-art {
    --sx: 47.98%;
    --sy: 82.1%;
  }
  .zg-art__lamp--v {
    left: 6.945%;
    top: 80.078%;
    width: 42.136%;
  }
}

/* Nov. 2026: der Sternenhimmel der Seite kommt jetzt aus night-sky.js (ueber die ganze Flaeche, auf allen Nachtseiten) */
.zg-sky { display: none !important; }

/* Nov. 2026: Leitmotiv-Text unter "Zeitgeist" als ein Absatz in einer Schrift, schmal und zentriert
   (vorher zwei Absaetze in verschiedenen Schriften, auf dem Laptop zu breit verteilt) */
.zg-art__cap { max-width: 34em; padding: 0 12px; }
.zg-art__text { max-width: 30em; margin: 0 auto !important; text-wrap: balance; }
@media (max-width: 720px) {
  .zg-art__cap { text-align: center; padding: 0; }
}

/* ===== Aquarell-Himmel (Nov. 2026) =====
   Weiche Lasuren mit Wasserraendern, Granulation und gespritzten Sternsprenkeln in den Farben
   der Seite (Nachtblau, Enso-Blau, ein Hauch Lavendel-Rose). Fest hinter dem Inhalt, zieht beim
   Scrollen langsamer mit. In der Daemmerung hellt er die Flaeche nur noch auf (screen). */
/* Leistung (Nov. 2026): keine Gruppen-Deckkraft und kein mix-blend-mode mehr auf der festen Ebene
   (kostete bei jedem Bild einen Extra-Durchgang ueber den ganzen Bildschirm). Zwei eigene Bildebenen:
   normal (90 %) und Daemmerung (das fruehere screen bei 55 %, ins Bild gerechnet: zg-aquarell-lite.webp
   ist screen bei 95 %, darum 55/95). Beim Wechsel blenden nur die beiden Ebenen ueber. */
/* Lange Flaeche ueber die ganze Seite, scrollt mit dem Inhalt (Hoehe --aq-h setzt night-sky.js). */
.zg-aquarell { position: absolute; top: 0; left: 0; right: 0; height: var(--aq-h, 100vh); contain: strict; z-index: 0; pointer-events: none; overflow: hidden; }
.zg-aquarell i { position: absolute; inset: 0; }
.zg-aquarell i::before,
.zg-aquarell i::after { content: ""; position: absolute; inset: 0; background: url(../img/zg-aquarell.webp) center top / max(100vw, 1100px) auto repeat; opacity: .9; transition: opacity 3s ease; }
.zg-aquarell i::after { background-image: url(../img/zg-aquarell-lite.webp); opacity: 0; }
body.zg-dusk-on .zg-aquarell i::before { opacity: 0; }
body.zg-dusk-on .zg-aquarell i::after { opacity: .579; }
/* Der Aquarell-Himmel liegt unter Mond und Sternen des Kopfbilds: dessen Himmelsflaeche wird durchsichtig */
.poster > rect:first-of-type { opacity: 0 !important; }
.poster-wrap::after { display: none; }