/* Sensus Communis | tradition.layers.css
   Seitenspezifische Ergaenzungen, geladen nach Glas und Motion.
   Geladen von: tradition-en, tradition
   Reihenfolge je Seite: fonts, tokens, [subpage], Seite, glass-cards, motion, Seite.layers, site */

/* ===== sc-flaechenfarbe ===== */
/* Safari faerbt die Flaechen ausserhalb des Inhalts — hinter der unteren
     Leiste und beim Ueberziehen oben und unten — mit dem Hintergrund des
     html-Elements. Ohne Angabe bleibt der weiss. */
/* damit die Systemleisten hell auf dunkel zeichnen */
html {
  background: var(--c-navy);
  color-scheme: dark;
}
/* Diese Seite legt ihr Nachtbild auf z-index:-1. Solange html keine Farbe
     hatte, wanderte die Koerperfarbe auf die Leinwand und die Ebene blieb
     sichtbar. Mit eingefaerbtem html malt der Koerper seine Farbe darueber und
     verdeckt Mond und Sterne. Deshalb hier durchsichtig: die Farbe kommt jetzt
     von html, die Ebene liegt wieder davor. */
body {
  background-color: transparent;
}

/* ===== sc-timeline ===== */
/* ============================================================
     Tradition als Zeitachse: eine geschwungene Linie zieht sich
     beim Scrollen nach unten, Punkte markieren die Personen auf den
     Wendepunkten, die Zitate stehen abwechselnd links und rechts.
     Farbverlauf wie auf der Startseite: Lavendel, Blau, Violett, Orange.
     Die Linie wird per JS aus den echten Punkt-Positionen gebaut.
     ============================================================ */
.tl {
  --dot: 24px;
  --amp: 96px;
  --gapc: 46px;
  position: relative;
  z-index: 3;
  list-style: none;
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 30px 24px 90px;
}
/* Fallback ohne JS: ruhige Mittellinie */
.tl::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 40px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(var(--c-lavender),#8FA8FF 30%,#A98AF0 50%,#D98FB0 68%,#E89A56 84%,#EE7A2C);
  opacity: .5;
}
.tl.tl-has-path::before {
  display: none;
}
.tl-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.tl-svg .tl-base {
  fill: none;
  stroke: rgb(var(--c-lavender-rgb) / .18);
  stroke-width: 2;
}
.tl-svg .tl-draw {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.tl-svg .tl-end {
  fill: #EE7A2C;
}
.tl-item {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0,1fr) calc(var(--dot) + 2 * var(--amp) + 2 * var(--gapc)) minmax(0,1fr);
  padding-bottom: 76px;
}
.tl-item + .tl-item {
  margin-top: -46px;
}
.tl-node {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin-top: 31px;
  transform: translateX(calc(-1 * var(--amp)));
}
.tl-item--r .tl-node {
  transform: translateX(var(--amp));
}
.tl-text {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  max-width: 440px;
  text-shadow: 0 1px 12px rgba(5,11,38,.6);
}
.tl-item--r .tl-text {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}
/* Punkt: farbiger Kern, schmaler Nachthimmel-Spalt, feiner Ring, leiser Schein */
.tl-dot {
  position: relative;
  display: block;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  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);
}
/* Ankunft wie ein kleiner Sonnenaufgang: warmer Kern, Korona und kurze
     weiche Strahlen bluehen auf, zwei Lichtpunkte steigen auf; danach bleibt ein leises Nachglühen */
.tl-dot::before,
.tl-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.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%);
}
.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%);
}
.tl.is-armed .tl-item.is-on .tl-dot::before {
  animation: tlSun 2.2s cubic-bezier(.16,1,.3,1) .05s 1 both;
}
.tl.is-armed .tl-item.is-on .tl-dot::after {
  animation: tlRays 2.4s cubic-bezier(.16,1,.3,1) .08s 1 both;
}
.tl.is-armed .tl-item.is-on .tl-dot {
  animation: tlCore 1.6s ease-out .05s 1 both;
}
@keyframes tlSun{
    0%  { opacity:0;   transform:scale(.2); }
    30% { opacity:.95; transform:scale(1.05); }
    100%{ opacity:.4;  transform:scale(.72); }
  }
