/* ==========================================================================
   Fünf Monde · „Die Nacht atmet“ (Animations-Prototyp, Okt. 2026)
   Eigene Datei, damit sie sich leicht in /fm übernehmen lässt.
   Gehört zu js/anim.js. Ohne JS bzw. bei prefers-reduced-motion bleibt alles statisch.
   Nur transform/opacity werden animiert (GPU-freundlich).
   ========================================================================== */

/* ---------- Hero: hochskaliertes Bild (WebP + JPG, mobil eigener Ausschnitt mit Mond) ---------- */
.hero-photo{
  background-image:url("../images/hero-hd.jpg?v=3");
  background-image:image-set(url("../images/hero-hd.webp?v=3") type("image/webp"),url("../images/hero-hd.jpg?v=3") type("image/jpeg"));
}
@media(max-width:700px){
  .hero-photo{
    background-image:url("../images/hero-mobile.jpg?v=3");
    background-image:image-set(url("../images/hero-mobile.webp?v=3") type("image/webp"),url("../images/hero-mobile.jpg?v=3") type("image/jpeg"));
    background-position:50% 0;background-size:cover;
  }
}

/* Bühne = exakt die Fläche, die das Hintergrundbild einnimmt (Position/Größe setzt js/anim.js).
   Dadurch sitzen Mondschein, Nebel und Video bei jedem Zuschnitt über demselben Bildpunkt. */
.hero-stage{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;
  --mx:70.5%;--my:20.5%;--mw:21%}
.hero-stage.stage-bg{z-index:0}
.hero-stage.stage-fx{z-index:1;overflow:visible}
.hero-fx{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:block}

/* Mondschein: weicher, warmer Schein auf der Sichel, atmet langsam (7,5 s) */
.moon-glow{position:absolute;left:var(--mx);top:var(--my);width:var(--mw);aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,244,214,.42) 0%,rgba(255,236,196,.22) 14%,rgba(255,222,170,.08) 34%,rgba(255,214,160,0) 62%);
  transition:opacity 2.4s ease}
.anim-on .moon-glow{opacity:1;animation:fm-moon-breathe 8s ease-in-out infinite}
/* v12 (27.10.): Hero ohne Mond (Sichel + Halo aus hero-*.jpg/webp retuschiert, ?v=3) → Mondschein aus. Markup ist entfernt, Regel bleibt als Reserve. */
.moon-glow{display:none!important}
/* v7: Mondschein ruhiger und schwächer (v6: 0,5–0,92 / 0,97–1,04 war zu stark), Rhythmus 8 s bleibt */
@keyframes fm-moon-breathe{
  0%,100%{transform:translate(-50%,-50%) scale(.985);opacity:.38}
  50%    {transform:translate(-50%,-50%) scale(1.015);opacity:.56}
}

/* Nebelschleier: zwei halbtransparente Bänder über den Rhönhügeln, 95 s und 130 s pro Durchlauf.
   Breite 200 %, Kachel 50 % → Verschiebung um -50 % ist nahtlos. */
.mist{position:absolute;left:0;width:200%;pointer-events:none;opacity:0;transition:opacity 3s ease;
  background-repeat:repeat-x;background-size:50% 100%;will-change:transform}
.mist-1{top:34%;height:22%;
  background-image:
    radial-gradient(38% 46% at 18% 58%,rgba(236,232,244,.55),rgba(236,232,244,0) 70%),
    radial-gradient(30% 40% at 52% 46%,rgba(240,234,246,.42),rgba(240,234,246,0) 72%),
    radial-gradient(34% 44% at 84% 62%,rgba(232,228,240,.5),rgba(232,228,240,0) 70%)}
.mist-2{top:42%;height:20%;
  background-image:
    radial-gradient(42% 50% at 30% 50%,rgba(244,236,240,.45),rgba(244,236,240,0) 70%),
    radial-gradient(36% 46% at 74% 56%,rgba(236,232,244,.38),rgba(236,232,244,0) 72%)}
