:root{
  --gold:#f3cf86;
  --gold-deep:#cfa644;
  --cream:#f8f1e3;
  --rose:#f3c6c0;
  --forest:#10180f;
  --forest-soft:#1b2a1c;
  --shadow:rgba(8,14,8,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito",sans-serif;
  color:var(--cream);
  background:var(--forest);
  overflow-x:hidden;
  cursor:none;
}
::selection{background:rgba(243,207,134,.3);color:#fff}

/* ---------- Feenstaub-Maus (canvas) ---------- */
#fairydust{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:90;
}
/* weicher Glüh-Cursor */
#glow{
  position:fixed;
  top:0;left:0;
  width:26px;height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  pointer-events:none;
  z-index:91;
  background:radial-gradient(circle, rgba(255,244,214,.95) 0%, rgba(243,207,134,.55) 35%, rgba(243,207,134,0) 70%);
  mix-blend-mode:screen;
  transition:transform .12s var(--ease);
}

/* ---------- Atmender Wald ---------- */
.stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.bg-wrap{
  position:absolute;inset:-7%;
  will-change:transform;
  transform:translate3d(var(--px,0px),var(--py,0px),0);
}
.bg{
  position:absolute;inset:0;
  background:url("wald.jpg") center/cover no-repeat;
  transform-origin:50% 100%;
  animation:breathe 19s ease-in-out infinite alternate, windsway 8.5s ease-in-out infinite;
  will-change:transform,filter;
}
@keyframes breathe{
  from{filter:saturate(1.02) brightness(1)}
  to{filter:saturate(1.12) brightness(1.07)}
}
/* Wind: ganzer Wald wiegt sanft vom Boden her */
@keyframes windsway{
  0%,100%{transform:scale(1.05) skewX(0deg) translateX(0)}
  30%{transform:scale(1.05) skewX(.5deg) translateX(-5px)}
  65%{transform:scale(1.05) skewX(-.45deg) translateX(5px)}
}
/* zweite, langsam pulsierende Lichtschicht für Tiefe */
.bg::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 58%, rgba(255,214,150,.28) 0%, rgba(255,214,150,0) 60%);
  animation:glowpulse 9s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes glowpulse{from{opacity:.5}to{opacity:1}}

/* Lesbarkeits-Verläufe */
.veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(8,12,8,.30) 0%, rgba(8,12,8,0) 22%, rgba(8,12,8,0) 48%, rgba(10,16,10,.78) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 45%, rgba(6,10,6,.45) 100%);
  pointer-events:none;
}

/* Funkelnde Feenlichter (CSS) */
.lights{position:absolute;inset:0;pointer-events:none}
.lights i{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,var(--gold) 45%,rgba(243,207,134,0) 70%);
  opacity:.7;
  animation:twinkle var(--t,4s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  transform:translate3d(var(--lx,0),var(--ly,0),0);
}
@keyframes twinkle{
  0%,100%{opacity:.15;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.25)}
}

/* Goldene Vögel */
.bird-fly{
  position:absolute;top:0;left:0;
  pointer-events:none;will-change:transform;
}
.bird{display:block;overflow:visible}
.bird .wing{
  fill:#f7eed9;
  filter:drop-shadow(0 0 5px rgba(243,207,134,.55));
}
.bird .wl{transform-origin:50px 28px;animation:flapL var(--fs,.62s) ease-in-out infinite}
.bird .wr{transform-origin:50px 28px;animation:flapR var(--fs,.62s) ease-in-out infinite}
@keyframes flapL{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-27deg)}}
@keyframes flapR{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(27deg)}}

.bf1{animation:fly1 24s linear infinite}
.bf2{animation:fly2 31s linear infinite;opacity:.9}
.bf3{animation:fly3 38s linear infinite;opacity:.8}
@keyframes fly1{
  0%{transform:translate(-12vw,70vh) scale(.95)}
  45%{transform:translate(46vw,40vh) scale(.8)}
  100%{transform:translate(115vw,33vh) scale(.65)}
}
@keyframes fly2{
  0%{transform:translate(-10vw,44vh) scale(.7)}
  50%{transform:translate(50vw,52vh) scale(.62)}
  100%{transform:translate(112vw,40vh) scale(.48)}
}
@keyframes fly3{
  0%{transform:translate(-14vw,58vh) scale(.6)}
  50%{transform:translate(48vw,26vh) scale(.55)}
  100%{transform:translate(116vw,30vh) scale(.45)}
}

