/* Schriften lokal eingebunden (kein Abruf bei Google) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/jost-latin-700-normal.woff2) format('woff2')}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFCF9}
img{max-width:100%}
a{color:#4A7340}a:hover{color:#8A5872}
:focus-visible{outline:2px solid #8A5872;outline-offset:3px}
button{font-family:inherit}

/* Galerie */
.gal-btn{width:48px;height:48px;border-radius:999px;border:1px solid #E2D27E;background:#FFFCF9;color:#4A7340;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.gal-btn:hover{border-color:#8A5872;color:#8A5872}
#gal-img{transition:opacity .25s ease}
@media (max-width:520px){#gal-img{height:68% !important;margin-bottom:64px !important}}
#gal-img.is-fading{opacity:0}
.thumb{flex:1 1 0;min-width:0;min-height:44px;aspect-ratio:4/5;border-radius:3px;background:#F8EEF3;border:1px solid #EFE2A2;padding:0;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.thumb img{height:82%;width:auto}
.thumb[aria-current="true"]{border:2px solid #4A7340}

/* FAQ */
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq-sign::before{content:"+";font-family:'Jost',sans-serif;font-size:24px;color:#8A5872}
.faq[open] .faq-sign::before{content:"–"}

/* Sanftes Einblenden beim Scrollen (--d = Reihenfolge innerhalb eines Abschnitts) */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 120ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* Popup */
#lp-modal[hidden]{display:none}
body.modal-open{overflow:hidden}

/* ---------- Animationen ---------- */

/* Hero: Text steigt nacheinander auf, das Buch schwebt herein */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes bookIn{from{opacity:0;transform:translateY(30px) rotate(2deg) scale(.97)}to{opacity:1;transform:none}}
.hero{position:relative}
.hero>.hero-text,.hero>.hero-gal{position:relative;z-index:1}
.hero-text>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-text>:nth-child(2){animation-delay:.12s}
.hero-text>:nth-child(3){animation-delay:.28s}
.hero-text>:nth-child(4){animation-delay:.42s}
.hero-text>:nth-child(5){animation-delay:.56s}
.hero-text>:nth-child(6){animation-delay:.7s}
.hero-gal{animation:bookIn 1.2s .25s cubic-bezier(.2,.7,.2,1) both}

/* Rosenblätter und Goldfunken im Hero (werden per JS erzeugt) */
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.petal{position:absolute;top:-40px;width:var(--s,14px);height:calc(var(--s,14px) * .78);background:radial-gradient(circle at 30% 30%,#FBE3EE,#E8A9C6 70%);border-radius:80% 0 80% 0;opacity:0;animation:petalFall var(--t,16s) linear var(--w,0s) infinite}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#F3DB6A;box-shadow:0 0 10px 3px rgba(243,219,106,.55);opacity:0;animation:spark var(--t,5s) ease-in-out var(--w,0s) infinite}
@keyframes petalFall{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  10%{opacity:.75}
  50%{transform:translate(calc(var(--x,40px) * -1),55vh) rotate(200deg)}
  90%{opacity:.6}
  100%{opacity:0;transform:translate(var(--x,40px),110vh) rotate(420deg)}
}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* Goldene Zierlinie zeichnet sich, Sterne funkeln */
.js .orn>span{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .6s}
.orn>span:first-child{transform-origin:right}
.orn>span:last-child{transform-origin:left}
.js .orn.is-in>span{transform:none}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.25) rotate(45deg);opacity:.7}}
.twinkle{animation:twinkle 4.5s ease-in-out infinite;transform-origin:center}
@keyframes glow{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.glow{animation:glow 7s ease-in-out infinite}

/* Buttons: sanft anheben, Glanz über die grünen Buttons */
.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 22px rgba(74,115,64,.22)}
.btn:active{transform:translateY(0)}
.js .btn.reveal.is-in{transition:opacity .9s ease calc(var(--d,0) * 120ms),transform .25s ease,box-shadow .25s ease}
.btn-fill::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.btn-fill:hover::after{left:130%}

/* Karten und Buch im Kaufbereich */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(.5deg)}}
.float-book{animation:floaty 7s ease-in-out infinite}
#kaufen [style*="border: 1px solid #EEE4E9"]{transition:transform .3s ease,box-shadow .3s ease}
#kaufen [style*="border: 1px solid #EEE4E9"]:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(138,88,114,.14)}
.thumb{transition:transform .2s ease,border-color .2s ease}
.thumb:hover{transform:translateY(-3px)}

/* FAQ klappt weich auf */
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq[open]>p{animation:faqIn .4s ease}
.faq-sign::before{display:inline-block;transition:transform .3s ease}
.faq[open] .faq-sign::before{transform:rotate(180deg)}

/* Popup erscheint weich */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
#lp-modal [data-close][aria-hidden]{animation:fadeIn .3s ease}
#lp-modal [role="dialog"]>div:last-child{animation:popIn .4s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important}
  .petals{display:none}
  .js .orn>span{transform:none;transition:none}
  .btn,.btn-fill::after,.thumb{transition:none}
  [data-parallax]{--c:0 !important}
  .js .reveal{opacity:1;transform:none;transition:none}
  #gal-img{transition:none}
}