/* v2: Nebel kommt jetzt aus dem Hero-Video, die CSS-Bänder sind aus dem HTML entfernt. Regeln bleiben als Reserve. */
.anim-on .mist-1{opacity:.5;animation:fm-drift 95s linear infinite}
.anim-on .mist-2{opacity:.38;animation:fm-drift 130s linear infinite;animation-delay:-40s}
@keyframes fm-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* v2: Hero-Video über die ganze Bildfläche (gleicher Ausschnitt wie das Bild). Blendet erst ein, wenn es wirklich läuft. */
.hero-meadow{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 2.4s ease}
/* v3: nur der Nebelstreifen (y 152–392 von 624 px des Videobilds) */
.hero-mist{inset:auto;left:0;top:24.359%;width:100%;height:38.462%;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-meadow.is-playing{opacity:1}
.hero-meadow[hidden]{display:none}

/* v7: einzelne Mohnblüten als eigene Ebenen (js/anim.js layoutFlowers). Untergrund retuschiert, Blüte dreht starr um den Stängelfuß. */
.hero-flowers{position:absolute;inset:0;pointer-events:none}
.hero-flowers .fl{position:absolute;opacity:0;transition:opacity 1.2s ease}
.hero-flowers .fl.is-on{opacity:1}
.hero-flowers img,.hero-flowers canvas{position:absolute;inset:0;width:100%;height:100%;display:block}   /* Umbau 93: Pflanzen biegen sich per Canvas (anim.js drawPlant) */

/* Animationen pausieren, solange der Hero nicht sichtbar ist */
.hero.fx-paused .moon-glow,.hero.fx-paused .mist{animation-play-state:paused}
html.fx-hidden .nav-stars::before,html.fx-hidden .nav-stars::after{animation-play-state:paused}

/* ---------- Logo atmet ---------- */
.logo-anim{position:relative;display:block;line-height:0}
.logo-anim picture{position:relative;z-index:1;display:block}
.logo-glow{position:absolute;z-index:0;top:-20.9%;bottom:-20.9%;left:-21.9%;right:-21.9%;pointer-events:none;
  background:url("../images/logo-glow.png") center/100% 100% no-repeat;
  background:image-set(url("../images/logo-glow.webp") type("image/webp"),url("../images/logo-glow.png") type("image/png")) center/100% 100% no-repeat;
  opacity:0}
.logo-sheen{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask:url("../images/logo-goldmask.png") center/100% 100% no-repeat;
          mask:url("../images/logo-goldmask.png") center/100% 100% no-repeat}
.logo-sheen i{position:absolute;top:-15%;left:0;width:44%;height:130%;opacity:0;
  background:linear-gradient(104deg,rgba(255,250,232,0) 0%,rgba(255,248,226,.0) 28%,rgba(255,252,240,1) 50%,rgba(255,248,226,0) 72%,rgba(255,250,232,0) 100%);
  transform:translate3d(-130%,0,0) skewX(-12deg)}
.anim-on .logo-glow{animation:fm-logo-breathe 7s ease-in-out infinite}
.anim-on .logo-sheen i{animation:fm-sheen 13s ease-in-out infinite;animation-delay:2.5s}
/* Menü-Logo etwas zurückhaltender */
.site-nav .logo-glow{top:-14%;bottom:-14%;left:-15%;right:-15%}
.anim-on .site-nav .logo-glow{animation-name:fm-logo-breathe-soft}
@keyframes fm-logo-breathe{
  0%,100%{opacity:.18;transform:scale(.97)}
  50%    {opacity:.62;transform:scale(1.03)}
}
@keyframes fm-logo-breathe-soft{
  0%,100%{opacity:.1;transform:scale(.97)}
  50%    {opacity:.42;transform:scale(1.02)}
}
@keyframes fm-sheen{
  0%     {transform:translate3d(-130%,0,0) skewX(-12deg);opacity:0}
  2%     {opacity:.85}
  15%    {transform:translate3d(330%,0,0) skewX(-12deg);opacity:.85}
  16%,100%{transform:translate3d(330%,0,0) skewX(-12deg);opacity:0}
}
.fx-offscreen .logo-glow,.fx-offscreen .logo-sheen i{animation-play-state:paused}

/* ---------- v2: Logo-Video (Einstieg) ---------- */
.logo-video{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity 1.4s ease;pointer-events:none;
  -webkit-mask:url("../images/logo-video-mask.png?v=2") center/100% 100% no-repeat;
          mask:url("../images/logo-video-mask.png?v=2") center/100% 100% no-repeat}
.logo-video.is-playing{opacity:1}
/* v13: Alpha-Video (Chrome/Firefox/Edge) braucht keine Silhouetten-Maske mehr → äußere Haare schwingen frei.
   Nach dem Einblenden wird im Standbild darunter nur die Haarzone ausgeblendet (images/logo-under-mask.png), damit kein alter Haarumriss durchscheint. */
.logo-video.is-alpha{-webkit-mask:none;mask:none}
/* v17: ohne CSS-Maske (file:// blockiert sie): js/anim.js legt images/logo-intro-under.webp (Standbild mit leerer Mulde) ein und blendet das volle Standbild aus. */
.logo-anim .logo-under{position:absolute;z-index:1;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.logo-has-video.alpha-on .logo-under{display:block}
.logo-has-video.alpha-on picture{visibility:hidden}
/* Umbau 254: derselbe Schlagschatten wie am Standbild, sonst verschwindet er, wenn das Bild ausgeblendet wird. */
.intro-moon .logo-has-video.alpha-on .logo-video{filter:drop-shadow(0 12px 24px rgba(31,71,67,.28))}
.logo-video[hidden]{display:none}

/* ---------- v3: Scroll-Vollmond im Menü-Logo ----------
   7 gemalte Stufen (Sichel → Vollmond) liegen deckungsgleich über dem Logo; js/anim.js blendet je nach Scrollstand
   zwischen zwei benachbarten Stufen über. Ohne JS / bei weniger Bewegung bleibt das normale Logo. */
.logo-phase picture{z-index:2}
.moon-steps{position:absolute;z-index:3;inset:0;pointer-events:none}
.moon-steps img{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;display:block;will-change:opacity}
.moon-steps svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible} /* v6–v9: gerechnete Phase (v8/v9: Variante F, warmes Auffüllen, v9 mit Goldrand) */
.logo-phase.is-full .logo-glow{opacity:.55!important;animation:none!important;transform:scale(1.02);transition:opacity 1.2s ease}

/* ---------- v3: Sterne im Menü (der Nachthimmel scrollt mit) ----------
   Zwei Kachel-Ebenen aus wenigen kleinen SVG-Sternen, funkeln gegeneinander versetzt sehr langsam. */
.site-nav{isolation:isolate}
.nav-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nav-stars::before,.nav-stars::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.nav-stars::before{background-image:url("../images/nav-stars-a.svg");background-size:520px 110px;opacity:.75}
.nav-stars::after{background-image:url("../images/nav-stars-b.svg");background-size:430px 110px;background-position:190px 12px;opacity:.5}
/* 29.10.2026 v2 (Nik: „schau dir eher den Hero an“): Menü-Sterne = echte Sterne aus dem oberen Himmel des Hero-Bildes.
   ::before = aus hero-hd/hero-mobile freigestellte Sterne (gespiegelt, gleiche Größe/Helligkeit/Farbe/Dichte, Maßstab wie das Hero-Bild bei cover).
   ::after  = wenige weich funkelnde Sterne wie die Canvas-Sterne im Hero (gleiche Größe, Farbe, Rhythmus 10–22 s), nur bei .anim-on. */
.site-nav .nav-stars::before{background:url("../images/nav-sky-hd.webp?v=1") 15% 0/max(100%,calc(max(75svh,520px)*2.3336)) auto no-repeat;opacity:1}
.site-nav .nav-stars::after{background:none;opacity:1}
html.anim-on .site-nav .nav-stars::before,html.anim-on .site-nav .nav-stars::after{animation:none}
html.anim-on .site-nav .nav-stars::after{background:url("../images/nav-twinkle-hd.svg?v=1") 0 0/1280px 72px repeat-x}
@media(max-width:700px){
  .site-nav .nav-stars::before{background:url("../images/nav-sky-mobile.webp?v=1") 50% 0/max(100%,calc(70svh*.7231)) auto no-repeat}
  html.anim-on .site-nav .nav-stars::after{background:url("../images/nav-twinkle-mobile.svg?v=1") 0 0/390px 64px repeat-x}
}
/* Vollbild-Menü (mobil): gleicher Sternenhimmel, nahtlos gekachelt */
.mobile-menu::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url("../images/nav-sky-mobile-tile.webp?v=1") 50% 0/max(390px,100vw) auto repeat}
html.anim-on .mobile-menu::after{background:url("../images/nav-twinkle-mobile-tile.svg?v=1") 0 0/390px 600px repeat,url("../images/nav-sky-mobile-tile.webp?v=1") 50% 0/max(390px,100vw) auto repeat}
@media(prefers-reduced-motion:reduce){html.anim-on .site-nav .nav-stars::after{background:none}html.anim-on .mobile-menu::after{background:url("../images/nav-sky-mobile-tile.webp?v=1") 50% 0/max(390px,100vw) auto repeat}}
.site-nav .nav-in{z-index:1}
.anim-on .nav-stars::before{animation:fm-nav-twinkle 9s ease-in-out infinite alternate}
.anim-on .nav-stars::after{animation:fm-nav-twinkle 13s ease-in-out infinite alternate-reverse}
@keyframes fm-nav-twinkle{0%{opacity:.35}100%{opacity:.85}}