/* Wehende Blätter im Wind */
.leaf-blow{position:absolute;top:0;left:0;pointer-events:none;will-change:transform}
.leaf{display:block;width:22px;height:22px}
.leaf .lf{fill:#c79a47;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.leaf .lv{fill:none;stroke:rgba(80,55,15,.5);stroke-width:1.1;stroke-linecap:round}
.leaf-spin{animation:flutter var(--ff,2.4s) ease-in-out infinite}
@keyframes flutter{0%,100%{transform:rotateZ(-20deg)}50%{transform:rotateZ(26deg)}}
.ld1{animation:blow1 17s linear infinite}
.ld2{animation:blow2 22s linear infinite;opacity:.8}
.ld3{animation:blow3 14s linear infinite}
.ld4{animation:blow1 26s linear infinite 6s;opacity:.7}
.ld5{animation:blow2 19s linear infinite 9s}
@keyframes blow1{
  0%{transform:translate(-6vw,8vh) scale(.9) rotate(0)}
  100%{transform:translate(110vw,52vh) scale(.55) rotate(260deg)}
}
@keyframes blow2{
  0%{transform:translate(-8vw,30vh) scale(.7) rotate(0)}
  100%{transform:translate(112vw,72vh) scale(.5) rotate(-220deg)}
}
@keyframes blow3{
  0%{transform:translate(-5vw,48vh) scale(1) rotate(0)}
  100%{transform:translate(108vw,18vh) scale(.6) rotate(300deg)}
}

/* ---------- Hero-Inhalt ---------- */
.hero{
  position:relative;z-index:10;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:7vh 6vw 14vh;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:"Fraunces",serif;
  font-weight:500;letter-spacing:.02em;
  font-size:1.15rem;
  opacity:0;animation:rise .9s var(--ease) .1s forwards;
}
.brand .leaf{
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold) 0%, var(--gold-deep) 70%);
  box-shadow:0 0 18px rgba(243,207,134,.6);
  font-size:15px;
}
.kicker{
  margin-top:auto;
  align-self:center;
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;font-weight:800;
  color:#ffeec2;
  padding:.5rem 1.1rem;
  background:rgba(9,14,9,.5);
  border:1px solid rgba(243,207,134,.3);
  border-radius:999px;
  backdrop-filter:blur(6px);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  opacity:0;animation:rise .9s var(--ease) .35s forwards;
}
h1{
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(2.7rem,8vw,6rem);
  line-height:1.02;
  letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
  max-width:14ch;
}
h1 em{
  font-style:italic;
  color:var(--gold);
  text-shadow:0 0 34px rgba(243,207,134,.55);
}
h1 .l1{opacity:0;animation:rise 1s var(--ease) .5s forwards;display:block}
h1 .l2{opacity:0;animation:rise 1s var(--ease) .68s forwards;display:block}
.sub{
  margin-top:1.6rem;
  max-width:46ch;
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  line-height:1.65;
  color:rgba(248,241,227,.9);
  text-shadow:0 1px 14px rgba(0,0,0,.5);
  opacity:0;animation:rise 1s var(--ease) .9s forwards;
}
.cta-row{
  margin-top:2.6rem;
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:rise 1s var(--ease) 1.1s forwards;
}
.btn{
  cursor:none;
  font-family:"Nunito",sans-serif;
  font-weight:800;font-size:1rem;
  padding:1rem 2rem;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-gold{
  background:linear-gradient(135deg,#ffe6ad,var(--gold-deep));
  color:#3a2a08;
  box-shadow:0 10px 34px rgba(207,166,68,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-gold:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 44px rgba(207,166,68,.6)}
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--cream);
  border-color:rgba(248,241,227,.35);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}

.scrollhint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(248,241,227,.6);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  opacity:0;animation:rise 1s var(--ease) 1.5s forwards;
}
.scrollhint .dot{
  width:22px;height:34px;border:1.5px solid rgba(248,241,227,.45);border-radius:12px;
  position:relative;
}
.scrollhint .dot::after{
  content:"";position:absolute;top:6px;left:50%;width:4px;height:4px;margin-left:-2px;
  background:var(--gold);border-radius:50%;
  animation:scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Geschichten-Abschnitt ---------- */
.gifts{
  position:relative;z-index:10;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(28,42,28,.9) 0%, rgba(16,24,15,1) 60%),
    var(--forest);
  padding:9rem 6vw 7rem;
  text-align:center;
}
.gifts-head{max-width:38ch;margin:0 auto}
.eyebrow{
  text-transform:uppercase;letter-spacing:.4em;font-size:.72rem;font-weight:700;
  color:var(--gold-deep);
}
.gifts h2{
  font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);
  margin:1rem 0 1.1rem;line-height:1.1;
}
.gifts h2 em{font-style:italic;color:var(--gold)}
.gifts .lead{color:rgba(248,241,227,.72);font-size:1.1rem;line-height:1.6;max-width:50ch;margin:0 auto}

