/* ═══════════════════════════════════════════════════════════════
   SIGNATURPILZE + SORTIMENT (3D-Karussell · Parallax · Einflug)
   Quelle: Claude-Design-Export „pilzhof-signaturpilze.zip“.
   Alle Regeln sind unter .pz gekapselt, Keyframes tragen das Präfix pz-,
   damit nichts auf andere Sektionen der Website durchschlägt.
   Logik: signaturpilze.js · Inhalte: index.html, Block „SECTION 3“.
   ═══════════════════════════════════════════════════════════════ */

/* =========================================================
   Basis
   ========================================================= */

.pz{--px:0;--py:0;--sy:0;--tilt:9;line-height:normal;font-family:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;color:#efe9dc}
.pz *{box-sizing:border-box}
.pz a{color:#d4b56a}.pz a:hover{color:#ecd59a}
.pz button{font:inherit;color:inherit}
.pz button:focus-visible,.pz a:focus-visible{outline:2px solid #d4b56a;outline-offset:4px}
.pz .serif{font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif}
.pz .eyebrow{font-size:13px;letter-spacing:.32em;text-transform:uppercase;font-weight:600}
.pz .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   Sektion 1 · Signaturpilze
   ========================================================= */
.pz .hero{position:relative;overflow:hidden;min-height:max(920px,100svh);padding:88px 0 72px;background:radial-gradient(1100px 700px at 30% 50%,#25382c 0%,rgba(24,36,29,0) 70%),radial-gradient(700px 500px at 92% 8%,rgba(212,181,106,.07),rgba(0,0,0,0) 70%),#18241d}
.pz .wrap{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.pz .hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:clamp(40px,6vw,96px);align-items:center}

/* Myzel-Netz im Hintergrund: eigene Parallax-Ebene + wandernde Lichtimpulse */
.pz .mycel{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;translate:calc(var(--px) * -18px) calc(var(--py) * -12px + var(--sy) * 60px)}
.pz .mycel path{fill:none;stroke:#d4b56a;stroke-opacity:.13;stroke-width:1}
.pz .mycel path.sig{stroke-opacity:.6;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:28 1000;animation:pz-signal 10s linear infinite}
@keyframes pz-signal{from{stroke-dashoffset:1028}to{stroke-dashoffset:0}}

/* 3D-Bühne */
.pz .stage-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.pz .stage-wrap{position:relative;height:560px;perspective:1400px;perspective-origin:50% 42%;touch-action:pan-y}
.pz .stage{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--sy) * -36px)) rotateY(calc(var(--px) * var(--tilt) * 1deg)) rotateX(calc(var(--py) * var(--tilt) * -0.7deg))}
.pz .glow{position:absolute;left:50%;top:50%;width:540px;height:540px;margin:-270px 0 0 -270px;border-radius:50%;filter:blur(46px);transform:translateZ(-320px);translate:calc(var(--px) * -60px) calc(var(--py) * -40px);transition:background 1s ease;pointer-events:none}
.pz .orbit{position:absolute;left:50%;top:50%;pointer-events:none}
.pz .orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(212,181,106,.22);animation:pz-spin 46s linear infinite}
.pz .orbit .ring::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#d4b56a;box-shadow:0 0 16px 4px rgba(212,181,106,.5)}
.pz .orbit.o2 .ring{animation-duration:30s;animation-direction:reverse;border-color:rgba(212,181,106,.3)}
@keyframes pz-spin{to{rotate:360deg}}
.pz .spore{position:absolute;width:6px;height:6px;border-radius:50%;background:#d4b56a;box-shadow:0 0 18px 4px rgba(212,181,106,.45);animation:pz-twinkle 4s ease-in-out infinite}
@keyframes pz-twinkle{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.15}}

/* Karten */
.pz .card3d{position:absolute;left:50%;top:50%;width:min(380px,66vw);aspect-ratio:1/1;margin:0;padding:0;border:0;background:#101812;border-radius:28px;cursor:pointer;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.2,.8,.15,1),box-shadow .9s ease;text-align:left}
.pz .card3d .shot{position:absolute;inset:0;border-radius:28px;overflow:hidden}
.pz .card3d .shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);filter:saturate(.55) brightness(.7);transition:transform 1.4s cubic-bezier(.2,.8,.15,1),filter .9s ease}
.pz .card3d .shine{position:absolute;inset:0;border-radius:28px;pointer-events:none;opacity:0;transition:opacity .6s;overflow:hidden}
.pz .card3d .shine::before{content:"";position:absolute;left:50%;top:40%;width:456px;height:456px;margin:-228px 0 0 -228px;background:radial-gradient(228px circle at 50% 50%,rgba(255,248,230,.16),rgba(255,248,230,0));translate:calc(var(--px) * min(171px,29.7vw)) calc(var(--py) * min(171px,29.7vw));will-change:transform,translate}
.pz .card3d .sweep{position:absolute;inset:0;border-radius:28px;overflow:hidden;pointer-events:none}
.pz .card3d .sweep::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,rgba(255,248,230,0),rgba(255,248,230,.3),rgba(255,248,230,0));transform:translateX(-160%) skewX(-12deg)}
.pz .card3d .rim{position:absolute;inset:0;border-radius:28px;border:1px solid rgba(239,233,220,.14);pointer-events:none}
.pz .card3d .side-label{position:absolute;left:18px;right:18px;bottom:16px;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1.05;color:#efe9dc;transition:opacity .5s}
.pz .card3d .float{position:absolute;opacity:0;transform:translateZ(2px);transition:opacity .5s ease,transform 1s cubic-bezier(.2,.8,.15,1)}
.pz .pos-front{transform:translate(-50%,-50%) translateZ(40px);box-shadow:0 70px 120px -36px rgba(0,0,0,.75),0 0 0 1px rgba(212,181,106,.28);cursor:default}
.pz .pos-front .shot img{transform:scale(1);filter:none}
.pz .pos-front .shine{opacity:1}
.pz .pos-front .side-label{opacity:0}
.pz .pos-front .float{opacity:1;transition-delay:.45s}
.pz .pos-front .f1{transform:translateZ(90px)}
.pz .pos-front .f2{transform:translateZ(140px)}
.pz .pos-front .f3{transform:translateZ(70px)}
.pz .pos-right{transform:translate(-50%,-50%) translate3d(54%,10px,-260px) rotateY(-40deg) scale(.8)}
.pz .pos-left{transform:translate(-50%,-50%) translate3d(-54%,10px,-260px) rotateY(40deg) scale(.8)}
.pz .pos-right .side-label{text-align:right}
.pz .pos-left:hover,.pz .pos-right:hover{box-shadow:0 0 0 1px rgba(212,181,106,.45)}
.pz .pos-left:hover .shot img,.pz .pos-right:hover .shot img{filter:saturate(.8) brightness(.85)}

/* Schwebende Elemente auf der Karte */
.pz .glass{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;background:rgba(20,30,24,.86);border:1px solid rgba(212,181,106,.35);box-shadow:0 24px 44px -14px rgba(0,0,0,.65)}
.pz .idea{display:flex;flex-direction:column;gap:4px;min-width:200px;padding:11px 16px 12px;border-radius:16px;background:rgba(20,30,24,.88);border:1px solid rgba(212,181,106,.4);box-shadow:0 24px 44px -14px rgba(0,0,0,.7)}
.pz .idea-lbl{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#d4b56a}
.pz .idea-rot{display:grid;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.15;color:#efe9dc;white-space:nowrap}
.pz .idea-rot span{grid-area:1/1;opacity:0;animation:pz-ideaCycle 9s ease-in-out infinite}
.pz .idea-rot span:nth-child(2){animation-delay:3s}
.pz .idea-rot span:nth-child(3){animation-delay:6s}
@keyframes pz-ideaCycle{0%{opacity:0;transform:translateY(8px)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-8px)}}
.pz .pill{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(239,233,220,.94);color:#1d2a22;font-size:13px;font-weight:600;box-shadow:0 18px 34px -12px rgba(0,0,0,.6);white-space:nowrap}
.pz .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#a5853a}
.pz .bob{animation:pz-bob 6s ease-in-out infinite}
.pz .bob2{animation:pz-bob 7.5s ease-in-out -2.5s infinite}
.pz .bob3{animation:pz-bob 6.8s ease-in-out -4s infinite}
@keyframes pz-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Wechsel-Effekte (fx-a / fx-b abwechselnd → Keyframes starten bei jedem Wechsel neu) */
.pz .pulse{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;border:1px solid rgba(212,181,106,.65);opacity:0;pointer-events:none;transform:translateZ(-60px)}
.pz .burst{position:absolute;left:50%;top:50%;width:0;height:0;transform:translateZ(90px);pointer-events:none}
.pz .burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#e4c77f;box-shadow:0 0 14px 3px rgba(212,181,106,.6);opacity:0}
.pz .burst i:nth-child(1){--a:8deg;--d:250px}.pz .burst i:nth-child(2){--a:44deg;--d:210px}.pz .burst i:nth-child(3){--a:80deg;--d:270px}.pz .burst i:nth-child(4){--a:118deg;--d:230px}.pz .burst i:nth-child(5){--a:152deg;--d:260px}.pz .burst i:nth-child(6){--a:190deg;--d:220px}.pz .burst i:nth-child(7){--a:226deg;--d:280px}.pz .burst i:nth-child(8){--a:262deg;--d:215px}.pz .burst i:nth-child(9){--a:298deg;--d:255px}.pz .burst i:nth-child(10){--a:334deg;--d:235px}
.pz .fx-a .pulse{animation:pz-pulseA 1.2s cubic-bezier(.2,.7,.2,1)}
.pz .fx-b .pulse{animation:pz-pulseB 1.2s cubic-bezier(.2,.7,.2,1)}
.pz .fx-a .burst i{animation:pz-burstA 1.3s cubic-bezier(.15,.7,.2,1) both}
.pz .fx-b .burst i{animation:pz-burstB 1.3s cubic-bezier(.15,.7,.2,1) both}
.pz .fx-a .pos-front{animation:pz-popA 1.15s cubic-bezier(.2,.8,.15,1)}
.pz .fx-b .pos-front{animation:pz-popB 1.15s cubic-bezier(.2,.8,.15,1)}
.pz .fx-a .pos-front .sweep::after{animation:pz-sweepA 1.1s .35s cubic-bezier(.4,0,.2,1) both}
.pz .fx-b .pos-front .sweep::after{animation:pz-sweepB 1.1s .35s cubic-bezier(.4,0,.2,1) both}
@keyframes pz-pulseA{from{opacity:.85;scale:.7}to{opacity:0;scale:1.8}}
@keyframes pz-pulseB{from{opacity:.85;scale:.7}to{opacity:0;scale:1.8}}
@keyframes pz-burstA{0%{opacity:0;transform:rotate(var(--a)) translateX(40px) scale(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1)}}
@keyframes pz-burstB{0%{opacity:0;transform:rotate(var(--a)) translateX(40px) scale(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(1)}}
@keyframes pz-popA{0%{scale:.9}55%{scale:1.045}100%{scale:1}}
@keyframes pz-popB{0%{scale:.9}55%{scale:1.045}100%{scale:1}}
@keyframes pz-sweepA{from{transform:translateX(-160%) skewX(-12deg)}to{transform:translateX(330%) skewX(-12deg)}}
@keyframes pz-sweepB{from{transform:translateX(-160%) skewX(-12deg)}to{transform:translateX(330%) skewX(-12deg)}}

/* Steuerung */
.pz .ctrl{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.pz .arrow{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(239,233,220,.22);background:rgba(239,233,220,.03);cursor:pointer;transition:border-color .3s,background .3s,opacity .3s}
.pz .arrow:hover{border-color:#d4b56a;background:rgba(212,181,106,.1)}
.pz .arrow:disabled{opacity:.3;cursor:default;border-color:rgba(239,233,220,.22);background:none}
.pz .segs{display:flex;gap:8px}
.pz .seg{width:34px;height:2px;border-radius:2px;background:rgba(239,233,220,.18);overflow:hidden;position:relative}
.pz .seg::after{content:"";position:absolute;inset:0;background:#d4b56a;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.15,1)}
.pz .seg.on::after{transform:scaleX(1)}
.pz .hint{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#a9a698}

/* Textspalte (leichte Gegen-Parallax) */
.pz .copy-col{display:flex;flex-direction:column;gap:26px;min-width:0;translate:calc(var(--px) * 10px) calc(var(--py) * 8px)}
.pz .tabs{display:flex;flex-wrap:wrap;gap:0 22px}
.pz .tab{position:relative;display:flex;align-items:baseline;gap:10px;min-height:48px;padding:10px 0;background:none;border:0;border-bottom:1px solid rgba(239,233,220,.14);color:#b4b2a5;font-size:15px;cursor:pointer;transition:color .3s;flex:1 1 0;min-width:120px;text-align:left}
.pz .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#d4b56a;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.15,1)}
.pz .tab .n{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:20px;color:#8f8c7f;transition:color .3s}
.pz .tab:hover{color:#efe9dc}
.pz .tab.is-active{color:#efe9dc}
.pz .tab.is-active::after{transform:scaleX(1)}
.pz .tab.is-active .n{color:#d4b56a}
.pz .details{display:grid}
.pz .detail{grid-area:1/1;display:flex;flex-direction:column;gap:24px;visibility:hidden;pointer-events:none;transition:visibility 0s linear .6s}
.pz .detail > *{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.15,1),filter .45s ease}
.pz .detail.is-active{visibility:visible;pointer-events:auto;transition-delay:0s}
.pz .detail.is-active > *{opacity:1;transform:none;filter:none}
.pz .detail.is-active > *:nth-child(1){transition-delay:.25s}
.pz .detail.is-active > *:nth-child(2){transition-delay:.35s}
.pz .detail.is-active > *:nth-child(3){transition-delay:.45s}
.pz .detail.is-active > *:nth-child(4){transition-delay:.55s}
.pz .h2{margin:0;font-size:clamp(48px,5.4vw,78px);font-weight:500;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.pz .latin{margin:0;font-size:21px;font-style:italic;color:#b4b2a5}
.pz .lead{margin:0;font-size:18px;line-height:1.5;color:#e6e0d2;max-width:34ch;text-wrap:pretty}
.pz .chips{display:flex;flex-wrap:wrap;gap:8px}
.pz .chip{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(239,233,220,.18);background:rgba(239,233,220,.04);font-size:14px;color:#e6e0d2}
.pz .row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:15px 0;border-top:1px solid rgba(239,233,220,.1)}
.pz .lbl{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#d4b56a;font-weight:600;padding-top:6px}
.pz .dots{display:flex;flex-direction:column;gap:6px}
.pz .dot{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.5;color:#d6d1c4}
.pz .dot::before{content:"";flex:0 0 5px;height:5px;border-radius:50%;background:#d4b56a;transform:translateY(-2px)}
.pz .ideas{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.pz .dish{display:inline-flex;align-items:baseline;gap:8px;font-size:16px;color:#efe9dc}
.pz .dish i{font-family:"Cormorant Garamond",Georgia,serif;color:#d4b56a;font-size:18px}
.pz .more{font-size:14px;font-style:italic;color:#a9a698}
.pz .vital{border-radius:20px;padding:18px 22px;background:linear-gradient(135deg,rgba(212,181,106,.15),rgba(212,181,106,.03));border:1px solid rgba(212,181,106,.42);box-shadow:0 0 70px -12px rgba(212,181,106,.28)}

/* =========================================================
   Sektion 2 · Sortiment
   ========================================================= */
.pz .sort{position:relative;background:#eee8dc;color:#1d2a22;overflow:hidden;padding:88px 0 96px}
.pz .sort-mycel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pz .sort-mycel path{fill:none;stroke:#7d8b74;stroke-opacity:.22;stroke-width:1}
.pz .sort-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.pz .scard{position:relative;display:flex;flex-direction:column;border-radius:22px;background:#faf7f0;box-shadow:0 1px 0 rgba(29,42,34,.06),0 24px 50px -30px rgba(29,42,34,.35);transform:perspective(900px) rotateX(0) translateY(0);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.15,1),box-shadow .6s;text-decoration:none;color:inherit}
.pz .scard{color:#1d2a22}
.pz .scard:hover{transform:perspective(900px) rotateX(7deg) translateY(-10px);box-shadow:0 2px 0 rgba(29,42,34,.06),0 50px 70px -36px rgba(29,42,34,.5)}
.pz .scard:hover{color:#1d2a22}
.pz .scard .ph{position:relative;height:210px;margin:10px 10px 0;border-radius:16px;overflow:hidden;background:#1f2e25}
.pz .scard .ph img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.15,1)}
.pz .scard:hover .ph img{transform:scale(1.06)}
.pz .scard .lift{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;transform:translateZ(30px)}
.pz .scard h3{margin:4px 0 0;font-size:27px;font-weight:500;line-height:1.05}
.pz .scard .sl{font-style:italic;font-size:16px;color:#5b6158}
.pz .scard .use{font-size:14px;color:#3d453d}
.pz .status{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.pz .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pz .st-on{background:#dfe8dc;color:#2f5a3a}
.pz .st-soon{background:#f1e6c9;color:#6e5719}
.pz .st-vital{background:#1d2a22;color:#e4c77f}
.pz .cta{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;background:#1d2a22;color:#efe9dc;font-weight:600;font-size:15px;text-decoration:none;transition:transform .3s,background .3s}
.pz .cta,.pz .cta:hover{color:#efe9dc}
.pz .cta:hover{background:#2b3d31;transform:translateY(-2px)}
@supports (animation-timeline: view()){
  .pz .scard .ph img{animation:pz-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes pz-drift{from{translate:0 -7%}to{translate:0 7%}}
}

/* =========================================================
   Responsive & Barrierefreiheit
   ========================================================= */
@media (max-width:720px){
  .pz .row{grid-template-columns:minmax(0,1fr);gap:8px}
  .pz .stage-wrap{height:440px}
}
@media (prefers-reduced-motion: reduce){
  .pz *,.pz *::before,.pz *::after{animation:none!important;transition:none!important}
  .pz .idea-rot span:first-child{opacity:1}
}

/* =========================================================
   Website-Ergänzungen (nicht Teil des Design-Exports)
   ========================================================= */

/* Ab dem 4. Pilz warten weitere Karten unsichtbar hinter der Bühne */
.pz .pos-back{transform:translate(-50%,-50%) translateZ(-420px) scale(.7);opacity:0;pointer-events:none}

/* Einflug beim ersten Sichtkontakt. Das JS setzt .pz-pre (Ausgangslage) und beim
   Erscheinen .pz-entering (Staffelung) – ohne JS oder bei reduzierter Bewegung bleibt alles sofort sichtbar. */
.pz .card3d{transition:transform 1.05s cubic-bezier(.2,.8,.15,1),box-shadow .9s ease,opacity .8s ease}
.pz .glow{transition:background 1s ease,opacity 1.6s ease}
.pz .orbit{transition:opacity 1.8s ease}
.pz .stage-wrap{transition:opacity 1s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.pz .ctrl{transition:opacity .9s ease}
.pz .pz-head,.pz .copy-col>*{transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.8,.15,1),filter .9s ease}
.pz .mycel path:not(.sig){transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1)}
.pz .mycel .sig{transition:opacity 1.2s ease}

.pz .hero.pz-pre .stage-wrap{opacity:0;transform:translateY(90px) scale(.9)}
.pz .hero.pz-pre .pos-front{transform:translate(-50%,-50%) translateZ(-40px) rotateX(16deg) scale(.9)}
.pz .hero.pz-pre .card3d:not(.pos-front){transform:translate(-50%,-50%) translateZ(-160px) scale(.82);opacity:0}
.pz .hero.pz-pre .glow,.pz .hero.pz-pre .orbit,.pz .hero.pz-pre .ctrl,.pz .hero.pz-pre .mycel .sig{opacity:0}
.pz .hero.pz-pre .pz-head,.pz .hero.pz-pre .copy-col>*{opacity:0;transform:translateY(34px);filter:blur(8px)}

.pz .hero.pz-entering .card3d:not(.pos-front){transition-delay:.42s}
.pz .hero.pz-entering .orbit{transition-delay:.3s}
.pz .hero.pz-entering .ctrl{transition-delay:1s}
.pz .hero.pz-entering .mycel .sig{transition-delay:1.8s}
.pz .hero.pz-entering .copy-col>*:nth-child(1){transition-delay:.5s}
.pz .hero.pz-entering .copy-col>*:nth-child(3){transition-delay:.66s}

.pz .sort .sort-head>*{transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.pz .sort .sort-mycel{transition:opacity 1.6s ease}
.pz .sort.pz-pre .sort-head>*{opacity:0;transform:translateY(40px)}
.pz .sort.pz-pre .sort-mycel{opacity:0}
.pz .sort.pz-pre .scard{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(80px)}
.pz .sort.pz-entering .scard{transition:transform 1.3s cubic-bezier(.16,1,.3,1),opacity 1s ease,box-shadow .6s}
.pz .sort.pz-entering .sort-head>*:nth-child(2){transition-delay:.12s}
.pz .sort.pz-entering .scard:nth-child(2){transition-delay:.1s}
.pz .sort.pz-entering .scard:nth-child(3){transition-delay:.2s}
.pz .sort.pz-entering .scard:nth-child(4){transition-delay:.3s}
.pz .sort.pz-entering .scard:nth-child(n+5){transition-delay:.4s}

/* Außer Sicht ruhen alle Endlos-Animationen (Orbit, Sporen, Schwebe-Elemente, Myzel-Impulse) */
.pz .hero.pz-paused *,.pz .hero.pz-paused *::before,.pz .hero.pz-paused *::after{animation-play-state:paused}

/* Bedienhinweis passend zum Gerät: Maus & Mausrad am Desktop, Wischen & Tippen auf Touch-Geräten */
.pz .hint-touch{display:none}
@media (hover:none) and (pointer:coarse){.pz .hint-touch{display:inline}.pz .hint-pointer{display:none}}

/* Flimmerfreie 3D-Darstellung – vor allem für Safari, das gleich tiefe 3D-Ebenen
   jeden Frame neu sortiert und sich schneidende Ebenen nicht aufteilt:
   - .face bündelt Bild, Glanz, Lichtstreif, Rahmen und Namen zu EINER flachen Ebene je Karte
   - .stage-back legt Lichthof, Orbits und Puls in einen eigenen 3D-Raum hinter die Karten
   - Bild, Textspalte und Myzel-Netz behalten dauerhaft eine eigene Ebene (kein Neumalen beim Wechsel) */
.pz .stage-back{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:translateY(calc(var(--sy) * -36px)) rotateY(calc(var(--px) * var(--tilt) * 1deg)) rotateX(calc(var(--py) * var(--tilt) * -0.7deg))}
.pz .card3d .face{position:absolute;inset:0;border-radius:28px;transform:translateZ(1px)}
.pz .card3d,.pz .card3d .face{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pz .card3d .shot img{will-change:transform}
.pz .copy-col,.pz .mycel{will-change:transform,translate}

/* Klick-Hinweis: pulsierender Punkt mit Pfeil im sichtbaren Teil jeder hinteren Karte.
   Liegt eine Ebene vor der Bildfläche (translateZ 3px) und lässt Klicks zur Karte durch.
   Nach dem ersten Wechsel ruht der Puls (.pz-used) – der Punkt bleibt als Orientierung. */
.pz .card3d .hotspot{position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3dd9c,#d4b56a 58%,#b38f3a);color:#18241d;box-shadow:0 0 0 5px rgba(212,181,106,.22),0 14px 28px -10px rgba(0,0,0,.75),0 0 28px rgba(212,181,106,.55);opacity:0;transform:translateZ(3px) scale(.6);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.15,1),background .3s ease;pointer-events:none}
.pz .card3d .hotspot svg{width:22px;height:22px}
.pz .card3d .hotspot::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(228,199,127,.9);animation:pz-hotspot 2.4s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes pz-hotspot{0%{opacity:.95;scale:1}100%{opacity:0;scale:2.2}}
.pz .pos-left .hotspot{left:21%}
.pz .pos-right .hotspot{left:79%}
.pz .pos-left .hotspot svg{transform:scaleX(-1)}
.pz .pos-left .hotspot,.pz .pos-right .hotspot{opacity:1;transform:translateZ(3px) scale(1);transition-delay:.55s}
.pz .pos-left:hover .hotspot,.pz .pos-right:hover .hotspot{transform:translateZ(3px) scale(1.12)}
.pz .hero.pz-used .hotspot::before{animation:none;opacity:0}

/* Derselbe Punkt im Bedienhinweis unter den Pfeilen */
.pz .hint-dot{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#d4b56a;box-shadow:0 0 12px rgba(212,181,106,.6)}
.pz .hint-dot::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(212,181,106,.85);animation:pz-hotspot 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.pz .hero.pz-used .hint-dot::before{animation:none;opacity:0}