/* ---------- Mondphasen in „Die fünf Wochenenden“: v4 entfernt, die Icons bleiben statisch ---------- */

/* ---------- Goldlinien zeichnen sich selbst ---------- */
/* :not(#_) hebt die Spezifität über .tone-mist:not(#fuenf-monde)::before (display:block!important) */
html.anim-on .orn-live-host:not(#_)::before,html.anim-on .orn-live-host:not(#_)::after{display:none!important}
html.anim-on .foot-orn.orn-live-host{background:none!important}
.orn-live{display:block;pointer-events:none;line-height:0}
.orn-live svg{display:block;width:100%;height:100%;overflow:visible}
.orn-live-divider{position:absolute;top:0;left:50%;width:min(360px,80vw);height:36px;transform:translate(-50%,-50%);z-index:3}
.foot-orn .orn-live-divider{width:100%;height:100%;top:50%}
.orn-live-head{width:160px;height:16px;margin:1.1rem 0 0}
.orn-live-head.is-center{margin-left:auto;margin-right:auto}
.orn-live-corner{position:absolute;left:0;bottom:0;width:64px;height:64px;opacity:.55;transform:scaleY(-1)}
.orn-live .ol-stroke{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1)}
.orn-live .ol-fill{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .9s ease,transform 1.1s cubic-bezier(.3,.7,.3,1)}
.orn-live.is-drawn .ol-stroke{stroke-dashoffset:0}
.orn-live.is-drawn .ol-fill{opacity:1;transform:scale(1)}