.cards{
  margin:4rem auto 0;max-width:1100px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
}
.card{
  display:block;text-align:left;text-decoration:none;color:inherit;cursor:none;
  background:linear-gradient(160deg, rgba(38,54,38,.7), rgba(20,30,20,.55));
  border:1px solid rgba(243,207,134,.18);
  border-radius:24px;
  padding:2.2rem 1.9rem 2rem;
  backdrop-filter:blur(8px);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(243,207,134,.14), transparent 60%);
  opacity:0;transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-8px);border-color:rgba(243,207,134,.5);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.card:hover::before{opacity:1}
.icon{
  width:62px;height:62px;display:grid;place-items:center;
  border-radius:18px;margin-bottom:1.3rem;
  background:radial-gradient(circle at 35% 30%, rgba(243,207,134,.35), rgba(243,207,134,.08));
  border:1px solid rgba(243,207,134,.3);
}
.icon svg{width:34px;height:34px;overflow:visible}
.icon svg .st{fill:none;stroke:#f6dca0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(243,207,134,.45))}
.icon svg .fl{fill:#f6dca0}
.card h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.5rem;margin-bottom:.6rem}
.card p{color:rgba(248,241,227,.72);line-height:1.6;font-size:1rem}
.card .learn{
  margin-top:1.3rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--gold);border-top:1px dashed rgba(243,207,134,.3);padding-top:.9rem;
  transition:color .3s var(--ease);
}
.card .learn .arrow{transition:transform .3s var(--ease)}
.card:hover .learn{color:#ffe9bd}
.card:hover .learn .arrow{transform:translateX(5px)}

.need{
  margin:4.5rem auto 0;max-width:48ch;
  font-family:"Fraunces",serif;font-style:italic;
  font-size:clamp(1.3rem,3.2vw,1.9rem);line-height:1.45;
  color:var(--cream);
}
.need b{color:var(--gold);font-style:normal;font-weight:500}

/* ---------- Abschluss ---------- */
.closer{
  position:relative;z-index:10;text-align:center;
  padding:7rem 6vw 8rem;
  background:linear-gradient(to bottom, var(--forest), #0a120a);
}
.closer h2{
  font-family:"Fraunces",serif;font-weight:400;font-style:italic;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin-bottom:1.6rem;
}
.closer h2 b{color:var(--gold);font-weight:400}
footer{
  text-align:center;padding:2.5rem 6vw 3rem;
  color:rgba(248,241,227,.4);font-size:.85rem;
  background:#0a120a;
}
footer .mark{font-family:"Fraunces",serif;color:rgba(248,241,227,.65);font-size:1rem}

/* Beispiel-Badge */
.badge{
  position:fixed;left:18px;bottom:16px;z-index:80;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(248,241,227,.55);
  background:rgba(10,16,10,.5);border:1px solid rgba(243,207,134,.25);
  padding:.4rem .8rem;border-radius:999px;backdrop-filter:blur(6px);
}

/* ---------- Unterseite: einzelne Geschichte ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 6vw;
}
.topnav a{
  color:var(--cream);text-decoration:none;cursor:none;
  font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.5rem;
  opacity:.85;transition:opacity .25s var(--ease);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.topnav a:hover{opacity:1}
.topnav .home{font-family:"Fraunces",serif;font-weight:500;letter-spacing:.02em;font-size:1.1rem}
.topnav .home span{
  width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold) 0%, var(--gold-deep) 70%);
  box-shadow:0 0 14px rgba(243,207,134,.6);font-size:13px;
}

.story{
  position:relative;z-index:10;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:9rem 6vw 7rem;
}
.story .bigicon{
  width:124px;height:124px;display:grid;place-items:center;border-radius:50%;
  margin-bottom:2rem;
  background:radial-gradient(circle at 38% 32%, rgba(243,207,134,.4), rgba(243,207,134,.05));
  border:1px solid rgba(243,207,134,.35);
  box-shadow:0 0 60px rgba(243,207,134,.25);
  animation:rise 1s var(--ease) .1s both, floaty 6s ease-in-out infinite;
}
.story .bigicon svg{width:66px;height:66px;overflow:visible}
.story .bigicon svg .st{fill:none;stroke:#f6dca0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(243,207,134,.5))}
.story .bigicon svg .fl{fill:#f6dca0}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.story .eyebrow{color:var(--gold);animation:rise .9s var(--ease) .25s both}
.story h1{font-size:clamp(2.4rem,7vw,4.6rem);margin:.8rem 0 0;animation:rise 1s var(--ease) .4s both}
.story .intro{
  max-width:50ch;margin:1.6rem auto 0;
  font-size:clamp(1.05rem,2.4vw,1.28rem);line-height:1.7;
  color:rgba(248,241,227,.9);text-shadow:0 1px 14px rgba(0,0,0,.5);
  animation:rise 1s var(--ease) .55s both;
}

/* Audio-Player-Mockup */
.player{
  margin:2.8rem auto 0;width:min(440px,92%);
  background:rgba(12,18,12,.55);border:1px solid rgba(243,207,134,.3);
  border-radius:20px;padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;
  backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.4);
  animation:rise 1s var(--ease) .7s both;
}
.player .play{
  flex:none;width:52px;height:52px;border-radius:50%;border:none;cursor:none;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#ffe6ad,var(--gold-deep));
  box-shadow:0 6px 20px rgba(207,166,68,.5);
  transition:transform .2s var(--ease);
}
.player .play:hover{transform:scale(1.08)}
.player .play svg{width:18px;height:18px;margin-left:3px;fill:#3a2a08}
.player .meta{flex:1;text-align:left;min-width:0}
.player .meta .t{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .bar{margin-top:.55rem;height:5px;border-radius:3px;background:rgba(248,241,227,.18);position:relative;overflow:hidden}
.player .bar::after{content:"";position:absolute;top:0;bottom:0;left:0;right:74%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:3px;animation:fillbar 1.3s var(--ease) 1s both}
@keyframes fillbar{from{right:100%}to{right:74%}}
.player .time{font-size:.76rem;color:rgba(248,241,227,.55);margin-top:.4rem}

/* weitere Geschichten */
.more{margin:3.4rem auto 0;display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;animation:rise 1s var(--ease) .85s both}
.more a{
  cursor:none;text-decoration:none;color:var(--cream);
  font-weight:700;font-size:.86rem;padding:.6rem 1.1rem;border-radius:999px;
  border:1px solid rgba(243,207,134,.3);background:rgba(255,255,255,.05);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.more a:hover{background:rgba(243,207,134,.16);transform:translateY(-2px)}
.more a.cur{background:rgba(243,207,134,.22);border-color:rgba(243,207,134,.6);color:#ffe9bd}

@media(max-width:820px){
  body{cursor:auto}
  #glow{display:none}
  .cards{grid-template-columns:1fr;max-width:420px}
  .kicker{margin-top:8vh}
  .topnav .home{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .bg{transform:scale(1.04)}
}