/* ==========================================================================
   Scroll-Geschichte "Vom Setzling zum Baum"
   Läuft INNERHALB des Themes: gleiche Schrift, gleiche Farben, gleicher
   Kopf- und Fußbereich. Alles hier ist unter .pf eingeschachtelt, damit
   nichts in den Rest der Seite ausläuft.
   ========================================================================== */
.pf{ --nav:68px; --p-green:var(--green); position:relative; }
.pf svg{ width:auto; height:auto; flex:initial; }   /* hebt svg{width:1em} des Themes auf */

.pf-wrap{ height:760vh; position:relative; }
.pf-stage{
  position:sticky; top:var(--nav); height:calc(100vh - var(--nav));
  height:calc(100dvh - var(--nav)); overflow:hidden;
  contain:layout paint; isolation:isolate;
}

/* Himmel: vier Ebenen, deren Deckkraft das Skript steuert */
.pf .sky{position:absolute;inset:0;z-index:0}
.pf .sky>i{position:absolute;inset:0;display:block}
.pf .sky-dawn{background:linear-gradient(to bottom,#DCEFFB 0%,#FDF3E3 58%,var(--cream) 100%)}
.pf .sky-day {background:linear-gradient(to bottom,#BCE3F7 0%,#E9F6FB 55%,var(--cream) 100%);opacity:0}
.pf .sky-rain{background:linear-gradient(to bottom,#93A9B8 0%,#C2D2DA 55%,#DFE7E2 100%);opacity:0}
.pf .sky-gold{background:linear-gradient(to bottom,#FFD59A 0%,#FFEFD4 55%,var(--cream) 100%);opacity:0}

.pf .sun{
  position:absolute;z-index:1;width:min(14vw,104px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF0BE,#F7C948 60%,#EFA337);
  box-shadow:0 0 70px 26px rgba(247,201,72,.42);
  translate:-50% -50%;opacity:0;will-change:left,top,opacity;
}
.pf .sun::before{
  content:"";position:absolute;inset:-30%;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0 9deg,rgba(247,201,72,.30) 9deg 13deg,transparent 13deg 29deg,
    rgba(247,201,72,.30) 29deg 33deg,transparent 33deg 49deg,
    rgba(247,201,72,.30) 49deg 53deg,transparent 53deg 69deg,
    rgba(247,201,72,.30) 69deg 73deg,transparent 73deg 90deg);
  animation:pf-spin 90s linear infinite;
}
@keyframes pf-spin{to{transform:rotate(360deg)}}

.pf .clouds{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.pf .cl{position:absolute;filter:drop-shadow(0 10px 18px rgba(40,60,75,.14))}
.pf .cl svg{width:100%;height:auto}
.pf .cl-1{left:8%;top:9%;width:min(44vw,320px);animation:pf-drift 46s linear infinite}
.pf .cl-2{left:52%;top:5%;width:min(34vw,240px);animation:pf-drift 62s linear infinite reverse}
.pf .cl-3{left:28%;top:20%;width:min(26vw,180px);opacity:.75;animation:pf-drift 78s linear infinite}
@keyframes pf-drift{0%{transform:translateX(-6vw)}50%{transform:translateX(6vw)}100%{transform:translateX(-6vw)}}

.pf .rain{position:absolute;inset:0 0 12% 0;z-index:3;opacity:0;pointer-events:none;overflow:hidden}
.pf .rain i{position:absolute;top:-6%;width:2px;height:18px;border-radius:2px;
  background:linear-gradient(to bottom,rgba(20,112,159,0),#2E9AD6);animation:pf-fall 1s linear infinite}
@keyframes pf-fall{from{transform:translateY(-10vh);opacity:0}10%{opacity:.9}to{transform:translateY(112vh);opacity:0}}

.pf .bow{position:absolute;left:50%;top:8%;width:min(120vw,900px);translate:-50% 0;z-index:2;opacity:0}
.pf .bow svg{width:100%;height:auto}

.pf .can{
  position:absolute;z-index:6;left:50%;top:33%;width:min(26vw,160px);opacity:0;
  transform:translate(calc(-50% + min(15vw,118px))) rotate(0deg);
  transform-origin:75% 80%;will-change:transform,opacity;
}
.pf .can svg{width:100%;height:auto}
.pf .pour{position:absolute;left:4%;top:64%;width:4px;height:0}
.pf .pour i{position:absolute;left:0;width:4px;height:13px;border-radius:3px;background:#4FB3E8;
  animation:pf-pour .8s linear infinite}
@keyframes pf-pour{from{transform:translate(0,0);opacity:1}to{transform:translate(-18px,26vh);opacity:0}}

.pf .bfly,.pf .bird{position:absolute;z-index:7;opacity:0;pointer-events:none;will-change:left,top,opacity}
.pf .bfly{width:min(7vw,44px)}
.pf .bfly svg{width:100%;height:auto;animation:pf-flap .32s ease-in-out infinite alternate}
@keyframes pf-flap{from{transform:scaleX(.55)}to{transform:scaleX(1)}}
.pf .bird{width:min(9vw,56px)}
.pf .bird svg{width:100%;height:auto;animation:pf-wing .5s ease-in-out infinite alternate}
@keyframes pf-wing{from{transform:scaleY(.6)}to{transform:scaleY(1.1)}}

.pf .fallen{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;overflow:hidden}
.pf .fallen i{position:absolute;top:-8%;width:12px;height:9px;border-radius:70% 10% 70% 10%;
  background:#7CC47F;animation:pf-leaf 9s linear infinite}
@keyframes pf-leaf{0%{transform:translate(0,-10vh) rotate(0)}100%{transform:translate(9vw,112vh) rotate(560deg)}}

/* Der Baum. Randüberstand ist gewollt: So füllt das Erdreich immer die
   ganze Breite, egal welches Seitenverhältnis das Gerät hat. */
.pf .scene{position:absolute;inset:0;z-index:4;pointer-events:none}
.pf .scene svg{width:100%;height:100%;overflow:visible}
.pf #pf-swayA{transform-origin:500px 560px;animation:pf-swayA 9s ease-in-out infinite}
.pf #pf-swayB{transform-origin:500px 560px;animation:pf-swayB 6.5s ease-in-out infinite}
@keyframes pf-swayA{0%,100%{transform:rotate(-.55deg)}50%{transform:rotate(.55deg)}}
@keyframes pf-swayB{0%,100%{transform:rotate(.35deg)}50%{transform:rotate(-.45deg)}}

/* Kapitelkarte – im Stil der Theme-Karten */
.pf-chaps{position:absolute;left:50%;bottom:clamp(1.25rem,4vh,3rem);translate:-50% 0;z-index:12;
  width:min(92%,600px);pointer-events:none}
.pf-chap{position:absolute;left:0;right:0;bottom:0;text-align:center;
  /* Bewusst ohne backdrop-filter: Der Weichzeichner kostet auf schwachen
     Geraeten bei jedem Scrollbild Rechenzeit. Deckende Flaeche ist ausserdem
     besser lesbar. */
  background:color-mix(in srgb,var(--cream) 96%,transparent);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.25rem clamp(1rem,3vw,2rem) 1.45rem;
  box-shadow:0 22px 50px -30px rgba(22,36,27,.6);
  opacity:0;transform:translateY(16px);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pf-chap.is-on{opacity:1;transform:none;
  transition:opacity .38s var(--ease) .16s,transform .38s var(--ease) .16s}
.pf-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--green-soft);
  color:var(--green-deep);border-radius:999px;padding:.3rem .85rem;margin-bottom:.55rem;
  font-size:var(--t-xs);font-weight:700}
.pf-chap h2{margin:.1rem 0 .4rem;font-size:var(--t-xl);line-height:1.15}
.pf-chap p{margin:0 auto;max-width:44ch;color:var(--ink-2);font-size:var(--t-md);line-height:1.55}

/* Titel-Einblendung: steht ueber der Buehne und weicht beim Scrollen */
.pf-intro{position:absolute;left:50%;top:clamp(2rem,8vh,5.5rem);translate:-50% 0;z-index:11;
  width:min(92%,720px);text-align:center;will-change:opacity,transform}
.pf-intro .f-crumb{margin-bottom:.5rem}
.pf-intro h1{font-size:var(--t-3xl);margin:0 0 .75rem;line-height:1.03}
.pf-lead{margin:0 auto;max-width:44ch;color:var(--ink-2);font-size:var(--t-lg);line-height:1.5}

/* Bildplatz fuer die spaeteren Illustrationen (Transporter, Marc, ...) */
.pf-figure{position:absolute;z-index:8;opacity:0;pointer-events:none;
  will-change:opacity,transform}
.pf-figure img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 24px rgba(22,36,27,.18))}
.pf-figure--marc{right:6%;bottom:24%;width:min(30vw,260px)}
.pf-figure--van {left:-30%;bottom:20%;width:min(46vw,420px)}

/* Fortschritt, Kapitelleiste, Hinweis */
.pf-bar{position:absolute;left:0;top:0;height:3px;z-index:13;width:0;
  background:linear-gradient(90deg,var(--green-solid),var(--green),#F7C948)}
.pf-grow{position:absolute;right:clamp(.75rem,2.5vw,1.5rem);top:clamp(.75rem,2vh,1.25rem);z-index:13;
  background:var(--paper);border-radius:999px;padding:.42rem .85rem;font-size:var(--t-xs);font-weight:700;
  color:var(--green-deep);box-shadow:0 6px 20px -12px rgba(22,36,27,.5);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-rail{position:absolute;right:clamp(.6rem,2.2vw,1.4rem);top:50%;translate:0 -50%;z-index:13;
  display:flex;flex-direction:column;gap:.7rem}
.pf-rail button{appearance:none;border:0;background:transparent;padding:.2rem;cursor:pointer;
  display:flex;align-items:center;gap:.5rem;flex-direction:row-reverse}
.pf-dot{width:9px;height:9px;border-radius:50%;background:rgba(22,36,27,.22);display:block;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.pf-rail button[aria-current="true"] .pf-dot{background:var(--green-solid);transform:scale(1.5)}
.pf-lbl{font-size:var(--t-xs);font-weight:700;color:var(--ink-2);opacity:0;transform:translateX(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);white-space:nowrap;background:var(--paper);
  padding:.2rem .6rem;border-radius:999px;box-shadow:0 6px 18px -12px rgba(22,36,27,.5)}
.pf-rail button:hover .pf-lbl,.pf-rail button:focus-visible .pf-lbl{opacity:1;transform:none}
.pf-rail button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:999px}

.pf-hint{position:absolute;left:50%;bottom:.4rem;translate:-50% 0;z-index:13;margin:0;
  font-size:var(--t-xs);color:var(--ink-3);display:flex;align-items:center;gap:.45rem;
  transition:opacity .4s var(--ease)}
.pf-hint b{display:inline-block;animation:pf-bob 1.7s ease-in-out infinite}
@keyframes pf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (max-width:720px){
  .pf-rail{display:none}
  .pf-grow{font-size:.7rem;padding:.35rem .7rem}
}
/* Auf dem Handy liegt unten die feste Kontaktleiste des Themes (.f-dock,
   74 Pixel hoch) – die Kapitelkarte muss darueber stehen bleiben. */
@media (max-width:760px){
  .pf-chaps{bottom:calc(74px + .8rem)}
  .pf-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pf *,.pf *::before,.pf *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
}