/* ---------- Abschnitte blenden weich ein ---------- */
html.anim-on .fx-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
html.anim-on .fx-reveal.is-in{opacity:1;transform:none}

/* ---------- Weniger Bewegung: alles statisch ---------- */
@media(prefers-reduced-motion:reduce){
  .moon-glow,.mist,.hero-fx,.hero-meadow,.hero-flowers,.logo-glow,.logo-sheen,.logo-video,.moon-steps{display:none!important}
  .nav-stars::before,.nav-stars::after{animation:none!important}
  html.anim-on .fx-reveal{opacity:1!important;transform:none!important}
  .orn-live .ol-stroke{stroke-dashoffset:0!important}
  .orn-live .ol-fill{opacity:1!important;transform:none!important}
}
@media print{html.anim-on .fx-reveal{opacity:1!important;transform:none!important}}

/* Goldlinie unter den Überschriften (h2::after) zieht sich auf */
html.anim-on h2.fx-hline::after{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.45,.05,.25,1) .2s}
html.anim-on .center h2.fx-hline::after{transform-origin:50% 50%}
html.anim-on h2.fx-hline.is-drawn::after{transform:none}
@media(prefers-reduced-motion:reduce){html.anim-on h2.fx-hline::after{transform:none!important}}

/* Sterne im Footer wie im Menü (27.10.2026) */
.site-footer.site-footer{position:relative;background:#171E2B}
.site-footer>.wrap,.site-footer>.foot-orn{position:relative;z-index:1}
.site-footer .foot-stars::before{background-image:url("../images/foot-stars-a.svg");background-size:1900px 760px;background-position:0 0}
.site-footer .foot-stars::after{background-image:url("../images/foot-stars-b.svg");background-size:1900px 760px;background-position:-640px -230px}

/* 29.10.2026: Goldlinie am unteren Hero-Rand dünner (vorher 2px) */
.hero.hero{border-bottom-width:1px}

/* Umbau 205/207: Atem der Frau im Mond (Abschnitt 2) nur über Licht, --atem 0…1 aus js/atem.js (synchron zum Video).
   Umbau 207 (Nik): Mond/Logo/Video bewegen sich NICHT (kein Skalieren, kein Verschieben). */
.intro-moon .logo-anim.atem-on{--atem:0}
.intro-moon .atem-on .logo-glow{animation:none;opacity:calc(.14 + var(--atem) * .78)}
.intro-moon .atem-licht{position:absolute;z-index:3;left:28%;right:20%;top:22%;bottom:28%;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 45%,rgba(255,246,220,.75) 0%,rgba(255,238,200,.3) 40%,rgba(255,236,196,0) 70%);
  mix-blend-mode:soft-light;opacity:calc(var(--atem) * 1)}
@media (prefers-reduced-motion:reduce){.intro-moon .atem-licht{display:none}}