@keyframes tlRays{
    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 tlCore{
    0%  { filter:brightness(1); }
    25% { filter:brightness(1.6) sepia(.45) saturate(1.5); }
    100%{ filter:brightness(1.06); }
  }
/* zwei weiche Lichtpunkte, die kurz neben der Sonne aufsteigen */
.tl-node {
  position: relative;
}
.tl-node::before,
.tl-node::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;
  pointer-events: none;
  transform: scale(0);
}
.tl-node::before {
  left: calc(100% + 9px);
  top: -9px;
}
.tl-node::after {
  left: -12px;
  top: calc(100% + 5px);
  width: 4px;
  height: 4px;
}
.tl.is-armed .tl-item.is-on .tl-node::before {
  animation: tlSpark 1.6s ease-out .42s 1 both;
}
.tl.is-armed .tl-item.is-on .tl-node::after {
  animation: tlSpark 1.5s ease-out .62s 1 both;
}
@keyframes tlSpark{
    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 Nachglühen */
.tl:not(.is-armed) .tl-dot::before {
  opacity: .4;
  transform: scale(.72);
}
/* Text */
.lineage .tl .thinker-era {
  font-family: "Manrope",sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--ring) !important;
  margin: 0 0 8px;
}
.tl h4 {
  font-family: "EB Garamond",serif;
  font-weight: 500;
  font-size: 31px;
  line-height: 1.1;
  color: var(--c-cream);
  margin: 0 0 12px;
}
.tl h4.pair {
  font-size: 29px;
}
.tl blockquote {
  font-family: "EB Garamond",serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: rgb(var(--c-cream-rgb) / .86);
  margin: 0;
  padding: 0;
  border: 0;
}
.lineage .tl .thinker-work {
  border-top: 0;
  padding-top: 0;
  margin-top: 12px;
  font-size: 15.5px;
  color: rgba(198,184,206,.95);
}
.lineage .tl .thinker-work span {
  color: var(--ring);
  opacity: .85;
}
/* ruhiges Aufhellen beim Hover */
@media (hover:hover) {
  .tl-item:hover .tl-dot {
    box-shadow: inset 0 0 0 2px var(--ring), 0 0 30px color-mix(in srgb, var(--ring) 70%, transparent);
  }
}
/* Bewegung: nur wenn JS die Achse scharf schaltet */
.tl.is-armed .tl-dot {
  opacity: 0;
  transform: scale(.2);
  transition: opacity .5s ease, transform .9s cubic-bezier(.34,1.56,.64,1), box-shadow .6s ease;
}
.tl.is-armed .tl-text {
  opacity: 0;
  transform: translate3d(22px,0,0);
  transition: opacity .9s ease .15s, transform 1.2s cubic-bezier(.16,1,.3,1) .15s;
}
.tl.is-armed .tl-item--r .tl-text {
  transform: translate3d(-22px,0,0);
}
.tl.is-armed .tl-item.is-on .tl-dot {
  opacity: 1;
  transform: none;
}
.tl.is-armed .tl-item.is-on .tl-text {
  opacity: 1;
  transform: none;
}
@media (max-width:980px) {
  .tl {
    --amp: 64px;
    --gapc: 34px;
  }
  .tl h4 {
    font-size: 27px;
  }
  .tl blockquote {
    font-size: 18px;
  }
}
/* Handy: Linie am linken Rand, alle Texte rechts daneben */
@media (max-width:720px) {
  .tl {
    --dot: 18px;
    --amp: 7px;
    --gapc: 0px;
    margin-top: 20px;
    padding: 20px 18px 56px 10px;
  }
  .tl::before {
    left: 28px;
  }
  .tl-item {
    grid-template-columns: calc(var(--dot) + 2 * var(--amp) + 10px) minmax(0,1fr);
    padding-bottom: 40px;
  }
  .tl-item + .tl-item {
    margin-top: 0;
  }
  .tl-node {
    grid-column: 1;
    margin-top: 28px;
  }
  .tl-text,
  .tl-item--r .tl-text {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    max-width: none;
    padding: 0 0 0 14px;
  }
  .tl.is-armed .tl-text,
  .tl.is-armed .tl-item--r .tl-text {
    transform: translate3d(14px,0,0);
  }
  .tl h4 {
    font-size: 24px;
    margin-bottom: 8px;
  }
  .tl h4.pair {
    font-size: 22px;
  }
  .tl blockquote {
    font-size: 17px;
  }
  .lineage .tl .thinker-era {
    font-size: 11px;
    margin-bottom: 6px;
  }
}
/* Finale: Platz unter dem letzten Punkt fuer Tropfen und Horizont */
.tl.tl--finale {
  padding-bottom: 300px;
}
.tl-fin .tl-hz {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: butt;
}
.tl-fin .tl-hz-glow {
  fill: none;
  stroke-width: 7;
  filter: blur(5px);
}
.tl-fin .tl-lightpath {
  filter: blur(1.95px);
}
/* Glitzern auf dem Meer, wie auf der Startseite: kleine Rauten, die leise funkeln */
.tl-fin .tl-glint {
  fill: #FFF1D2;
  animation: twinkle var(--td,3.6s) ease-in-out var(--dl,0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tl-fin .tl-glint {
    animation: none;
    opacity: .6;
  }
}
.tl-fin .tl-rip {
  fill: none;
  stroke: #FFD9A0;
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.tl-fin .tl-drop,
.tl-fin .tl-flash,
.tl-fin .tl-band,
.tl-fin .tl-sunglow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@media (max-width:720px) {
  .tl.tl--finale {
    padding-bottom: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl.is-armed .tl-dot,
  .tl.is-armed .tl-text {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .tl-dot::after {
    display: none;
  }
  .tl-dot,
  .tl-dot::before {
    animation: none !important;
  }
  .tl-dot::before {
    opacity: .4 !important;
    transform: scale(.72) !important;
  }
  .tl-node::before,
  .tl-node::after {
    display: none;
  }
}
/* ===== sc-sun-day ===== */
/* ===== Tag: die aufgehende Sonne hellt die ganze Seite auf =====
     Ausgeloest mit dem Sonnenaufgang am Ende der Zeitleiste (body.sc-day).
     Der Nachthimmel blendet in den Lavendel-Tag, der Mond zieht nach oben
     weg, alle Schrift wechselt zu Navy, die Linie wird kraeftiger. */
.poster-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, #B7BAE2 0%, var(--c-lavender) 45%, #C9C2E0 80%, #CFC0D6 100%);
  transition: opacity 4.5s cubic-bezier(.4,0,.2,1);
}
body.sc-day .poster-wrap::after {
  opacity: 1;
}
body {
  transition: background-color 4.5s ease;
}
html.sc-day-html,
body.sc-day {
  background-color: var(--c-lavender) !important;
}
.moon-top {
  transition: opacity 2.4s ease, transform 3.6s cubic-bezier(.4,0,.2,1);
}
body.sc-day .moon-top {
  opacity: 0;
  transform: translate3d(0,-40vh,0);
}
.t-hero-quote,
.t-hero-cite,
.lineage .section-label,
.lineage .section-title,
.lineage .section-title em,
.lineage .section-lede,
.lineage .tl .tl-text,
.lineage .tl .tl-text h4,
.lineage .tl .tl-text blockquote,
.lineage .tl .tl-text .thinker-era,
.lineage .tl .tl-text .thinker-work,
.lineage .tl .tl-text .thinker-work span {
  transition: color 3s ease, text-shadow 3s ease, opacity .9s ease, transform 1.2s cubic-bezier(.16,1,.3,1);
}
body.sc-day .t-hero-quote {
  color: var(--c-navy) !important;
  text-shadow: 0 2px 30px rgba(255,248,240,.35) !important;
}
body.sc-day .t-hero-cite {
  color: var(--c-rust) !important;
}
body.sc-day .lineage .section-label {
  color: var(--c-rust) !important;
}
body.sc-day .lineage .section-title {
  color: var(--c-navy) !important;
}
body.sc-day .lineage .section-title em {
  color: var(--c-violet) !important;
}
body.sc-day .lineage .section-lede {
  color: rgb(var(--c-navy-rgb) / .78) !important;
}
body.sc-day .lineage .tl .tl-text {
  text-shadow: 0 1px 14px rgba(255,248,240,.3) !important;
}
body.sc-day .lineage .tl .tl-text h4,
body.sc-day .lineage .tl .tl-text blockquote {
  color: var(--c-navy) !important;
}
body.sc-day .lineage .tl .tl-text .thinker-era {
  color: var(--c-rust) !important;
}
body.sc-day .lineage .tl .tl-text .thinker-work {
  color: rgb(var(--c-navy-rgb) / .72) !important;
}
body.sc-day .lineage .tl .tl-text .thinker-work span {
  color: var(--c-rust) !important;
  opacity: .85;
}
/* Linie: im Hellen die gleichen Farbstufen, nur tiefer gesaettigt */
.tl-svg stop,
.tl-svg .tl-base {
  transition: stop-color 3s ease, stroke 3s ease;
}
body.sc-day .tl-svg .tl-base {
  stroke: rgb(var(--c-navy-rgb) / .14);
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(1) {
  stop-color: #5A5DB4;
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(2) {
  stop-color: #4566D8;
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(3) {
  stop-color: #7254C8;
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(4) {
  stop-color: #B4578A;
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(5) {
  stop-color: #D9702E;
}
body.sc-day .tl-svg linearGradient[id^="tlGrad"] stop:nth-child(6) {
  stop-color: #E4601A;
}
.tl-dot {
  transition: background 3s ease;
}

/* Lavendel-Tinte ueber der Mondscheibe (Kant-Zitat): ohne Mond auch keine Tinte */
body.sc-day .moonink {
  opacity: 0 !important;
  transition: opacity 1.6s ease !important;
}
/* Voegel ersetzen die Sterne: wenige kleine Gruppen und einzelne, ueber
     die ganze Laenge verteilt, nur am Rand. */
.day-birds {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.day-birds svg {
  position: absolute;
  overflow: visible;
  opacity: 0;
  transition: opacity 3s ease var(--bd,0s);
}
body.sc-day .day-birds svg {
  opacity: .5;
}
body.sc-day .day-birds.is-pre svg {
  opacity: 0;
  transition: none;
}
.day-birds path {
  fill: none;
  stroke: #3E3A6B;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Drift auf dem kleinen svg selbst (nicht im SVG-Inneren): so uebernimmt die Grafikkarte die Bewegung */
.day-birds svg {
  will-change: translate;
  animation: birdDrift var(--dt,26s) ease-in-out infinite alternate;
}
@keyframes birdDrift{ from{ translate: 0 0; } to{ translate: var(--dx,14px) -4px; } }
@media (prefers-reduced-motion: reduce) {
  .day-birds svg {
    animation: none;
  }
}
/* ===== sc-sun-day-3 ===== */
/* Am Tag: jeder Punkt ist eine kleine Sonne, orange im Kern, heller Ring,
     ein weicher Schein, der sehr langsam atmet (je Punkt leicht versetzt). */
body.sc-day .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);
}
body.sc-day .tl .tl-item .tl-dot {
  animation: dotGlow 7s ease-in-out infinite !important;
}
body.sc-day .tl .tl-item:nth-child(3n/**/+2) .tl-dot {
  animation-delay: -2.3s !important;
}
body.sc-day .tl .tl-item:nth-child(3n) .tl-dot {
  animation-delay: -4.6s !important;
}
@keyframes dotGlow{
    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) {
  body.sc-day .tl .tl-item .tl-dot {
    animation: none !important;
  }
}
/* ===== sc-sun-day-4 ===== */
/* Hero: Kant (Nacht, Sterne) und Nietzsche (Mittag, Sonne) liegen
     uebereinander. Mit dem Tag wechselt das Zitat weich. */
.t-qstack {
  display: grid;
  width: 100%;
  position: relative;
  z-index: 1;
}
.t-q {
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 2.4s ease, filter 2.4s ease, transform 2.8s cubic-bezier(.4,0,.2,1);
}
.t-q--noon {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0,10px,0);
  pointer-events: none;
}
body.sc-day .t-q--night {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0,-10px,0);
  pointer-events: none;
}
body.sc-day .t-q--noon {
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
}
/* Himmelsschein: keine Sonnenscheibe, nur Licht, das von oben auf das
     Zitat faellt. Zwei Strahlenfaecher schwingen sehr langsam gegeneinander. */
.t-rays {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 118vh;
  height: 118lvh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 4.5s ease 1s;
}
body.sc-day .t-rays {
  opacity: 1;
}
.t-rays i {
  position: absolute;
  display: block;
}
.t-rays-glow {
  inset: 0;
  background: radial-gradient(ellipse 62% 36% at 50% -4%, rgba(255,248,232,.9) 0%, rgba(255,238,208,.42) 42%, rgba(255,232,200,0) 78%);
}
.t-rays-a,
.t-rays-b {
  top: 0;
  bottom: 0;
  left: -30%;
  right: -30%;
  transform-origin: 50% -18%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.25) 65%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.25) 65%, transparent 88%);
}
.t-rays-a {
  background: conic-gradient(from 148deg at 50% -18%,
      rgba(255,246,226,0) 0deg,  rgba(255,246,226,.30) 3deg,  rgba(255,246,226,0) 6.5deg,
      rgba(255,246,226,0) 11deg, rgba(255,246,226,.42) 15deg, rgba(255,246,226,0) 19deg,
      rgba(255,246,226,0) 24deg, rgba(255,246,226,.24) 26.5deg, rgba(255,246,226,0) 29deg,
      rgba(255,246,226,0) 33deg, rgba(255,246,226,.38) 37deg, rgba(255,246,226,0) 41deg,
      rgba(255,246,226,0) 47deg, rgba(255,246,226,.28) 51deg, rgba(255,246,226,0) 55deg,
      rgba(255,246,226,0) 60deg, rgba(255,246,226,.2) 62deg, rgba(255,246,226,0) 64deg,
      rgba(255,246,226,0) 360deg);
  animation: raySway 24s ease-in-out infinite alternate;
}
.t-rays-b {
  background: conic-gradient(from 154deg at 50% -18%,
      rgba(255,236,200,0) 0deg,  rgba(255,236,200,.22) 5deg,  rgba(255,236,200,0) 9deg,
      rgba(255,236,200,0) 17deg, rgba(255,236,200,.26) 21deg, rgba(255,236,200,0) 25deg,
      rgba(255,236,200,0) 30deg, rgba(255,236,200,.3) 34deg, rgba(255,236,200,0) 38deg,
      rgba(255,236,200,0) 44deg, rgba(255,236,200,.2) 47deg, rgba(255,236,200,0) 50deg,
      rgba(255,236,200,0) 360deg);
  animation: raySway 31s ease-in-out -9s infinite alternate-reverse, rayBreath 11s ease-in-out infinite alternate;
}
@keyframes raySway{ from{ transform:rotate(-1.8deg); } to{ transform:rotate(1.8deg); } }
@keyframes rayBreath{ from{ opacity:.5; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .t-rays-a,
  .t-rays-b {
    animation: none;
  }
}
/* ===== sc-tl-quotes ===== */
/* Originalzitat + Uebersetzung darunter, gleich gut lesbar wie das Original */
.lineage .tl .tl-text .tl-trans {
  margin: 10px 0 0;
  font-family: "EB Garamond",Georgia,serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: rgb(var(--c-cream-rgb) / .86) !important;
  transition: color 3s ease;
}
body.sc-day .lineage .tl .tl-text .tl-trans {
  color: var(--c-navy) !important;
}
@media (max-width:980px) {
  .lineage .tl .tl-text .tl-trans {
    font-size: 18px;
  }
}
@media (max-width:720px) {
  .lineage .tl .tl-text .tl-trans {
    font-size: 17px;
  }
}
.lineage .tl .thinker-work a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgb(var(--c-coral-soft-rgb) / .45);
  transition: text-decoration-color .3s;
}
.lineage .tl .thinker-work a:hover {
  text-decoration-color: currentColor;
}
body.sc-day .lineage .tl .thinker-work a {
  text-decoration-color: rgb(var(--c-rust-rgb) / .4);
}
/* ===== sc-moon-top ===== */
/* Mond oben verankert (wie Annual Forum): gleiche Geometrie wie der Himmel,
     aber absolut positioniert, damit er mit der Seite nach oben wegscrollt */
.moon-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.moon-top svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* ===== sc-star-soft ===== */
.poster-stars .nstar {
  animation-name: nstarSoft !important;
  animation-duration: calc(var(--td,3.4s) * 1.5) !important;
}
@keyframes nstarSoft{ 0%,100%{ opacity:.32; } 50%{ opacity:.92; } }
/* ===== sc-hero-instant ===== */
.t-wait .t-qstack {
  opacity: 0;
}
.t-wait.t-ready .t-qstack {
  opacity: 1;
  transform: none;
}
/* ===== sc-noon-up-css ===== */
/* Zurueck zum Mittag: nur im Tagmodus, nach vollendeter Aufhellung */
.sc-noon-up {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 26px 0 10px;
  max-width: calc(100vw - 32px);
  border-radius: 999px;
  cursor: pointer;
  color: var(--c-navy);
  isolation: isolate;
  border: 1.5px solid rgba(238,122,44,.72);
  background: linear-gradient(180deg, rgba(255,251,244,.96), rgba(255,244,230,.93));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 0 4px rgba(238,122,44,.1), 0 12px 32px -14px rgb(var(--c-rust-rgb) / .38), 0 0 0 1px rgba(255,255,255,.55) inset;
  font-family: "EB Garamond",Georgia,serif;
  font-style: italic;
  font-size: 20.5px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%,18px,0);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), visibility 0s linear .9s, box-shadow .35s ease, border-color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.sc-noon-up.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%,0,0);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), visibility 0s, box-shadow .35s ease, border-color .35s ease;
}
.sc-noon-up__txt {
  position: relative;
  padding: 2px 0 3px;
}
.sc-noon-up:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 4px;
}
/* einmaliges Aufhellen des ganzen Buttons beim Erscheinen, danach ruhig (kein Pulsieren) */
.sc-noon-up::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(140% 220% at 6% 50%, rgba(255,226,170,.95) 0%, rgba(255,196,120,.55) 38%, rgba(255,214,160,.35) 70%, rgba(255,232,200,.25) 100%);
  opacity: 0;
}
.sc-noon-up.is-on::after {
  animation: scNoonWash 2.8s ease-in-out .35s both;
}
@keyframes scNoonWash{ 0%{ opacity:0; } 28%{ opacity:1; } 100%{ opacity:.16; } }
/* Symbol: die kleine Sonne der Zeitleiste (Punkt, Korona mit gleichmaessigem Lavendel-Schein nach aussen, sternfoermige Strahlen Orange bis Rot, zwei Lichtpunkte) */
.sc-noon-up__sun {
  --d: 13px;
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}
.sc-noon-up__sun i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.sc-noon-up__dot {
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background: radial-gradient(circle, #EE7A2C 0 38%, #FFF6EA 40% 58%, transparent 60%);
  background: radial-gradient(circle, #FFB45A 0 22%, #EE6A1E 38%, #FFF3DC 40% 58%, transparent 60%);
  box-shadow: inset 0 0 0 2px #EE6A1E, 0 0 10px 2px rgba(255,140,50,.75), 0 0 22px 6px rgba(255,120,40,.35);
}
.sc-noon-up__corona {
  width: calc(var(--d) * 3.3);
  height: calc(var(--d) * 3.3);
  margin: calc(var(--d) * -1.65) 0 0 calc(var(--d) * -1.65);
  background: radial-gradient(circle, rgba(255,248,226,1) 0%, rgba(255,210,128,1) 13%, rgba(255,150,64,.88) 26%, rgba(238,112,60,.6) 34%, rgba(217,143,176,.46) 43%, rgba(169,150,232,.5) 51%, rgba(176,182,240,.42) 59%, rgb(var(--c-lavender-rgb) / .2) 67%, transparent 75%);
  opacity: .78;
  transform: scale(.9);
}
.sc-noon-up__rays {
  width: calc(var(--d) * 3.9);
  height: calc(var(--d) * 3.9);
  margin: calc(var(--d) * -1.95) 0 0 calc(var(--d) * -1.95);
  background: radial-gradient(circle, #F2903A 22%, #EE7A2C 30%, #E4701F 38%, #D9673A 44%, #D24512 51%, #C2350A 60%);
  filter: blur(.9px);
  -webkit-mask: repeating-conic-gradient(from 8deg, #000 0deg, transparent 8deg, transparent 22deg, #000 30deg),
                 radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(from 8deg, #000 0deg, transparent 8deg, transparent 22deg, #000 30deg),
                 radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
  mask-composite: intersect;
  opacity: .92;
  transform: scale(1.04) rotate(10deg);
}
.sc-noon-up__spark {
  width: 5px;
  height: 5px;
  background: #FFC277;
  box-shadow: 0 0 6px 2px rgba(240,128,60,.6);
  opacity: .9;
  transform: translate(0,-2px) scale(.85);
}
.sc-noon-up__spark--a {
  margin: calc(var(--d) * -.5 - 8px) 0 0 calc(var(--d) * .5 + 4px);
}
.sc-noon-up__spark--b {
  background: #C9CFFF;
  box-shadow: 0 0 6px 2px rgba(143,168,255,.6);
  width: 4px;
  height: 4px;
  margin: calc(var(--d) * .5 + 3px) 0 0 calc(var(--d) * -.5 - 8px);
}
/* Ablauf beim Erscheinen wie bei jedem Punkt der Zeitleiste, endet in einem ruhigen Zustand */
.sc-noon-up.is-on .sc-noon-up__corona {
  animation: scNoonSun 2.2s cubic-bezier(.16,1,.3,1) .35s both, scNoonBurn 6.4s ease-in-out 2.55s infinite;
}
.sc-noon-up.is-on .sc-noon-up__rays {
  animation: scNoonRays 2.4s cubic-bezier(.16,1,.3,1) .38s both, scNoonFlame 5.6s ease-in-out 2.78s infinite;
}
.sc-noon-up.is-on .sc-noon-up__dot {
  animation: scNoonCore 1.6s ease-out .35s both;
}
.sc-noon-up.is-on .sc-noon-up__spark--a {
  animation: scNoonSpark 1.6s ease-out .77s both;
}
.sc-noon-up.is-on .sc-noon-up__spark--b {
  animation: scNoonSpark 1.5s ease-out .97s both;
}
/* "ein aus sich rollendes Rad" (Zarathustra, Von den drei Verwandlungen): die ganze Sonne samt den zwei Lichtpunkten */
.sc-noon-up.is-on .sc-noon-up__sun {
  animation: scNoonWheel 16.2s linear 2.6s infinite;
}
/* ruhiger Rhythmus: halbe Umdrehung (3,6 s), lange Ruhe (4,5 s) mit einem leisen Wiegen,
     halbe Umdrehung, lange Ruhe ganz ohne Bewegung */
@keyframes scNoonWheel{
    0%    { rotate:0deg;     animation-timing-function:cubic-bezier(.45,0,.25,1); }
    22.2% { rotate:180deg;   animation-timing-function:linear; }
    31%   { rotate:180deg;   animation-timing-function:ease-in-out; }
    34.5% { rotate:183.5deg; animation-timing-function:ease-in-out; }
    38%   { rotate:177.5deg; animation-timing-function:ease-in-out; }
    41%   { rotate:180deg;   animation-timing-function:linear; }
    50%   { rotate:180deg;   animation-timing-function:cubic-bezier(.45,0,.25,1); }
    72.2% { rotate:360deg;   animation-timing-function:linear; }
    100%  { rotate:360deg; }
  }
@keyframes scNoonSun{ 0%{ opacity:0; transform:scale(.2); } 30%{ opacity:1; transform:scale(1.12); } 100%{ opacity:.78; transform:scale(.9); } }
@keyframes scNoonBurn{ 0%,100%{ opacity:.78; transform:scale(.9); } 35%{ opacity:.86; transform:scale(.925); } 70%{ opacity:.74; transform:scale(.89); } }
@keyframes scNoonFlame{ 0%,100%{ opacity:.92; transform:scale(1.04) rotate(10deg); } 40%{ opacity:.82; transform:scale(1.06) rotate(10deg); } 75%{ opacity:.97; transform:scale(1.03) rotate(10deg); } }
@keyframes scNoonRays{ 0%{ opacity:0; transform:scale(.55) rotate(0deg); } 35%{ opacity:1; transform:scale(1) rotate(5deg); } 100%{ opacity:.92; transform:scale(1.04) rotate(10deg); } }
@keyframes scNoonCore{ 0%{ filter:brightness(1); } 25%{ filter:brightness(1.6) sepia(.45) saturate(1.5); } 100%{ filter:brightness(1.04); } }
@keyframes scNoonSpark{ 0%{ opacity:0; transform:scale(0) translate(0,0); } 35%{ opacity:1; transform:scale(1.1) translate(0,-1px); } 100%{ opacity:.9; transform:translate(0,-2px) scale(.85); } }
@media (hover:hover) {
  .sc-noon-up:hover {
    border-color: #EE7A2C;
    box-shadow: 0 0 0 5px rgba(238,122,44,.16), 0 14px 36px -14px rgb(var(--c-rust-rgb) / .45), 0 0 0 1px rgba(255,255,255,.6) inset;
  }
  .sc-noon-up__sun {
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .sc-noon-up.is-on:hover .sc-noon-up__sun {
    transform: translate3d(0,-2px,0);
  }
}
@media (max-width:720px) {
  .sc-noon-up {
    height: 48px;
    gap: 8px;
    font-size: 17.5px;
    padding: 0 18px 0 6px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .sc-noon-up__sun {
    --d: 11px;
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}
@media (max-width:380px) {
  .sc-noon-up {
    font-size: 16.5px;
    padding-right: 16px;
  }
}
@media (max-width:340px) {
  .sc-noon-up {
    font-size: 15px;
    gap: 5px;
    padding: 0 13px 0 4px;
  }
  .sc-noon-up__sun {
    --d: 10px;
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sc-noon-up {
    transition: opacity .3s ease, visibility 0s !important;
    transform: translate3d(-50%,0,0);
  }
  .sc-noon-up.is-on::after,
  .sc-noon-up.is-on .sc-noon-up__sun,
  .sc-noon-up.is-on .sc-noon-up__sun i {
    animation: none !important;
  }
}
@media print {
  .sc-noon-up {
    display: none !important;
  }
}

/* ===== tl-hesiod ===== */
/* Hesiod, Theogonie 371-374: Theia gebiert Helios, Selene und Eos. Steht zwischen dem Ende
   der Linie und der aufgehenden Sonne; Griechisch links, Uebersetzung rechts, der Tropfen
   faellt durch die Mitte. Ohne JavaScript steht das Zitat schlicht unter der Zeitachse. */
.tl.tl--finale {
  padding-bottom: calc(300px + var(--q-h, 0px));
}
.tl-hesiod {
  position: relative;
  z-index: 4;
  margin: 48px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--c-cream);
  transition: color 3s ease;
}
.tl-hesiod.is-placed {
  position: absolute;
  margin: 0;
  padding: 0;
}
.tl-hesiod__cols {
  display: grid;
  grid-template-columns: minmax(0, 530px) 120px minmax(0, 530px);
  justify-content: center;
  align-items: start;
}
.tl-hesiod__grc,
.tl-hesiod__tr {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.62;
  color: inherit;
}
.tl-hesiod__grc {
  grid-column: 1;
  text-align: right;
}
.tl-hesiod__tr {
  grid-column: 3;
  text-align: left;
  opacity: .92;
}
.tl-hesiod .l {
  display: block;
}
.tl-hesiod__cite {
  margin-top: 26px;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-coral-soft);
  transition: color 3s ease;
}
/* die drei Kinder der Theia, leise in ihren Farben */
.tl-hesiod .g-helios { color: #F6C453; }
.tl-hesiod .g-selene { color: #CFD2FF; }
.tl-hesiod .g-eos { color: #F7A99B; }
.tl-hesiod .g-helios,
.tl-hesiod .g-selene,
.tl-hesiod .g-eos {
  transition: color 3s ease;
}
body.sc-day .tl-hesiod {
  color: var(--c-navy);
}
body.sc-day .tl-hesiod__cite {
  color: var(--c-rust);
}
body.sc-day .tl-hesiod .g-helios { color: #B5650A; }
body.sc-day .tl-hesiod .g-selene { color: #4C4FA6; }
body.sc-day .tl-hesiod .g-eos { color: #B8435A; }
/* Entstehen: Zeile fuer Zeile aus der Unschaerfe, Griechisch zuerst, dann die Uebersetzung */
.tl-hesiod.is-placed .l,
.tl-hesiod.is-placed .tl-hesiod__cite {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 10px, 0);
}
.tl-hesiod.is-placed.is-in .l,
.tl-hesiod.is-placed.is-in .tl-hesiod__cite {
  opacity: 1;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transform: none;
  transition: opacity 1.1s ease var(--d, 0ms), filter 1.3s ease var(--d, 0ms), transform 1.4s cubic-bezier(.16,1,.3,1) var(--d, 0ms);
}
.tl-hesiod__grc .l:nth-child(2) { --d: 160ms; }
.tl-hesiod__grc .l:nth-child(3) { --d: 320ms; }
.tl-hesiod__grc .l:nth-child(4) { --d: 480ms; }
.tl-hesiod__tr .l:nth-child(1) { --d: 700ms; }
.tl-hesiod__tr .l:nth-child(2) { --d: 860ms; }
.tl-hesiod__tr .l:nth-child(3) { --d: 1020ms; }
.tl-hesiod__tr .l:nth-child(4) { --d: 1180ms; }
.tl-hesiod__cite { --d: 1600ms; }
@media (max-width:980px) {
  .tl-hesiod__cols {
    grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  }
  .tl-hesiod__grc,
  .tl-hesiod__tr {
    font-size: 18px;
  }
}
@media (max-width:720px) {
  .tl.tl--finale {
    padding-bottom: calc(220px + var(--q-h, 0px));
  }
  .tl-hesiod__cols {
    display: block;
    padding: 0 22px;
  }
  .tl-hesiod__grc,
  .tl-hesiod__tr {
    text-align: center;
    font-size: 17px;
    line-height: 1.55;
  }
  .tl-hesiod__tr {
    margin-top: 18px;
  }
  .tl-hesiod__cite {
    margin-top: 20px;
    font-size: 10px;
    padding: 0 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl-hesiod.is-placed .l,
  .tl-hesiod.is-placed .tl-hesiod__cite {
    transition: none !important;
  }
}

/* ===== tl-gods ===== */
/* Die drei Kinder der Theia (Hesiod, Theogonie 371-374), als feine Zeichnungen nach
   Vasenbildern: Selene in der Mondscheibe (Nacht), Eos faehrt mit dem Viergespann der
   Sonne voraus aus dem Meer (Morgen, siehe sc-motion im Finale der Zeitachse), Helios
   erscheint am Tag zwischen Nietzsche-Zitat und Zeitachse. */
.moon-selene {
  opacity: 1;
}
/* Selenes Mond: hinter ihrer Scheibe steht der Mond, nur sein Rand schaut oben rechts hervor;
   sein Licht atmet ganz ruhig (nur Helligkeit, keine Groessenaenderung) */
.moon-rim {
  animation: moonRim 12s ease-in-out infinite;
}
/* Schrift ueber der Mondscheibe: ein dunkler Hof haelt sie lesbar */
.t-q--night .t-hero-quote {
  text-shadow: 0 0 3px rgba(10,16,62,.9), 0 0 14px rgba(10,16,62,.75), 0 2px 34px rgb(var(--c-navy-deep-rgb) / .65);
}
@keyframes moonRim{ 0%,100%{ opacity: .82; } 50%{ opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .moon-rim {
    animation: none;
  }
}
.t-helios {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -44px, 0);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
body.sc-day .t-helios {
  opacity: .5;
  transform: translate3d(-50%, 0, 0);
  transition: opacity 3s ease 2.4s, transform 4.2s cubic-bezier(.22,.8,.3,1) 2.4s;
}
@media (prefers-reduced-motion: reduce) {
  .t-helios,
  body.sc-day .t-helios {
    transition: none;
  }
}

/* Eos als Vorbotin (nach Evelyn De Morgan, "Eos", 1895), als kleiner Sonnenaufgang:
   1. unter ihr zeichnet sich von der Mitte aus ein Horizont, darueber bluet Morgenlicht auf,
   2. sie steigt weich aus dem Horizont auf: eine weiche Lichtkante statt einer harten Schnittlinie,
      dazu ein Hauch Groesse und Schaerfe,
   3. die Muendung ihres Krugs sitzt genau auf der Spitze der Linie; sie neigt den Krug,
      und im Moment der groessten Neigung loest sich der Tropfen,
   4. danach schwebt sie ganz leise. */
@property --cut {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.tl-eos {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
  background: url(../img/eos.webp) center / contain no-repeat;
  opacity: 0;
  --cut: var(--eh, 140px);
  transform: translate3d(0, var(--eh, 140px), 0) scale(.985);
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cut) - 34px), transparent calc(100% - var(--cut)));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--cut) - 34px), transparent calc(100% - var(--cut)));
  transform-origin: var(--ox, 63.1%) var(--oy, 45.1%);
  --pour: -3deg;
}
.tl-eos.is-mirror {
  background-image: url(../img/eos-m.webp);
  --pour: 3deg;
}
.tl-eos.is-in {
  opacity: .9;
  --cut: -40px;
  transform: none;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: --cut 2.9s cubic-bezier(.19,1,.22,1) .6s, transform 2.9s cubic-bezier(.19,1,.22,1) .6s,
    filter 2s cubic-bezier(.4,0,.2,1) .8s, opacity 1.2s ease .6s;
}
/* Neigen: der Krug kippt um seine Muendung, bleibt kurz, kehrt sanft zurueck; danach leises Schweben */
.tl-eos.is-pour {
  animation: eosPour 2.4s cubic-bezier(.45,0,.25,1) 1, eosFloat 9s ease-in-out 2.4s infinite;
}
@keyframes eosPour{ 0%{ rotate: 0deg; } 26%{ rotate: var(--pour); } 62%{ rotate: var(--pour); } 100%{ rotate: 0deg; } }
@keyframes eosFloat{ 0%,100%{ translate: 0 0; } 50%{ translate: 0 -4px; } }
body.sc-day .tl-eos.is-in {
  opacity: .78;
}
.tl-drop-front {
  position: absolute;
  z-index: 6;
  display: block;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 54%;
}
.tl-eos-hz {
  position: absolute;
  z-index: 5;
  display: block;
  height: 1.5px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,214,170,0), rgba(255,226,190,.95) 50%, rgba(255,214,170,0));
  box-shadow: 0 0 10px rgba(255,190,150,.55);
  opacity: 0;
  transform: scaleX(0);
}
.tl-eos-hz.is-in {
  animation: eosHz 4.4s cubic-bezier(.33,0,.2,1) forwards;
}
@keyframes eosHz{
  0%   { opacity: 0; transform: scaleX(0); }
  12%  { opacity: 1; }
  30%  { transform: scaleX(1); }
  60%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.06); }
}
/* Eos: beim Aufstieg ein weicher Morgenschein hinter ihr, der wieder ganz vergeht,
   bevor sie den Krug neigt */
.tl-eos-glow {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,226,200,.8), rgba(247,169,155,.34) 46%, rgba(247,169,155,0) 100%);
  clip-path: inset(0 0 50% 0);
  opacity: 0;
  transform: scale(.3);
}
.tl-eos-glow.is-in {
  animation: eosGlow 3.2s cubic-bezier(.33,0,.25,1) .3s forwards;
}
@keyframes eosGlow{ 0%{ opacity: 0; transform: scale(.35); } 40%{ opacity: 1; transform: scale(1.05); } 70%{ opacity: .55; transform: scale(1.12); } 100%{ opacity: 0; transform: scale(1.18); } }

/* Selene: alle 14 Sekunden leuchten die Augen im Maeanderring gleichzeitig auf (hell, mit warmem Hof);
   gleich danach schimmert der ganze Ring weich nach */
.moon-eyes {
  opacity: 0;
  animation: eyesOn 14s cubic-bezier(.3,0,.2,1) 4s infinite;
}
@keyframes eyesOn{ 0%{ opacity: 0; } 5%{ opacity: 1; } 15%{ opacity: 1; } 26%{ opacity: 0; } 100%{ opacity: 0; } }
.moon-eyes-glow {
  opacity: 0;
  animation: eyesGlow 14s cubic-bezier(.3,0,.2,1) 4s infinite;
}
@keyframes eyesGlow{ 0%{ opacity: 0; } 6%{ opacity: .95; } 14%{ opacity: .8; } 27%{ opacity: 0; } 100%{ opacity: 0; } }
.moon-ring-flash {
  opacity: 0;
  animation: ringFlash 14s ease-out 4s infinite;
}
@keyframes ringFlash{ 0%,7%{ opacity: 0; } 12%{ opacity: .8; } 18%{ opacity: .55; } 30%{ opacity: 0; } 100%{ opacity: 0; } }
.moon-ring-halo {
  opacity: 0;
  animation: ringHalo 14s ease-out 4s infinite;
}
@keyframes ringHalo{ 0%{ opacity: 0; } 6%{ opacity: .35; } 13%{ opacity: .8; } 22%{ opacity: .45; } 34%{ opacity: 0; } 100%{ opacity: 0; } }

/* Helios ist nur angedeutet: seine vier gefluegelten Pferde (nach Philips Galle / Jan van der Straet, Sol),
   der Gott selbst bleibt ausserhalb des Bildes. Er steigt einmal auf, steht dann still,
   und ein einzelner Lichtimpuls laeuft durch die Strahlen. */
@property --pr {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.t-rays-pulse {
  top: 0;
  bottom: 0;
  left: -30%;
  right: -30%;
  --pr: 0px;
  background: radial-gradient(circle at 50% -18%,
      rgba(255,226,160,0) calc(var(--pr) - 260px),
      rgba(255,232,178,.75) calc(var(--pr) - 110px),
      rgba(255,246,222,1) calc(var(--pr) - 40px),
      rgba(255,240,205,0) var(--pr));
  -webkit-mask-image: conic-gradient(from 148deg at 50% -18%,
      transparent 0deg, #000 3deg, transparent 7deg, #000 11deg, #000 15deg, transparent 19deg,
      transparent 23deg, #000 27deg, transparent 31deg, transparent 33deg, #000 37.5deg, #000 40deg, transparent 43deg,
      transparent 47deg, #000 51deg, #000 53deg, transparent 56deg, transparent 59deg, #000 62deg, transparent 65deg, transparent 360deg), linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  mask-image: conic-gradient(from 148deg at 50% -18%,
      transparent 0deg, #000 3deg, transparent 7deg, #000 11deg, #000 15deg, transparent 19deg,
      transparent 23deg, #000 27deg, transparent 31deg, transparent 33deg, #000 37.5deg, #000 40deg, transparent 43deg,
      transparent 47deg, #000 51deg, #000 53deg, transparent 56deg, transparent 59deg, #000 62deg, transparent 65deg, transparent 360deg), linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mix-blend-mode: screen;
  opacity: 0;
}
body.helios-on .t-rays-pulse {
  animation: rayPulse 30s linear 3.4s infinite;
}
/* ein Impuls von 3,2 s, danach Ruhe bis zum naechsten (alle 30 s) */
@keyframes rayPulse{ 0%{ --pr: 140px; opacity: 0; animation-timing-function: cubic-bezier(.45,.05,.4,1); } 1.28%{ opacity: 1; } 7.68%{ opacity: .85; } 10.67%{ --pr: 1300px; opacity: 0; } 100%{ --pr: 1300px; opacity: 0; } }
/* die Quelle zieht im selben Moment kurz an, dann laeuft der Impuls hinaus */
body.helios-on .t-rays-glow {
  animation: raySource 30s ease-in-out 3.1s infinite;
}
@keyframes raySource{ 0%,8.67%,100%{ filter: none; } 2.6%{ filter: brightness(1.25) saturate(1.3); } }
.t-helios {
  /* Grafik traegt Farbe und Gegenlicht-Verlauf selbst; keine Maske, damit an den Raendern nichts durchscheint */
  background: url(../img/helios-chariot.webp) center / 100% 100% no-repeat;
}
body.sc-day .t-helios {
  opacity: 0;
  transform: translate3d(-50%, -44px, 0);
  transition: none;
}
body.sc-day.helios-on .t-helios {
  opacity: .95;
  transform: translate3d(-50%, 0, 0);
  transition: opacity 1.8s ease, transform 4s cubic-bezier(.16,1,.3,1);
}
/* Sonnenwagen: kommt von oben herab (startet weiter oben, also staerker angeschnitten) */
body.sc-day .t-helios {
  transform: translate3d(-50%, -34%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .tl-eos,
  .tl-eos.is-in {
    transition: none;
    filter: none;
    transform: none;
    --cut: -40px;
  }
  .tl-eos.is-pour,
  .tl-eos-hz.is-in,
  .moon-eyes,
  .moon-eyes-glow,
  .tl-eos-glow.is-in,
  .moon-ring-halo,
  .moon-ring-flash,
  body.helios-on .t-rays-pulse,
  body.helios-on .t-rays-glow {
    animation: none;
  }
  body.sc-day.helios-on .t-helios {
    transition: none;
  }
}

/* ===== Rendern sparen =====
   Animationen laufen nur, wo man sie sieht: ausserhalb des Bildschirms (sc-off, gesetzt von sc-perf.js)
   und im jeweils unsichtbaren Tageszustand halten sie an. Optisch aendert sich nichts. */
.sc-off,
.sc-off *,
.sc-off::before,
.sc-off::after,
.sc-off *::before,
.sc-off *::after,
body.sc-day .moon-top *,
body:not(.sc-day) .t-rays i,
body:not(.sc-day) .day-birds svg,
body.sc-day .poster-stars *,
body.sc-day .tl .tl-item.sc-off .tl-dot,
body .tl .tl-item.sc-off .tl-dot::before,
body .tl .tl-item.sc-off .tl-dot::after {
  animation-play-state: paused !important;
}
.t-rays-a,
.t-rays-b {
  will-change: transform;
}

/* ===== Finale im Bild der Startseite =====
   Meer und Morgenhimmel stammen aus dem Tagbild der Startseite (img/sunrise-sea, img/sunrise-sky);
   die hellen Wellenkaemme leuchten wie dort in drei Gruppen nacheinander auf. */
.tl-fin .tl-lightpath {
  display: none;
}
.tl-fin .tl-seaglow {
  opacity: .1;
  animation: tlSeaGlint 6s ease-in-out infinite both;
}
.tl-fin .tl-seaglow:nth-of-type(2) { animation-duration: 5.8s; }
.tl-fin .tl-seaglow:nth-of-type(3) { animation-duration: 7.3s; animation-delay: -2.6s; }
.tl-fin .tl-seaglow:nth-of-type(4) { animation-duration: 6.5s; animation-delay: -4.9s; }
@keyframes tlSeaGlint{ 0%,100%{ opacity: .1; } 38%{ opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
  .tl-fin .tl-seaglow { animation: none; opacity: .3; }
}

/* Selene: nach dem weissen Aufleuchten leuchten die Runen des Maeanderrings im dunklen Blau
   der Umrandung auf, alle zugleich, mit weichem Hof (gleicher 14-s-Takt wie Augen und Ring). */
.moon-runes {
  opacity: 0;
  animation: runesOn 14s ease-in-out 4s infinite;
}
@keyframes runesOn{ 0%,30%{ opacity: 0; } 37%{ opacity: 1; } 46%{ opacity: .85; } 56%,100%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .moon-runes { display: none; }
}
body.sc-day .moon-runes { animation: none; opacity: 0; }