/* Ape39 – Ein Bissen Glück · Prototyp (mobil zuerst) */
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --forest:#2A4230;--sage:#52805B;--ivory:#F5F1E8;--ink:#111;--brass:#C09C63;
  --serif:Fraunces,Georgia,serif;--sans:Inter,system-ui,sans-serif;
  --r:18px;--pad:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:clip}
img,svg{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0 0 .5em}
.h1{font-size:clamp(48px,13vw,128px);font-variation-settings:"opsz" 144}
.h1.sm{font-size:clamp(40px,9vw,96px)}
.h2{font-size:clamp(32px,7.5vw,64px);font-variation-settings:"opsz" 120}
.h3{font-size:clamp(36px,8vw,56px)}
.wrap{padding:0 var(--pad);max-width:1240px;margin:0 auto}
.narrow{max-width:820px;padding-top:96px}
.center{text-align:center}
.dark{background:var(--forest);color:var(--ivory)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin:0 0 18px}
.ph{background:repeating-linear-gradient(135deg,#c09c6322 0 6px,#c09c6311 6px 12px);outline:1px dashed #c09c63aa;border-radius:4px;padding:0 4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.3em;background:var(--brass);color:var(--ink);text-decoration:none;font-weight:600;
  padding:17px 28px;border-radius:999px;box-shadow:0 10px 30px -12px #c09c63cc;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px);background:#cba873;box-shadow:0 16px 36px -14px #c09c63}
.btn .ph{background:#0001;outline-color:#0004}
.link{display:inline-block;margin:18px 0 0;font-weight:500;text-underline-offset:4px}

/* 0. Ansage + Header */
.announce{background:var(--forest);color:var(--ivory);text-align:center;font-size:13px;letter-spacing:.04em;padding:9px 12px}
.hdr{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);
  transition:padding .35s,background .35s,backdrop-filter .35s,box-shadow .35s}
.hdr.small{padding:9px var(--pad);background:#f5f1e8cc;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 #11111112}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 20px var(--serif)}
.brand-logo{fill:currentColor;width:30px;height:42px;transition:width .35s,height .35s}
.hdr.small .brand-logo{width:22px;height:31px}
.cart{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid #11111122}
.cart svg{width:22px;height:22px}
.cart-n{position:absolute;top:-3px;right:-3px;background:var(--brass);font-size:11px;font-weight:700;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}

/* 1. Hero */
.hero{position:relative;min-height:calc(100svh - 40px);display:grid;gap:28px;padding:24px var(--pad) 72px;overflow:hidden;align-items:center}
.paper{position:absolute;inset:-20% 0;z-index:-1;opacity:.55;
  background:radial-gradient(60% 50% at 70% 40%,#52805b26,transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .sub{font-size:clamp(17px,4.4vw,22px);max-width:30ch;margin:0 0 28px;color:#111c}
.micro{font-size:12.5px;color:#111a;margin-top:22px;line-height:1.9}
.hero-stage{perspective:1200px;display:grid;place-items:center}
.card3d{position:relative;width:min(72vw,320px);aspect-ratio:5/7;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(6deg);will-change:transform}
.hero .card3d{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -10px}}
@media (min-width:900px){
  .hero{grid-template-columns:1.1fr .9fr;padding-top:40px}
  .card3d{width:340px}
}

/* Karten-Gestaltung (Hero, Fächer) */
.face{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9% 10%;gap:6%;
  background:#fbf8f1;box-shadow:0 30px 60px -30px #2a423088,0 0 0 1px #11111110 inset}
.face::after{content:"";position:absolute;inset:6px;border:1px solid #c09c6366;border-radius:calc(var(--r) - 5px);pointer-events:none}
.back{transform:rotateY(180deg)}
.c-logo{width:34%;aspect-ratio:496/696;height:auto}
.c-logo.sm{width:24%}
.c-title-big{font:500 clamp(26px,7vw,40px)/1 var(--serif);margin:0}
.c-title{font:500 15px var(--serif);letter-spacing:.02em;margin:0}
.c-ed{font:400 13px var(--serif);margin:0;color:var(--sage)}
.c-quote{font:italic 400 clamp(15px,4.2vw,20px)/1.4 var(--serif);margin:0}
.c-mark{font:600 11px var(--sans);letter-spacing:.2em;margin:0;color:#111a}
.c-how{list-style:none;margin:0;padding:0;font:400 13px/1.45 var(--serif);text-align:left;display:grid;gap:8px}

/* 2. Idee: Wort-für-Wort */
.idea{padding:120px 0}
.idea .h2{color:var(--brass);max-width:16ch}
.words{font:400 clamp(26px,6.4vw,52px)/1.25 var(--serif);margin:0;max-width:24ch}
.words .w{opacity:.18;transition:none}

/* 3. Ritual (gepinnt) */
.ritual{background:var(--ivory)}
.r-pin{height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;position:relative}
.r-head{position:absolute;top:84px;left:var(--pad)}
.r-track{display:flex;width:300vw;will-change:transform}
.step{width:100vw;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center}
.step p{max-width:26ch;font-size:18px;margin:0}
.s-card{width:min(54vw,260px);aspect-ratio:5/7;border-radius:var(--r);margin-bottom:34px;position:relative;display:grid;place-items:center;
  background:linear-gradient(160deg,#fbf8f1,#efe8d8);box-shadow:0 40px 70px -36px #2a4230aa,0 0 0 1px #c09c6355 inset}
.s-n{font:300 110px/1 var(--serif);color:var(--sage)}
/* Biss: drei Kreise schneiden die Karte an (Maske) */
.bite{--b1:0px;--b2:0px;--b3:0px;
  -webkit-mask:radial-gradient(circle at 96% 6%,#0000 var(--b1),#000 calc(var(--b1) + .5px)),radial-gradient(circle at 70% -2%,#0000 var(--b2),#000 calc(var(--b2) + .5px)),radial-gradient(circle at 100% 34%,#0000 var(--b3),#000 calc(var(--b3) + .5px));
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 96% 6%,#0000 var(--b1),#000 calc(var(--b1) + .5px)),radial-gradient(circle at 70% -2%,#0000 var(--b2),#000 calc(var(--b2) + .5px)),radial-gradient(circle at 100% 34%,#0000 var(--b3),#000 calc(var(--b3) + .5px));
  mask-composite:intersect}
.r-prog{position:absolute;bottom:40px;left:var(--pad);right:var(--pad);height:2px;background:#11111115}
.r-prog i{display:block;height:100%;width:100%;background:var(--brass);transform-origin:0 50%;transform:scaleX(0)}

/* 4. Kartenfächer */
.cards{padding:110px 0 100px;background:linear-gradient(#f5f1e8,#ede6d6)}
.hint{color:#1119;margin:-6px 0 40px;font-size:14px}
.deck{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:0 var(--pad);max-width:1240px;margin:0 auto 56px;perspective:1400px}
.pcard{all:unset;cursor:pointer;aspect-ratio:5/7;position:relative;display:block;border-radius:var(--r)}
.pcard:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.pc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pcard.on .pc-in{transform:rotateY(180deg)}
.pcard .face{padding:12% 11%}
.pcard .back{background:var(--forest);color:var(--ivory)}
.pcard .back .c-mark,.pcard .back .c-ed{color:var(--brass)}
.pcard .c-quote{font-size:clamp(14px,3.9vw,18px)}
.pcard .c-title-big{font-size:clamp(24px,6.5vw,34px)}
@media (hover:hover){.pcard:hover .pc-in{transform:rotateY(180deg)}.pcard.on:hover .pc-in{transform:rotateY(0)}}
@media (min-width:760px){.deck{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.deck{grid-template-columns:repeat(6,1fr);gap:18px}.pcard .c-quote{font-size:15px}}

/* 5. Geschenk */
.gift{display:grid;gap:40px;padding-top:110px;padding-bottom:40px;align-items:center}
.gift p{font-size:18px;max-width:42ch}
.mockup{aspect-ratio:4/3;border-radius:28px;display:grid;place-items:center;text-align:center;padding:24px;font-size:14px;
  background:linear-gradient(140deg,#52805b33,#c09c6340),var(--ivory);box-shadow:0 0 0 1px #11111112 inset}
@media (min-width:900px){.gift{grid-template-columns:1fr 1fr}}

/* 6. The Face is You */
.face-sec{background:var(--sage);color:var(--ivory);padding:110px 0 120px;margin-top:90px;overflow:hidden}
.seal{position:relative;width:min(84vw,440px);aspect-ratio:1;margin:0 auto 48px;color:var(--ink)}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 40s linear infinite}
.ring text{font:600 25px var(--serif);letter-spacing:.1em;fill:currentColor}
.ape-draw{position:absolute;left:50%;top:50%;width:40%;translate:-50% -50%;overflow:visible}
#apePath{fill:var(--ink);fill-opacity:var(--fill,1);stroke:var(--ink);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.seal::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ivory);z-index:-0}
.ring,.ape-draw{z-index:1}
.lead{font-size:clamp(18px,4.4vw,22px);max-width:40ch;margin:0 auto}
@keyframes spin{to{rotate:360deg}}

/* 7/8 Akkordeon */
.acc{border-top:1px solid #11111120}
.acc:last-child{border-bottom:1px solid #11111120}
.acc summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font:500 19px var(--serif);position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:4px;top:14px;font:300 28px var(--sans);color:var(--brass);transition:rotate .3s}
.acc[open] summary::after{rotate:45deg}
.acc p{margin:0 0 22px;color:#111c}

/* 9. Schluss-CTA */
.final{padding:120px 0;margin-top:110px}
.final .h1{color:var(--ivory);margin-bottom:36px}
.news{margin:56px auto 0;max-width:460px}
.news label{display:block;margin-bottom:12px;font-size:15px}
.news-row{display:flex;gap:8px;background:#ffffff14;border:1px solid #f5f1e833;border-radius:999px;padding:6px}
.news input{flex:1;min-width:0;background:none;border:0;color:var(--ivory);padding:0 16px;font:inherit}
.news input::placeholder{color:#f5f1e888}
.news button{border:0;border-radius:999px;background:var(--ivory);color:var(--forest);font:600 14px var(--sans);padding:12px 18px;cursor:pointer}

/* 10. Pieces */
.pieces{padding:100px 0}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 12px;scrollbar-width:none}
.piece{flex:0 0 min(68vw,280px);scroll-snap-align:start;text-decoration:none;display:grid;gap:8px;font-size:14px}
.piece-img{aspect-ratio:4/5;border-radius:16px;background:#e7e0cf;display:grid;place-items:center}
.piece.sold{opacity:.5}

/* Footer */
.foot{padding:60px 0 40px;font-size:14px}
.foot .brand{color:var(--ivory);margin-bottom:24px}

.legal{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:18px}
.legal a{text-decoration:none;opacity:.85}
.foot .ph{outline-color:#c09c6388}

/* Ohne Bewegung: alles statisch und vollständig sichtbar */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .r-pin{height:auto;padding:100px 0}
  .r-head{position:static;padding:0 var(--pad)}
  .r-track{width:auto;flex-direction:column;gap:64px}
  .step{width:auto}.r-prog{display:none}
  .words .w{opacity:1}
}
/* Schatten der angebissenen Karte (Maske schneidet box-shadow ab) */
.step:last-child{filter:drop-shadow(0 26px 26px #2a42302e)}
@media (min-width:600px){.link{margin-left:18px}}

/* ===================== Runde 2 ===================== */
button{font:inherit}
.cart{background:none;color:inherit;cursor:pointer;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.link-btn{background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px;font-weight:500}

/* Button-Glanz beim Hover */
.btn{position:relative;overflow:hidden;border:0;cursor:pointer;font:600 16px var(--sans)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff7 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s;pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn.wide{width:100%;justify-content:center}
.btn.sm{padding:12px 18px;font-size:14px}

/* Goldlinie zeichnet sich nach */
.goldline{display:block;width:120px;height:1px;background:var(--brass);margin:6px auto 26px;transform-origin:0 50%}
.buy-info .goldline{margin:4px 0 22px}

/* Header im Nachtmodus */
.hdr.night{background:#0c140e;color:var(--ivory)}
.hdr.night .cart{border-color:#f5f1e833}
.hdr{transition:padding .35s,background .6s,color .6s,backdrop-filter .35s,box-shadow .35s}

/* 1. Hero: Dschungel bei Nacht */
.hero-txt,.hero-stage{position:relative;z-index:2}
.hero{transition:color .7s}
.hero>.night{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 70% at 72% 38%,#1f3324 0%,#101c13 45%,#070c08 100%)}
.flies{position:absolute;inset:0;width:100%;height:100%}
.cone{position:absolute;inset:0;--mx:70%;--my:40%;
  background:radial-gradient(circle 300px at var(--mx) var(--my),#e8d3a033 0%,#c09c6318 35%,transparent 70%);mix-blend-mode:screen}
.leaves{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(40% 30% at 0% 100%,#000 0,transparent 70%),radial-gradient(35% 28% at 100% 0%,#000 0,transparent 70%)}
.hero.is-night{color:var(--ivory)}
.hero.is-night .sub{color:#f5f1e8d9}
.hero.is-night .micro{color:#f5f1e8a6}
.hero.is-night .eyebrow{color:var(--brass)}
.hero.is-night .micro .ph{outline-color:#c09c63cc}
.hero.is-night .card3d .face{box-shadow:0 0 80px -10px #c09c6355,0 30px 60px -30px #000}
.hero .sub,.hero .micro,.hero .eyebrow{transition:color .7s}

/* 3b. Zieh deine Karte */
.draw{background:radial-gradient(80% 60% at 50% 55%,#24392a,#0e1811 75%);color:var(--ivory);padding:110px 0 100px;overflow:hidden}
.draw .eyebrow{color:var(--brass)}
.d-hint{color:#f5f1e8b3;margin:0 0 46px}
.d-stage{position:relative;width:min(78vw,320px);aspect-ratio:5/7;margin:0 auto;perspective:1400px}
.d-stack i{position:absolute;inset:0;border-radius:var(--r);background:#1b2c1f;box-shadow:0 0 0 1px #c09c6355 inset}
.d-stack i:nth-child(1){transform:rotate(-7deg) translate(-10px,6px)}
.d-stack i:nth-child(2){transform:rotate(5deg) translate(9px,4px)}
.d-stack i:nth-child(3){transform:rotate(-2deg) translate(-3px,2px)}
.dcard{all:unset;position:absolute;inset:0;cursor:pointer;border-radius:var(--r);transform-style:preserve-3d;transition:transform .3s}
.dcard:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.dc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.75,.2,1)}
.dcard.on .dc-in{transform:rotateY(180deg)}
.dcard{transition:transform .3s cubic-bezier(.2,.8,.3,1.2)}
.d-stage:hover .dcard:not(.on),.dcard.lift:not(.on){transform:translateY(-22px) scale(1.04)}
.d-stage:hover .dcard:not(.on) .front,.dcard.lift:not(.on) .front{box-shadow:0 50px 80px -24px #000,0 0 40px #c09c6355,0 0 0 1px #c09c6399 inset}
.dcard.lift{animation:none}
.dcard .face{gap:7%}
.dcard .front{background:linear-gradient(160deg,#2A4230,#16241a);color:var(--brass);box-shadow:0 30px 70px -20px #000,0 0 0 1px #c09c6377 inset}
.dcard .front .c-logo{fill:var(--brass);width:30%}
.dcard .front .c-title{font-size:18px;letter-spacing:.12em;text-transform:uppercase}
.dcard .front .c-mark{color:#c09c63aa}
.dcard .back{color:var(--ink);overflow:hidden;box-shadow:0 0 90px -10px #c09c6399,0 30px 70px -20px #000}
.dcard .face>span{display:block}
.dcard .c-quote{font-size:clamp(16px,4.4vw,20px)}
.shine{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,#f3dca1cc 48%,#fff8e6 50%,#f3dca1cc 52%,transparent 60%);transform:translateX(-100%);pointer-events:none;mix-blend-mode:multiply}
.dcard.on .shine{animation:shine 1.6s .55s ease-out forwards}
@keyframes shine{to{transform:translateX(100%)}}
.dcard.pulse:not(.on){animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 50px 4px #c09c6366}}
.d-after{text-align:center;margin-top:46px;padding:0 var(--pad);opacity:.25;transition:opacity .8s}
.d-after.on{opacity:1}
.d-ess{font:italic 400 clamp(20px,5vw,28px)/1.3 var(--serif);margin:0 0 22px;color:var(--brass)}
.d-after .link-btn{display:block;margin:14px auto 0;color:var(--ivory)}
.d-mail{max-width:460px;margin:34px auto 0;text-align:left;font-size:14px}
.d-mail label{display:block;margin-bottom:10px}
.d-mail .consent{font-size:12px;color:#f5f1e8a6;margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.d-mail .consent input{margin-top:3px}

/* 3c. Unboxing */
.unbox{background:linear-gradient(#0e1811,#24392a 30%,#ede6d6 100%)}
.ub-pin{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ub-head{color:var(--ivory);margin-bottom:10px}
.ub-head .eyebrow{color:var(--brass)}
.ub-stage{--k:1;position:relative;width:440px;height:420px;transform:scale(var(--k));transform-origin:50% 60%;flex:none}
@media (max-width:520px){.ub-stage{--k:.78;margin:-40px 0}}
.ub-glow{position:absolute;left:50%;bottom:120px;width:360px;height:360px;translate:-50% 0;border-radius:50%;background:radial-gradient(#f3dca1aa,transparent 65%);opacity:0}
.ub-back,.ub-front{position:absolute;left:50%;bottom:0;width:320px;height:170px;translate:-50% 0;border-radius:6px}
.ub-back{background:#14221a;bottom:14px;height:160px;width:300px}
.ub-front{background:linear-gradient(170deg,#2A4230,#1b2d20);box-shadow:0 40px 60px -30px #000,0 0 0 1px #c09c6366 inset;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--brass)}
.ub-logo{width:34px;height:48px;fill:var(--brass)}
.ub-name{font:500 22px var(--serif);color:var(--ivory)}
.ub-ed{font:600 10px var(--sans);letter-spacing:.3em;text-transform:uppercase}
.ub-cards{position:absolute;inset:0;z-index:2}
.ub-card{position:absolute;left:50%;bottom:24px;width:100px;height:140px;margin-left:-50px;border-radius:10px;background:#fbf8f1;
  box-shadow:0 20px 30px -18px #000a,0 0 0 1px #c09c6366 inset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.ub-card .c-logo.sm{width:30%}
.ub-card .c-title-big{font-size:17px}
.ub-card .c-ed{font-size:9px}
.ub-lid{position:absolute;left:50%;bottom:160px;width:334px;height:34px;margin-left:-167px;border-radius:6px;z-index:4;
  background:linear-gradient(#34503b,#22382a);box-shadow:0 10px 20px -10px #000,0 0 0 1px #c09c6377 inset;display:grid;place-items:center;
  font:600 11px var(--sans);letter-spacing:.35em;color:var(--brass);transform-origin:100% 100%}
.ub-note{font-size:12px;margin-top:28px;color:#111a}

/* Versiegelte Karte */
.pcard.sealed .front{background:linear-gradient(165deg,#fbf8f1,#efe6d2);gap:10%}
.wax{position:relative;width:42%;aspect-ratio:1;border-radius:47% 53% 50% 50%/52% 48% 52% 48%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#e3c58c,#c09c63 45%,#8c6d3a 100%);
  box-shadow:0 6px 12px -4px #5a4420aa,inset 0 -4px 8px #6d522788,inset 0 3px 6px #fff5}
.wax::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1.5px solid #7a5d2c88;box-shadow:inset 0 1px 2px #fff6}
.wax svg{width:38%;height:auto;aspect-ratio:496/696;fill:#6b5126;filter:drop-shadow(0 1px 0 #f0d9a6)}
.seal-txt{font:italic 400 13px/1.35 var(--serif);margin:0;color:#111c}
@media (hover:hover){.pcard.sealed:hover .pc-in{transform:none}}
.pcard.sealed.on .pc-in{transform:none}
.pcard.sealed.nudge .wax{animation:nudge .5s}
@keyframes nudge{25%{rotate:-8deg}75%{rotate:6deg}}

/* 4b. Kaufbereich */
.buy{padding:110px 0 40px;background:#ede6d6}
.buy-grid{display:grid;gap:40px}
@media (min-width:960px){.buy-grid{grid-template-columns:1.1fr .9fr;align-items:start}.gallery{position:sticky;top:90px}}
.ph-box{border:1.5px dashed #c09c63bb;border-radius:18px;background:repeating-linear-gradient(135deg,#c09c6314 0 10px,transparent 10px 20px),#f5f1e8;
  display:grid;place-items:center;text-align:center;padding:14px;font-size:13px;position:relative}
.g-main{aspect-ratio:4/5}
.g-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.g-thumbs .ph-box{aspect-ratio:1;font-size:10.5px;padding:6px;border-radius:12px}
.ph-box .ph{background:none;outline:0}
.play{position:absolute;top:8px;right:10px;font-size:12px;color:var(--sage)}
.buy-lead{font-size:18px;max-width:40ch;margin:0 0 20px}
.price{font:500 40px var(--serif);margin:0}
.price-note{font-size:13px;color:#111b;margin:4px 0 22px}
.variants{border:0;padding:0;margin:0 0 12px;display:grid;gap:10px}
.variants legend{font-weight:600;font-size:14px;margin-bottom:10px}
.var{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--ivory);
  box-shadow:0 0 0 1px #11111118 inset;cursor:pointer;transition:box-shadow .25s}
.var:has(input:checked){box-shadow:0 0 0 2px var(--brass) inset}
.var input{accent-color:var(--forest)}
.var b{display:block;font-weight:600;font-size:15px}.var small{color:#1119}
.var em{font-style:normal;font-weight:600;font-size:14px}
.gift-hint{font-size:13px;color:#111b;margin:0 0 18px}
.xpay-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.xpay{height:46px;border-radius:10px;border:0;font:600 15px var(--sans);cursor:pointer;letter-spacing:-.01em}
.xpay.apple{background:#111;color:#fff}
.xpay.google{background:#fff;color:#111;box-shadow:0 0 0 1px #11111133 inset}
.xpay.paypal{background:#FFC439;color:#003087;font-style:italic}
.xpay.paypal b{color:#003087}
.xpay-row.sm .xpay{height:40px;font-size:13px}
.mock-note{font-size:11.5px;color:#1118;margin:8px 0 0;text-align:center}
.trust{list-style:none;padding:16px 0 0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-size:12.5px;border-top:1px solid #11111118}
.trust li{display:flex;flex-direction:column;gap:2px;padding-left:18px;position:relative}
.trust li::before{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--sage) inset}
.trust b{font-size:13px}
.lmiv{margin-top:26px;padding:18px 20px;border-radius:14px;background:var(--ivory);box-shadow:0 0 0 1px #11111114 inset}
.lmiv-h{font:600 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:0 0 10px}
.lmiv dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13.5px}
.lmiv dt{font-weight:600}.lmiv dd{margin:0}

/* Sticky Kauf-Leiste mobil */
.buybar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 10px 10px 18px;border-radius:999px;background:#f5f1e8ee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 40px -12px #2a4230aa,0 0 0 1px #11111114 inset;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.buybar.on{transform:none}
.bb-txt{display:flex;flex-direction:column;line-height:1.25;font-size:12px;min-width:0}
.bb-txt b{font:500 16px var(--serif)}
@media (min-width:900px){.buybar{display:none}}

/* Warenkorb-Schublade */
.scrim{position:fixed;inset:0;z-index:80;background:#0a110ccc;opacity:0;transition:opacity .4s}
.scrim.on{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100vw);background:var(--ivory);display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:none}
.drawer.on{transform:none;box-shadow:-30px 0 60px -30px #000}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #11111114}
.dr-head h2{font-size:24px;margin:0}
.x{width:40px;height:40px;border-radius:50%;border:1px solid #11111122;background:none;font-size:24px;line-height:1;cursor:pointer;color:inherit}
.dr-body{flex:1;overflow:auto;padding:18px 22px;overscroll-behavior:contain}
.dr-empty{color:#111a}
.lines{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.line-img{width:64px;aspect-ratio:5/7;border-radius:8px;background:linear-gradient(160deg,#2A4230,#16241a);display:grid;place-items:center}
.line-img svg{width:40%;height:auto;aspect-ratio:496/696;fill:var(--brass)}
.line b{display:block;font:500 16px/1.2 var(--serif)}
.line small{color:#111a;font-size:12px}
.qty{display:inline-flex;align-items:center;gap:2px;margin-top:6px;border-radius:999px;box-shadow:0 0 0 1px #11111122 inset}
.qty button{width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:16px}
.qty span{min-width:20px;text-align:center;font-weight:600;font-size:14px}
.line .rm{background:none;border:0;font-size:12px;text-decoration:underline;cursor:pointer;color:#111a;margin-left:6px}
.line-price{font-weight:600;font-size:14px;text-align:right}
.upsell{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:18px 0;padding:14px 16px;border-radius:14px;background:#2A4230;color:var(--ivory);font-size:14px}
.upsell small{color:#f5f1e8b3}
.pill{border:0;border-radius:999px;background:var(--brass);color:var(--ink);padding:10px 14px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.giftbox{border:0;margin:0;padding:16px;border-radius:14px;box-shadow:0 0 0 1px #c09c6377 inset;display:grid;gap:10px;font-size:14px}
.giftbox legend{font:500 18px var(--serif);padding:0 6px;margin-left:-6px}
.chk{display:flex;gap:10px;align-items:center;cursor:pointer}
.chk input{accent-color:var(--forest);width:18px;height:18px}
.chk small{color:#111a}
.greet textarea{width:100%;border:0;border-radius:6px;padding:16px;font:italic 400 19px/1.45 var(--serif);color:#2A4230;resize:vertical;
  background:repeating-linear-gradient(transparent 0 27px,#c09c6340 27px 28px),#fffdf7;box-shadow:0 8px 20px -12px #2a423066,0 0 0 1px #c09c6355 inset;rotate:-.6deg}
.cnt{display:block;text-align:right;font-size:11px;color:#1118}
.chk-txt{font-size:13px;margin-top:4px}
.giftbox input[type=text],.f input,.f select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid #11111126;background:#fff;font:inherit;font-size:15px}
.dr-foot{padding:16px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #11111114;background:#efe9dc}
.sum{display:flex;justify-content:space-between;font-size:16px}
.sum-note{font-size:12px;color:#111a;margin:2px 0 12px}

/* Checkout: ruhig, ohne Effekte */
.checkout{position:fixed;inset:0;z-index:100;background:#fbf9f4;overflow:auto}
.checkout *,.checkout *::before,.checkout *::after{animation:none!important;transition:none!important}
.checkout .btn::after{display:none}
.checkout .btn{box-shadow:none}
.checkout .btn:hover{transform:none}
.co-wrap{max-width:620px;margin:0 auto;padding:16px 20px 60px}
.co-head{display:flex;justify-content:space-between;align-items:center;padding:8px 0 18px}
.co-steps{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.co-steps li{padding:10px 12px;border-radius:8px;background:#11111108;color:#1119}
.co-steps li.on{background:var(--forest);color:var(--ivory);font-weight:600}
.co-x{font-weight:600;margin:0}
.or{text-align:center;font-size:13px;color:#1119;margin:22px 0;display:flex;align-items:center;gap:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#1111111f}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.f{display:grid;gap:5px;font-size:13px;font-weight:500}
.f.full{grid-column:1/-1}
.co-addr{padding:14px 16px;border-radius:12px;background:#11111108;font-size:14px;margin-bottom:18px}
.pay-opts{border:0;padding:0;margin:0 0 18px;display:grid;gap:8px;font-size:15px}
.pay-opts legend{font-weight:600;margin-bottom:8px}
.pay-opts label{padding:12px 14px;border-radius:10px;box-shadow:0 0 0 1px #1111111f inset;display:flex;gap:10px;align-items:center}
.co-sum{border-top:1px solid #1111111f;padding-top:14px;margin-bottom:14px;font-size:14px;display:grid;gap:6px}
.co-sum .r{display:flex;justify-content:space-between;gap:12px}
.co-sum .tot{font-weight:700;font-size:17px;border-top:1px solid #1111111f;padding-top:10px;margin-top:4px}
.co-legal{font-size:12.5px;color:#111b;margin:0 0 14px}
.co-msg{font-size:14px;color:var(--forest);font-weight:600;min-height:1em}
.toast{position:fixed;left:50%;bottom:90px;z-index:120;translate:-50% 20px;opacity:0;pointer-events:none;background:#111;color:#fff;font-size:13px;padding:10px 16px;border-radius:999px;transition:opacity .3s,translate .3s;max-width:90vw;text-align:center}
.toast.on{opacity:1;translate:-50% 0}
body.locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .ub-pin{height:auto;padding:100px 0 60px}
  .ub-lid{transform:translate(120px,-120px) rotate(14deg)}
  .ub-card{transform:translate(var(--x),var(--y)) rotate(var(--r))}
  .ub-stage{margin-top:240px}
  .night .cone{--mx:72%;--my:38%}
}
.buy-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.buy-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.variants,.giftbox,.pay-opts{min-width:0}
.buy{overflow-x:clip}
.face{color:var(--ink)}
.ub-card.hero-c{z-index:5}
.d-mail .news-row{display:flex;gap:8px;background:#ffffff14;border:1px solid #f5f1e833;border-radius:999px;padding:6px}
.d-mail .news-row input{flex:1;min-width:0;background:none;border:0;color:var(--ivory);padding:0 16px;font:inherit}
.d-mail .news-row input::placeholder{color:#f5f1e888}
.d-mail .news-row button{border:0;border-radius:999px;background:var(--ivory);color:var(--forest);font:600 14px var(--sans);padding:12px 18px;cursor:pointer}
.wax{width:48%}
[hidden]{display:none!important}
@media (max-width:959px){.buy{padding-top:36px}}

.dcard:not(.on){touch-action:none;user-select:none;-webkit-user-select:none}
.d-stage::after{content:"";position:absolute;inset:-30px -14px;z-index:-1}
.d-stack{pointer-events:none}.dcard{z-index:2}
.d-stage:has(.dcard:not(.on)){touch-action:none}
/* Dreh-Fix: Perspektive nur auf der Karte, damit der Stapel beim Drehen nicht in die Karte sortiert wird */
.d-stage{perspective:none}.dcard{perspective:1400px;transform-style:flat}