/* ═══════════════════════════════════════════════════════════════
   SECTION 2 – PHILOSOPHIE (3D · Parallax · Myzel · Pilze)
   Eigenständiger Baustein aus Claude Design, vollständig unter #pf-philo gekapselt.
   Farben: --pf-accent / --pf-gold; Hintergrund folgt --soft-cream aus styles.css.
   ═══════════════════════════════════════════════════════════════ */
#pf-philo{--pf-accent:#4A6B47;--pf-gold:#C9AE5D;--pf-ink:#1D2419;--pf-bg:var(--soft-cream);--pf-text:#5D5E56;--pf-soil:56px;position:relative;overflow:hidden;isolation:isolate;width:100%;background:var(--pf-bg);color:var(--pf-ink);font-family:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;padding:clamp(96px,11vw,168px) 0 calc(clamp(150px,15vw,220px) + var(--pf-soil));-webkit-font-smoothing:antialiased;line-height:1.5}
#pf-philo *,#pf-philo *::before,#pf-philo *::after{box-sizing:border-box}
#pf-philo h2,#pf-philo h3,#pf-philo p{margin:0;padding:0;border:0;background:none;text-transform:none;letter-spacing:normal}
#pf-philo svg{max-width:none;max-height:none}
#pf-philo .pf-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;overflow:hidden;will-change:opacity}
#pf-philo .pf-spot-light{position:absolute;left:0;top:0;width:1400px;height:1400px;will-change:transform}
#pf-philo .pf-back,#pf-philo .pf-front{position:absolute;inset:0;pointer-events:none}
#pf-philo .pf-back{z-index:1}
#pf-philo .pf-front{z-index:3}
#pf-philo .pf-anchor{position:absolute;width:0;height:0}
#pf-philo .pf-at-bl{left:max(110px,7%);bottom:var(--pf-soil)}
#pf-philo .pf-at-bc{left:50%;bottom:var(--pf-soil)}
#pf-philo .pf-at-br{left:min(calc(100% - 110px),93%);bottom:var(--pf-soil)}
#pf-philo .pf-at-bl .pf-websvg,#pf-philo .pf-at-bc .pf-websvg,#pf-philo .pf-at-br .pf-websvg{-webkit-mask:linear-gradient(#000 692px,rgba(0,0,0,0) 748px);mask:linear-gradient(#000 692px,rgba(0,0,0,0) 748px)}
#pf-philo .pf-at-hl{left:calc(50% - min(32vw,490px) - 120px);top:calc(clamp(96px,11vw,168px) + 270px)}
#pf-philo .pf-at-hr{left:calc(50% + min(32vw,490px) + 120px);top:calc(clamp(96px,11vw,168px) + 270px)}
#pf-philo .pf-move{position:absolute;left:0;top:0;will-change:transform}
#pf-philo .pf-webmask{position:absolute;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#pf-philo .pf-websvg{position:absolute;left:0;top:0;display:block;overflow:visible}
#pf-philo .pf-websvg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#pf-philo .pf-websvg .w0{stroke:#fff;stroke-opacity:.9;stroke-width:3.2}
#pf-philo .pf-websvg .w1{stroke:#fff;stroke-opacity:.8;stroke-width:2.3}
#pf-philo .pf-websvg .g0{stroke:var(--pf-accent);stroke-opacity:.44;stroke-width:1.2}
#pf-philo .pf-websvg .g1{stroke:var(--pf-accent);stroke-opacity:.34;stroke-width:.95}
#pf-philo .pf-websvg .g2{stroke:var(--pf-accent);stroke-opacity:.26;stroke-width:.8}
#pf-philo .pf-websvg .g3{stroke:var(--pf-accent);stroke-opacity:.2;stroke-width:.65}
#pf-philo .pf-websvg .nd{fill:var(--pf-gold);fill-opacity:.85;stroke:none}
#pf-philo .pf-websvg .gl{stroke:var(--pf-gold);stroke-width:1.7}
#pf-philo .pf-glow{position:absolute;left:0;top:0;width:420px;height:420px;overflow:hidden;opacity:0;will-change:transform;-webkit-mask:radial-gradient(circle 210px at 50% 50%,#000 0%,rgba(0,0,0,0) 100%) no-repeat;mask:radial-gradient(circle 210px at 50% 50%,#000 0%,rgba(0,0,0,0) 100%) no-repeat}
#pf-philo .pf-glow-in{position:absolute;left:0;top:0;will-change:transform}
#pf-philo .pf-spore{position:absolute;left:0;top:0}
#pf-philo .pf-spore i{display:block;border-radius:50%}
#pf-philo .pf-inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
#pf-philo .pf-head{display:flex;flex-direction:column;align-items:center;text-align:center;transform-style:preserve-3d;will-change:transform}
#pf-philo .pf-eyebrow-z{transform:translateZ(-30px)}
#pf-philo .pf-eyebrow{display:flex;align-items:center;gap:18px}
#pf-philo .pf-eyebrow p{margin:0 -.34em 0 0;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.34em;text-transform:uppercase;color:#846C27}
#pf-philo .pf-rule{display:block;width:48px;height:1px;background:var(--pf-gold);transform:scaleX(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .25s}
#pf-philo .pf-rule-l{transform-origin:right center}
#pf-philo .pf-rule-r{transform-origin:left center}
#pf-philo .pf-title{margin:34px 0 0;font-family:'Cormorant Garamond','Cormorant',Georgia,serif;font-weight:500;font-size:clamp(2.7rem,5.8vw,5.6rem);line-height:1.04;letter-spacing:-.012em;text-wrap:balance;color:var(--pf-ink);transform-style:preserve-3d}
#pf-philo .pf-line1{display:block}
#pf-philo .pf-line2{display:block;margin-top:.06em;font-style:italic;font-weight:400;color:var(--pf-accent);transform:translateZ(64px)}
#pf-philo .pf-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .09em .18em;margin:-.04em -.09em -.18em}
#pf-philo .pf-wi{display:inline-block;transform:translateY(118%) rotate(7deg);transform-origin:0 100%;opacity:0;filter:blur(8px);transition:transform 1.25s cubic-bezier(.16,1,.3,1),opacity .9s ease,filter 1.2s ease}
#pf-philo .pf-zk{position:relative;display:inline-block}
#pf-philo .pf-ul{position:absolute;left:3%;bottom:-.04em;width:90%;height:.24em;overflow:visible}
#pf-philo .pf-ul path{fill:none;stroke:var(--pf-gold);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) 1.15s}
#pf-philo .pf-fade{opacity:0;transform:translateY(16px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
#pf-philo .pf-cards{position:relative;margin-top:clamp(76px,8.5vw,124px)}
#pf-philo .pf-thread{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);overflow:visible;pointer-events:none;z-index:0;fill:none;stroke-linecap:round}
#pf-philo .pf-thread .t-w{stroke:#fff;stroke-opacity:.9;stroke-width:3.6}
#pf-philo .pf-thread .t-m{stroke:var(--pf-accent);stroke-opacity:.6;stroke-width:1.6}
#pf-philo .pf-thread .t-b{stroke:var(--pf-accent);stroke-opacity:.45;stroke-width:1.1}
#pf-philo .pf-thread .t-t{stroke:var(--pf-accent);stroke-opacity:.4;stroke-width:1}
#pf-philo .pf-thread .t-s{stroke:var(--pf-gold);stroke-width:2.6;stroke-dasharray:16 3000;opacity:0;transition:opacity 1.2s ease}
#pf-philo .pf-thread .t-s2{stroke-width:2;stroke-dasharray:10 3000}
#pf-philo .pf-thread .t-tip{fill:var(--pf-gold);stroke:none;opacity:0;transition:opacity .6s ease}
#pf-philo .pf-thread .t-node{opacity:0;transition:opacity .7s ease}
#pf-philo .pf-thread .pf-pulse{fill:none;stroke:var(--pf-gold);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:pf-pulse 2.8s ease-out infinite}
#pf-philo .pf-thread .t-dot{fill:var(--pf-gold);stroke:none}
#pf-philo .pf-thread .t-core{fill:#FFFDF6;stroke:none}
#pf-philo .pf-run{animation:pf-run 7.5s cubic-bezier(.45,0,.55,1) infinite}
#pf-philo .pf-run2{animation-duration:10s;animation-delay:-4.5s}
#pf-philo .pf-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:28px;perspective:1600px}
#pf-philo .pf-rv{height:100%;opacity:0;transform:translateY(110px) rotateX(-32deg) scale(.92);transform-origin:50% 100%;transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
#pf-philo .pf-rv:nth-child(1){transition-delay:.55s}
#pf-philo .pf-rv:nth-child(2){transition-delay:.7s}
#pf-philo .pf-rv:nth-child(3){transition-delay:.85s}
#pf-philo .pf-rv:nth-child(4){transition-delay:1s}
#pf-philo .pf-par{height:100%}
#pf-philo .pf-card{position:relative;height:100%;display:flex;flex-direction:column;padding:40px 34px 34px;transform-style:preserve-3d;will-change:transform}
#pf-philo .pf-card-bg{position:absolute;inset:0;border-radius:22px;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 64px -30px rgba(31,48,28,.2),0 2px 8px rgba(31,48,28,.04)}
#pf-philo .pf-card-glare{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;transform:translateZ(1px)}
#pf-philo .pf-num{position:absolute;top:28px;right:30px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:46px;line-height:1;color:var(--pf-gold);transform:translateZ(26px)}
#pf-philo .pf-badge{position:relative;width:76px;height:76px;transform-style:preserve-3d;transform:translateZ(56px)}
#pf-philo .pf-badge-bg{position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--pf-accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pf-accent) 20%,transparent)}
#pf-philo .pf-ring{position:absolute;left:-8px;top:-8px;width:92px;height:92px;overflow:visible;animation:pf-spin 16s linear infinite;animation-play-state:paused}
#pf-philo .pf-ring circle{fill:none;stroke:var(--pf-gold);stroke-width:1.4;stroke-dasharray:1.5 7;stroke-linecap:round}
#pf-philo .pf-card:hover .pf-ring{animation-play-state:running}
#pf-philo .pf-ico{position:absolute;left:16px;top:16px;width:44px;height:44px;overflow:visible;transform:translateZ(22px);fill:none;stroke:var(--pf-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#pf-philo .pf-ico>*{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1)}
#pf-philo .pf-rv:nth-child(1) .pf-ico>*{transition-delay:1.1s}
#pf-philo .pf-rv:nth-child(2) .pf-ico>*{transition-delay:1.25s}
#pf-philo .pf-rv:nth-child(3) .pf-ico>*{transition-delay:1.4s}
#pf-philo .pf-rv:nth-child(4) .pf-ico>*{transition-delay:1.55s}
#pf-philo .pf-card h3{position:relative;margin:34px 0 0;padding-right:8px;font-family:'Cormorant Garamond','Cormorant',Georgia,serif;font-size:26px;font-weight:600;line-height:1.16;color:var(--pf-ink);-webkit-hyphens:auto;hyphens:auto;transform:translateZ(38px)}
#pf-philo .pf-card p{position:relative;margin:16px 0 0;font-size:15.5px;line-height:1.7;color:var(--pf-text);text-wrap:pretty;transform:translateZ(22px)}
#pf-philo .pf-barwrap{margin-top:auto;padding-top:30px;transform:translateZ(14px)}
#pf-philo .pf-bar{display:block;width:28px;height:2px;border-radius:2px;background:var(--pf-gold);transition:width .7s cubic-bezier(.16,1,.3,1)}
#pf-philo .pf-card:hover .pf-bar{width:76px}
#pf-philo .pf-mush{position:absolute;pointer-events:auto;will-change:transform}
#pf-philo .pf-mush-hl{left:-90px;top:-252px;width:180px;height:260px}
#pf-philo .pf-mush-hr{left:-100px;top:-232px;width:200px;height:240px}
#pf-philo .pf-ms{display:block;overflow:visible}
#pf-philo .pf-ms *{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#pf-philo .pf-ms .f{fill:#FBF8F1;stroke:var(--pf-accent)}
#pf-philo .pf-ms .l{fill:none;stroke:var(--pf-accent)}
#pf-philo .pf-ms .g{fill:none;stroke:var(--pf-gold)}
#pf-philo .pf-ms .d{fill:var(--pf-gold);stroke:none}
#pf-philo .pf-ms .k{fill:#33432F;stroke:#2A3627}
#pf-philo .pf-ms .h{fill:none;stroke:#FBF8F1;stroke-opacity:.55}
#pf-philo .pf-msvg{transition:transform .7s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 100%}
#pf-philo .pf-mush:hover .pf-msvg{transform:scale(1.05) rotate(-2.5deg)}
#pf-philo .pf-bm{position:absolute;bottom:8px}
#pf-philo .pf-grow{opacity:0;transform:scale(.25,0);transform-origin:50% 100%;transition:transform 1.5s cubic-bezier(.34,1.56,.64,1),opacity .5s ease}
#pf-philo .pf-sway{transform-origin:50% 100%;animation:pf-sway 7s ease-in-out infinite}
#pf-philo .pf-puff{position:absolute}
#pf-philo .pf-puff span{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--pf-gold);opacity:0;pointer-events:none}
#pf-philo .pf-mush:hover .pf-puff span{animation:pf-puff 2.4s ease-out infinite}
#pf-philo .pf-puff span:nth-child(1){--dx:-36px;--dy:-86px}
#pf-philo .pf-puff span:nth-child(2){--dx:-12px;--dy:-112px}
#pf-philo .pf-puff span:nth-child(3){--dx:16px;--dy:-96px}
#pf-philo .pf-puff span:nth-child(4){--dx:40px;--dy:-78px}
#pf-philo .pf-puff span:nth-child(5){--dx:-26px;--dy:-58px}
#pf-philo .pf-puff span:nth-child(6){--dx:28px;--dy:-124px}
#pf-philo .pf-puff span:nth-child(7){--dx:2px;--dy:-70px}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(2){animation-delay:.35s}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(3){animation-delay:.7s}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(4){animation-delay:1.05s}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(5){animation-delay:1.4s}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(6){animation-delay:1.75s}
#pf-philo .pf-mush:hover .pf-puff span:nth-child(7){animation-delay:2.1s}
#pf-philo.is-in .pf-wi{transform:none;opacity:1;filter:blur(0)}
#pf-philo.is-in .pf-fade{opacity:1;transform:none}
#pf-philo.is-in .pf-rule{transform:scaleX(1)}
#pf-philo.is-in .pf-ul path{stroke-dashoffset:0}
#pf-philo.is-in .pf-rv{opacity:1;transform:none}
#pf-philo.is-in .pf-ico>*{stroke-dashoffset:0}
#pf-philo.is-in .pf-grow{opacity:1;transform:none}
@keyframes pf-spin{to{transform:rotate(360deg)}}
@keyframes pf-float{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-20px)}}
@keyframes pf-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes pf-run{from{stroke-dashoffset:16}to{stroke-dashoffset:-1511}}
@keyframes pf-sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes pf-puff{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15)}}
@media (max-width:1199px){#pf-philo .pf-thread{display:none}}
@media (max-width:899px){#pf-philo .pf-headmush{display:none}}
@media (prefers-reduced-motion:reduce){#pf-philo *{animation:none!important;transition:none!important}#pf-philo .pf-wi,#pf-philo .pf-fade,#pf-philo .pf-rv,#pf-philo .pf-grow{opacity:1!important;transform:none!important;filter:none!important}#pf-philo .pf-rule{transform:none!important}#pf-philo .pf-ul path,#pf-philo .pf-ico>*{stroke-dashoffset:0!important}}