/*! PageNik-Bot v6 – Chat-Knopf (Maskottchen). Nur CSS/SVG. Gehört zu pagenik-bot.js */
/* ---------- PageNik-Bot v6: Wolke ohne Text, nur Augen; 3D-Look, Mund nur bei Bedarf ---------- */
:root{--pnb-s:90px;--pnb-r:22px;--pnb-vv:0px}
@media (max-width:600px){:root{--pnb-s:84px;--pnb-r:16px}}
.pnb{position:fixed;right:calc(var(--pnb-r) + env(safe-area-inset-right,0px));bottom:calc(var(--pnb-r) + env(safe-area-inset-bottom,0px) + var(--pnb-vv,0px) + var(--pnb-lift,0px));z-index:9999;width:var(--pnb-s);height:var(--pnb-s);padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;translate:0 0;scale:1;--gx:0;--gy:0;
  filter:drop-shadow(0 8px 11px rgba(3,8,16,.8)) drop-shadow(0 0 3px rgba(3,8,16,.78));
  transition:scale .25s cubic-bezier(.3,1.6,.5,1),filter .25s,transform .45s cubic-bezier(.3,1.4,.5,1),opacity .18s linear}
/* Nur kurz unsichtbar, solange ein markierter Knopf unter ihm liegt. Position bleibt unten rechts. */
.pnb.scroll-duck{opacity:0;pointer-events:none}
.pnb,.pnb-menu,.pnb-panel{margin-bottom:0}
.pnb.swap{opacity:0;transition:opacity .18s!important;pointer-events:none}
.pnb.raised.arriving{clip-path:inset(-400px -400px 0 -400px)}
.pnb:hover{scale:1.07;filter:drop-shadow(0 12px 16px rgba(3,8,16,.85)) drop-shadow(0 0 3.5px rgba(3,8,16,.82))}
.pnb:active{scale:.95}
.pnb:focus-visible{outline:3px solid var(--orange,#FF6B1A);outline-offset:6px;border-radius:50%}
.pnb svg{width:100%;height:100%;overflow:visible;display:block;
  transform:perspective(420px) rotateX(var(--pnb-rx,0deg)) rotateY(var(--pnb-ry,0deg));transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.pnb svg *{transform-box:view-box}
.pnb .bob{transform-origin:100px 200px;animation:pnb-bob 3s ease-in-out infinite}
/* 3D: Bodenschatten (bleibt am Boden), Atmen */
.pnb .ground{transform-origin:100px 205px;animation:pnb-ground 3s ease-in-out infinite;transition:transform .4s}
.pnb .breath{transform-origin:100px 188px;animation:pnb-breath 3.8s ease-in-out infinite}
.pnb .wig{transform-origin:100px 150px;animation:pnb-wiggle 7s ease-in-out infinite}
.pnb .face{transform-origin:100px 110px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
/* Gesichtsteile: je Gefühl eine Variante, weich überblendet */
.pnb .emo{opacity:0;transform:scale(.55);transition:opacity .16s,transform .32s cubic-bezier(.3,1.6,.5,1)}
.pnb .eyes .emo{transform-origin:100px 64px}
.pnb .mouth .emo{transform-origin:100px 157px;transform:scale(.7,.4)}
.pnb .mouth{transform-origin:100px 157px}
.pnb .m-grit,.pnb .m-puh{opacity:0}
.pnb .m-puh{transform-origin:104px 157px}
.pnb[data-emo="normal"] .e-normal,
.pnb[data-emo="happy"] .e-happy,
.pnb[data-emo="wow"] .e-wow,
.pnb[data-emo="wow"] .m-wow,
.pnb[data-emo="sleepy"] .e-sleepy,
.pnb[data-emo="wink"] .e-wink,
.pnb[data-emo="curious"] .e-normal,
.pnb[data-emo="bored"] .e-bored,
.pnb[data-emo="relax"] .e-relax,
.pnb[data-emo="whistle"] .e-pfeif,
.pnb[data-emo="whistle"] .m-pfeif,
.pnb[data-emo="sneeze"] .e-normal,
.pnb[data-emo="sleep"] .e-sleep,
.pnb[data-emo="startle"] .e-wow,
.pnb[data-emo="shy"] .e-normal,
.pnb[data-emo="pleased"] .e-happy,
.pnb[data-emo="doubt"] .e-normal,
.pnb[data-emo="read"] .e-normal,
.pnb[data-emo="sad"] .e-normal,
.pnb[data-emo="cool"] .e-normal{opacity:1;transform:none}
.pnb .cheeks{transition:opacity .3s}
.pnb[data-emo="normal"] .cheeks{opacity:0.18}
.pnb[data-emo="happy"] .cheeks{opacity:0.5}
.pnb[data-emo="wow"] .cheeks{opacity:0.25}
.pnb[data-emo="sleepy"] .cheeks{opacity:0.1}
.pnb[data-emo="wink"] .cheeks{opacity:0.45}
.pnb[data-emo="curious"] .cheeks{opacity:0.22}
.pnb[data-emo="bored"] .cheeks{opacity:0.08}
.pnb[data-emo="hide"] .cheeks{opacity:0.18}
.pnb[data-emo="relax"] .cheeks{opacity:0.22}
.pnb[data-emo="whistle"] .cheeks{opacity:0.3}
.pnb[data-emo="sneeze"] .cheeks{opacity:0.35}
.pnb[data-emo="sleep"] .cheeks{opacity:0.15}
.pnb[data-emo="startle"] .cheeks{opacity:0.2}
.pnb[data-emo="shy"] .cheeks{opacity:1}
.pnb[data-emo="pleased"] .cheeks{opacity:0.5}
.pnb[data-emo="doubt"] .cheeks{opacity:0.12}
.pnb[data-emo="read"] .cheeks{opacity:0.18}
.pnb[data-emo="sad"] .cheeks{opacity:0}
.pnb[data-emo="cool"] .cheeks{opacity:0.3}
/* Blinzeln (normal), Umschauen (neugierig) */
.pnb .blink{transform-origin:100px 64px;animation:pnb-blink 4.6s infinite}
.pnb[data-emo="curious"] .look{animation:pnb-look 2.4s ease-in-out infinite}
.pnb[data-emo="curious"] .face{animation:pnb-tilt 2.4s ease-in-out infinite}
.pnb[data-emo="happy"] .face{animation:pnb-happy .55s ease-in-out 2}
.pnb[data-emo="wow"] .face{transform:translateY(-5px) scale(1.04)}
.pnb[data-emo="sleepy"] .e-sleepy .lid{transform-origin:100px 64px;animation:pnb-droop 1.8s ease-in-out infinite}
.pnb .yawn{transform-origin:100px 158px;transform:scale(0)}
.pnb[data-emo="sleepy"] .yawn{animation:pnb-yawn 1.9s ease-in-out both}
.pnb .zzz{opacity:0}
.pnb[data-emo="sleepy"] .zzz{animation:pnb-zzz 1.9s ease-out both}
.pnb[data-emo="wink"] .e-wink .shut{transform-origin:114px 62px;animation:pnb-pop .3s cubic-bezier(.3,1.6,.5,1) both}
/* Füße + Laufen */
.pnb .feet{opacity:0;transform-origin:100px 186px;transform:scaleY(0);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.pnb.walking{animation:pnb-walk var(--walk-dur,9s) ease-in-out both}
.pnb.walking .feet{opacity:1;transform:none}
.pnb.walking .foot-l{transform-origin:76px 192px;animation:pnb-step .44s ease-in-out infinite}
.pnb.walking .foot-r{transform-origin:124px 192px;animation:pnb-step .44s -.22s ease-in-out infinite}
.pnb.walking .bob{animation:pnb-hop .44s ease-in-out infinite}
.pnb.walking .wig{animation:pnb-waddle .88s ease-in-out infinite}
.pnb.walking .ground{animation:pnb-ghop .44s ease-in-out infinite}
.pnb.walking svg{animation:pnb-turn var(--walk-dur,9s) ease-in-out both}
/* Blickrichtung: Augen, Nase, Mund verschieben sich (Augen am meisten = räumliche Drehung) */
.pnb .turn-eyes{transform:translate(calc(var(--gx)*16px),calc(var(--gy)*9px))}
.pnb .turn-nose{transform:translate(calc(var(--gx)*10px),calc(var(--gy)*4px))}
.pnb .turn-mouth{transform:translate(calc(var(--gx)*7px),calc(var(--gy)*2px))}
.pnb .turn-cheeks{transform:translate(calc(var(--gx)*9px),calc(var(--gy)*2px))}
.pnb .turn-eyes,.pnb .turn-nose,.pnb .turn-mouth,.pnb .turn-cheeks{transition:transform .4s cubic-bezier(.3,1.3,.5,1)}
.pnb .glance{animation:pnb-glance 12s ease-in-out infinite}
.pnb.walking .glance,.pnb.fishing .glance,.pnb.near .glance,.pnb[data-emo="curious"] .glance,.pnb[data-emo="sleepy"] .glance{animation:none}
/* beim Laufen: schaut in Laufrichtung (erst links, kurz zu dir, dann rechts) */
.pnb.walking .turn-eyes{animation:pnb-weyes var(--walk-dur,9s) ease-in-out both}
.pnb.walking .turn-nose{animation:pnb-wnose var(--walk-dur,9s) ease-in-out both}
.pnb.walking .turn-mouth,.pnb.walking .turn-cheeks{animation:pnb-wmouth var(--walk-dur,9s) ease-in-out both}
/* beim Angeln: schaut zur Angel, Augen folgen dem Schwimmer */
.pnb.fishing svg{--pnb-ry:-12deg;--pnb-rx:4deg}
.pnb.fishing .turn-eyes{transform:translate(-20px,7px);animation:pnb-fgaze 2.4s ease-in-out infinite}
.pnb.fishing .turn-nose{transform:translate(-13px,3px)}
.pnb.fishing .turn-mouth,.pnb.fishing .turn-cheeks{transform:translate(-9px,1px)}
.pnb.fishing.bite .turn-eyes{animation:pnb-fbite .32s ease-in-out infinite}
.pnb.fishing.catch .turn-eyes,.pnb.fishing.release .turn-eyes{animation:none;transform:translate(-20px,-3px)}
.pnb.fishing .ground{animation:none;transform:translateY(13px) scale(1.18,1.1)}
/* Ankunft: klettert von unten in die Ecke (einmal pro Besuch) */
.pnb.arriving{pointer-events:none}
.pnb .arr{transform-origin:100px 190px}
.pnb .ar-hands{opacity:0;transform:translateY(calc(var(--pnb-edge,240)*1px))}
.pnb .ar-hl{transform-origin:24px 0}.pnb .ar-hr{transform-origin:176px 0}
.pnb .ar-puh,.pnb .sweat,.pnb .ar-puh-t{opacity:0}
.pnb .sweat{transform-origin:168px 50px}
.pnb .ar-puh-t{transform-origin:150px 24px}
.pnb.arriving .ar-hands{opacity:1}
.pnb.arriving .arr{animation:pnb-arrive 4s var(--ar-delay,1.7s) both}
.pnb.arriving .ar-hl{animation:pnb-ar-hand 4s var(--ar-delay,1.7s) both}
.pnb.arriving .ar-hr{animation:pnb-ar-hand2 4s var(--ar-delay,1.7s) both}
.pnb.arriving .e-normal{animation:pnb-ar-a 4s var(--ar-delay,1.7s) both}
.pnb.arriving .m-puh{animation:pnb-ar-d 4s var(--ar-delay,1.7s) both}
.pnb.arriving .ar-puh,.pnb.arriving .m-grit{animation:pnb-ar-b 4s var(--ar-delay,1.7s) both}
.pnb.arriving .e-happy{animation:pnb-ar-c 4s var(--ar-delay,1.7s) both}
.pnb.arriving .cheeks{animation:pnb-ar-cheek 4s var(--ar-delay,1.7s) both}
.pnb.arriving .sweat{animation:pnb-ar-sweat 4s var(--ar-delay,1.7s) both}
.pnb.arriving .ar-puh-t{animation:pnb-ar-puht 4s var(--ar-delay,1.7s) both}
.pnb.arriving .turn-eyes{animation:pnb-ar-look 4s var(--ar-delay,1.7s) both}
.pnb.arriving .glance{animation:none}
@keyframes pnb-arrive{
  0%,9%{transform:translateY(calc(var(--pnb-edge,240)*1px - 6px)) scale(1,1) rotate(0)}
  20%{transform:translateY(calc(var(--pnb-edge,240)*1px - 92px)) scale(.98,1.03) rotate(0)}
  25%{transform:translateY(calc(var(--pnb-edge,240)*1px - 82px)) scale(1.03,.97) rotate(-2deg)}
  36%{transform:translateY(calc(var(--pnb-edge,240)*1px - 140px)) scale(.97,1.04) rotate(2deg)}
  41%{transform:translateY(calc(var(--pnb-edge,240)*1px - 130px)) scale(1.04,.96) rotate(0)}
  55%{transform:translateY(calc(var(--pnb-edge,240)*1px - 190px)) scale(.97,1.04) rotate(-2deg)}
  58%{transform:translateY(calc(var(--pnb-edge,240)*1px - 185px)) scale(1.07,.92) rotate(0)}
  62%{transform:translateY(-20px) scale(.94,1.08) rotate(0)}
  66%{transform:translateY(0) scale(1.1,.88) rotate(0)}
  70%{transform:translateY(0) scale(.97,1.03) rotate(0)}
  73%{transform:translateY(0) scale(1,1) rotate(-7deg)}
  76%{transform:translateY(0) scale(1,1) rotate(7deg)}
  79%{transform:translateY(0) scale(1,1) rotate(-4deg)}
  82%{transform:translateY(0) scale(1,1) rotate(2deg)}
  85%,100%{transform:translateY(0) scale(1,1) rotate(0)}}
@keyframes pnb-ar-hand{0%,5%{opacity:0;transform:translateY(24px) scale(.7) rotate(0)}9%{opacity:1;transform:translateY(-4px) scale(1.06) rotate(0)}
  11%{opacity:1;transform:translateY(0) scale(1) rotate(0)}14%{transform:translateY(0) scale(1) rotate(-8deg)}17%,33%{transform:translateY(0) scale(1) rotate(0)}
  36%{transform:translateY(2px) scale(1.05,.92) rotate(0)}40%,52%{transform:translateY(0) scale(1) rotate(0)}55%{transform:translateY(3px) scale(1.06,.9) rotate(0)}
  58%{opacity:1;transform:translateY(0) scale(1) rotate(0)}62%,100%{opacity:0;transform:translateY(10px) scale(.4) rotate(0)}}
@keyframes pnb-ar-hand2{0%,7%{opacity:0;transform:translateY(24px) scale(.7) rotate(0)}11%{opacity:1;transform:translateY(-4px) scale(1.06) rotate(0)}
  13%{opacity:1;transform:translateY(0) scale(1) rotate(0)}16%{transform:translateY(0) scale(1) rotate(8deg)}19%,33%{transform:translateY(0) scale(1) rotate(0)}
  36%{transform:translateY(2px) scale(1.05,.92) rotate(0)}40%,52%{transform:translateY(0) scale(1) rotate(0)}55%{transform:translateY(3px) scale(1.06,.9) rotate(0)}
  58%{opacity:1;transform:translateY(0) scale(1) rotate(0)}62%,100%{opacity:0;transform:translateY(10px) scale(.4) rotate(0)}}
@keyframes pnb-ar-a{0%,26%{opacity:1;transform:none}28%,59%{opacity:0;transform:none}61%,82%{opacity:1;transform:none}84%,100%{opacity:0;transform:none}}
@keyframes pnb-ar-n{0%,26%{opacity:1;transform:none}28%,100%{opacity:0;transform:none}}
@keyframes pnb-ar-d{0%,59%{opacity:0;transform:scale(.4)}62%,81%{opacity:1;transform:none}84%,100%{opacity:0;transform:scale(.4)}}
@keyframes pnb-ar-b{0%,26%{opacity:0;transform:none}28%,59%{opacity:1;transform:none}61%,100%{opacity:0;transform:none}}
@keyframes pnb-ar-c{0%,82%{opacity:0;transform:none}84%,100%{opacity:1;transform:none}}
@keyframes pnb-ar-cheek{0%,26%{opacity:.18}30%,58%{opacity:.6}62%,82%{opacity:.25}86%,100%{opacity:.5}}
@keyframes pnb-ar-sweat{0%,33%{opacity:0;transform:translateY(-4px) scale(.4)}37%{opacity:1;transform:none}56%{opacity:1;transform:translate(3px,8px)}62%,100%{opacity:0;transform:translate(6px,22px) scale(.8)}}
@keyframes pnb-ar-puht{0%,60%{opacity:0;transform:scale(.3)}64%{opacity:1;transform:scale(1.1)}67%,80%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:translateY(-8px) scale(1)}}
@keyframes pnb-ar-look{0%,9%{transform:translate(0,-8px)}24%{transform:translate(0,-8px)}28%,58%{transform:translate(0,0)}61%{transform:translate(0,-5px)}68%,100%{transform:translate(0,0)}}
/* Mehr Leben: Augenbrauen je Gefühl */
.pnb .brows{opacity:0;transition:opacity .2s}
.pnb .brl,.pnb .brr{transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.pnb .brl{transform-origin:85px 37px}.pnb .brr{transform-origin:115px 37px}
.pnb[data-emo="wow"] .brows,.pnb[data-emo="happy"] .brows,.pnb[data-emo="curious"] .brows,.pnb[data-emo="sleepy"] .brows,.pnb[data-emo="wink"] .brows,.pnb[data-emo="bored"] .brows,.pnb.brow .brows{opacity:1}
.pnb[data-emo="wow"] .brl,.pnb[data-emo="wow"] .brr{transform:translateY(-9px) scale(1.08)}
.pnb[data-emo="happy"] .brl,.pnb[data-emo="happy"] .brr{transform:translateY(-5px)}
.pnb[data-emo="curious"] .brl{transform:translateY(-9px) rotate(-10deg)}.pnb[data-emo="curious"] .brr{transform:translateY(3px) rotate(6deg)}
.pnb[data-emo="sleepy"] .brl,.pnb[data-emo="bored"] .brl{transform:translate(1px,8px) rotate(10deg)}
.pnb[data-emo="sleepy"] .brr,.pnb[data-emo="bored"] .brr{transform:translate(-1px,8px) rotate(-10deg)}
.pnb[data-emo="wink"] .brl{transform:translateY(-6px)}.pnb[data-emo="wink"] .brr{transform:translateY(5px) rotate(-8deg)}
.pnb.brow .brl,.pnb.brow .brr{animation:pnb-browflash .9s ease-in-out both}
/* Spannung vor einer Aktion: Braue hoch, Augen schauen umher, Atem kurz angehalten */
.pnb.anticip .brows{opacity:1}
.pnb.anticip .brl,.pnb.anticip .brr{animation:pnb-browflash 1s ease-in-out both}
.pnb.anticip .glance{animation:pnb-quickpeek 1s ease-in-out both}
.pnb.anticip .breath{animation-play-state:paused}
/* kleine Aktionen im Leerlauf (selten) */
.pnb .act{transform-origin:100px 196px}
.pnb.hop .act{animation:pnb-tinyhop .8s ease-out both}
.pnb.land .act{animation:pnb-land .55s ease-out both}
.pnb.tilt .act{animation:pnb-headtilt 1.3s ease-in-out both}
.pnb.wiggle .act{animation:pnb-wiggle2 .75s ease-in-out both}
.pnb.peek .glance{animation:pnb-quickpeek 1.1s ease-in-out both}
.pnb.hop .ground,.pnb.land .ground{animation:pnb-ghop .8s ease-out both}
@keyframes pnb-browflash{0%,100%{transform:translateY(0)}25%,60%{transform:translateY(-8px)}}
@keyframes pnb-tinyhop{0%{transform:translateY(0) scale(1,1)}14%{transform:translateY(0) scale(1.12,.86)}38%{transform:translateY(-16px) scale(.92,1.1)}62%{transform:translateY(0) scale(1.14,.84)}78%{transform:translateY(-3px) scale(.97,1.04)}100%{transform:translateY(0) scale(1,1)}}
@keyframes pnb-land{0%{transform:scale(1.14,.84)}45%{transform:translateY(-3px) scale(.95,1.06)}100%{transform:none}}
@keyframes pnb-headtilt{0%,100%{transform:rotate(0)}25%,70%{transform:rotate(-8deg) scale(1.02,.99)}}
@keyframes pnb-wiggle2{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg) scale(1.04,.96)}45%{transform:rotate(6deg) scale(.97,1.03)}70%{transform:rotate(-3deg)}}
@keyframes pnb-quickpeek{0%,100%{transform:translate(0,0)}15%,40%{transform:translate(-8px,-2px)}55%,85%{transform:translate(8px,1px)}}
/* v4: Mund nur wenn nötig – springt kurz auf und verschwindet wieder */
.pnb.fishing.catch .m-happy{opacity:1;transform:none}
.pnb.waving .m-normal{animation:pnb-wavesmile 1.9s ease-out both}
@keyframes pnb-wavesmile{0%{opacity:0;transform:scale(.5,.3)}12%{opacity:1;transform:scale(1.08,1.1)}20%,72%{opacity:1;transform:none}88%,100%{opacity:0;transform:scale(.6,.4)}}
/* Winken: Hand kommt raus und winkt */
.pnb .wave{opacity:0;transform-origin:172px 104px;transform:scale(.2) rotate(30deg);transition:opacity .2s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.pnb.waving .wave{opacity:1;transform:none}
.pnb .wave-arm{transform-origin:172px 104px}
.pnb.waving .wave-arm{animation:pnb-wave .36s ease-in-out infinite alternate}
@keyframes pnb-wave{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
/* Pfeifen: kleiner runder Mund, Blick unschuldig nach oben, Noten steigen auf (ohne Ton) */
.pnb .notes{opacity:0;transition:opacity .25s}
.pnb[data-emo="whistle"] .notes{opacity:1}
.pnb .note{opacity:0}
.pnb[data-emo="whistle"] .note{animation:pnb-note 1.8s ease-out infinite}
.pnb[data-emo="whistle"] .n1{animation-delay:-.6s}.pnb[data-emo="whistle"] .n2{animation-delay:-1.2s}
.pnb[data-emo="whistle"] .face{animation:pnb-sway 1.8s ease-in-out infinite}
@keyframes pnb-note{0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(26px,-58px) scale(1.05) rotate(18deg)}}
@keyframes pnb-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
/* Langeweile: Hand kratzt am Rand */
.pnb .hand{opacity:0;transform-origin:172px 150px;transform:scale(.2) rotate(-40deg);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.pnb.scratch .hand{opacity:1;transform:none}
.pnb.scratch .arm{transform-origin:172px 150px;animation:pnb-scratch .26s ease-in-out infinite alternate}
.pnb.scratch .marks{animation:pnb-marks .52s steps(2,jump-none) infinite}
.pnb .marks{opacity:0}
.pnb.scratch .wig{animation:none;transform:rotate(5deg)}
.pnb.scratch .e-bored{animation:pnb-boredlook 2.6s ease-in-out infinite}
@keyframes pnb-bob{0%,100%{transform:translateY(0) scale(1.025,.975)}50%{transform:translateY(-6px) scale(.98,1.025)}}
@keyframes pnb-ground{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.72}}
@keyframes pnb-ghop{0%,100%{transform:scale(1.04,1);opacity:1}50%{transform:scale(.8);opacity:.55}}
@keyframes pnb-breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.026)}}
@keyframes pnb-glance{0%,22%,40%,62%,80%,100%{transform:translate(0,0)}26%,36%{transform:translate(-5px,-2px)}66%,76%{transform:translate(5px,1.5px)}}
@keyframes pnb-weyes{0%,100%{transform:translate(0,0)}6%,38%{transform:translate(-20px,2px)}44%,56%{transform:translate(0,0)}62%,94%{transform:translate(20px,2px)}}
@keyframes pnb-wnose{0%,100%{transform:translate(0,0)}6%,38%{transform:translate(-13px,1px)}44%,56%{transform:translate(0,0)}62%,94%{transform:translate(13px,1px)}}
@keyframes pnb-wmouth{0%,100%{transform:translate(0,0)}6%,38%{transform:translate(-9px,0)}44%,56%{transform:translate(0,0)}62%,94%{transform:translate(9px,0)}}
@keyframes pnb-turn{0%,100%{transform:perspective(420px) rotateY(0) rotate(0)}8%,36%{transform:perspective(420px) rotateY(-18deg) rotate(-4deg)}44%,56%{transform:perspective(420px) rotateY(0) rotate(0)}64%,92%{transform:perspective(420px) rotateY(18deg) rotate(4deg)}}
@keyframes pnb-fgaze{0%,100%{transform:translate(-20px,6px)}50%{transform:translate(-20px,9.5px)}}
@keyframes pnb-fbite{0%,100%{transform:translate(-21px,9px)}35%{transform:translate(-19px,12px)}}
@keyframes pnb-wiggle{0%,40%,56%,100%{transform:rotate(0)}43%{transform:rotate(-6deg)}47%{transform:rotate(5deg)}51%{transform:rotate(-3deg)}54%{transform:rotate(1.5deg)}}
@keyframes pnb-blink{0%,43%,47%,90%,100%{transform:scaleY(1)}45%,92%{transform:scaleY(.08)}94%{transform:scaleY(1)}96%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
@keyframes pnb-look{0%,100%{transform:translateX(0)}20%,40%{transform:translateX(-8px)}60%,80%{transform:translateX(8px)}}
@keyframes pnb-tilt{0%,100%{transform:rotate(0)}20%,40%{transform:rotate(-6deg)}60%,80%{transform:rotate(6deg)}}
@keyframes pnb-happy{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-9px) scale(1.04,.98)}70%{transform:translateY(0) scale(1.05,.95)}}
@keyframes pnb-droop{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes pnb-yawn{0%{transform:scale(0)}30%{transform:scale(1)}65%{transform:scale(1.15,1.25)}100%{transform:scale(0)}}
@keyframes pnb-zzz{0%{opacity:0;transform:translate(0,6px)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-18px)}}
@keyframes pnb-pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes pnb-walk{0%{translate:0 0}42%,58%{translate:var(--walk-x,-300px) 0}100%{translate:0 0}}
@keyframes pnb-step{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-8deg)}}
@keyframes pnb-hop{0%,100%{transform:translateY(0) scale(1.11,.88)}16%{transform:translateY(-4px) scale(.94,1.07)}50%{transform:translateY(-13px) scale(.96,1.05)}84%{transform:translateY(-2px) scale(1.02,.98)}}
@keyframes pnb-waddle{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes pnb-walklook{0%{transform:translateX(0)}6%,40%{transform:translateX(-8px)}46%{transform:translateX(8px)}52%{transform:translateX(-8px)}60%,94%{transform:translateX(8px)}100%{transform:translateX(0)}}
@keyframes pnb-scratch{from{transform:rotate(-14deg)}to{transform:rotate(9deg)}}
@keyframes pnb-marks{0%{opacity:.9}100%{opacity:.2}}
/* Langeweile Stufe 2: hinsetzen und angeln */
.pnb .seat{opacity:0;transform-origin:100px 205px;transform:scale(.2,0);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.pnb.fishing .seat{opacity:1;transform:none}
.pnb.fishing .bob{animation:none;transform:translateY(7px);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.pnb.fishing .wig{animation:none;transform-origin:100px 196px;transform:scale(1.05,.91);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.pnb .rod{opacity:0;transform-origin:26px 156px;transform:scale(.25) rotate(35deg);transition:opacity .2s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.pnb.fishing .rod{opacity:1;transform:none;transition-delay:.45s}
.pnb .pole{transform-origin:26px 156px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.pnb .line{transform-origin:-62px 60px;transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.pnb .lift{transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.pnb.fishing .float{animation:pnb-float 2.4s ease-in-out infinite}
.pnb.fishing .ripple{animation:pnb-ripple 2.4s ease-out infinite}
.pnb .fish{opacity:0;transform-origin:-62px 262px;transform:scale(.2)}
.pnb.fishing.bite .float{animation:pnb-bite .32s ease-in-out infinite}
.pnb.fishing.bite .pole{animation:pnb-tug .32s ease-in-out infinite}
.pnb.fishing.catch .pole{transform:rotate(14deg)}
.pnb.fishing.catch .line{transform:scaleY(.38)}
.pnb.fishing.catch .lift{transform:translateY(-112px)}
.pnb.fishing.catch .float{animation:none}
.pnb.fishing.catch .ripple{opacity:0;animation:none}
.pnb.fishing.catch .fish{opacity:1;transform:none;transition:opacity .15s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.pnb.fishing.catch .fishbody{transform-origin:-62px 250px;animation:pnb-wriggle .26s ease-in-out infinite alternate}
.pnb.fishing.release .fish{animation:pnb-fishjump 1s ease-in both}
@keyframes pnb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes pnb-ripple{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@keyframes pnb-bite{0%,100%{transform:translate(0,0)}30%{transform:translate(-2px,9px)}60%{transform:translate(2px,4px)}}
@keyframes pnb-tug{0%,100%{transform:rotate(0)}40%{transform:rotate(-6deg)}}
@keyframes pnb-wriggle{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes pnb-fishjump{0%{opacity:1;transform:translate(0,0) rotate(0)}35%{opacity:1;transform:translate(-26px,-34px) rotate(-70deg)}100%{opacity:0;transform:translate(-44px,120px) rotate(-200deg)}}
@keyframes pnb-boredlook{0%,100%{transform:translateX(7px)}50%{transform:translateX(9px) translateY(1px)}}
/* ===================== v5: neue Gefühle ===================== */
/* nichts blockiert Klicks: nur die Knopf-Fläche selbst ist klickbar, Deko außerhalb nicht */
.pnb svg{pointer-events:none}
.pnb .sp,.pnb .cf,.pnb .dp,.pnb .zz text{transform-box:fill-box;transform-origin:center}
/* Sprechblasen/Texte nur während ihrer Szene „da“ – sonst auch nicht im Seitentext (innerText) */
.pnb .zzz,.pnb .ar-puh-t,.pnb .sn-txt,.pnb .zz,.pnb .wk-bang{visibility:hidden}
.pnb[data-emo="sleepy"] .zzz,.pnb.arriving .ar-puh-t,.pnb.sneeze .sn-txt,.pnb.sleeping .zz,.pnb.wake .wk-bang{visibility:visible}
.pnb[data-emo="sneeze"] .brows,.pnb[data-emo="startle"] .brows,.pnb[data-emo="shy"] .brows,.pnb[data-emo="pleased"] .brows,.pnb[data-emo="doubt"] .brows,
.pnb[data-emo="read"] .brows,.pnb[data-emo="sad"] .brows{opacity:1}
/* 1 Niesen: Augen kneifen, kleines O, dann „Hatschi!“ – Ruck, Wackeln, Puste-Wölkchen */
.pnb .sn-eyes,.pnb .sn-o,.pnb .sp,.pnb .sn-txt{opacity:0}
.pnb .sn-o{transform-origin:100px 158px}
.pnb .sn-txt{transform-origin:30px 8px}
.pnb.sneeze .e-normal{animation:pnb-sn-eye 2.4s ease-in-out both}
.pnb.sneeze .sn-eyes{animation:pnb-sn-sq 2.4s both}
.pnb.sneeze .sn-o{animation:pnb-sn-o 2.4s ease-in-out both}
.pnb.sneeze .face{animation:pnb-sn-face 2.4s ease-in-out both}
.pnb.sneeze .act{animation:pnb-sn-body 2.4s ease-in-out both}
.pnb.sneeze .sn-txt{animation:pnb-sn-txt 2.4s both}
.pnb.sneeze .brl,.pnb.sneeze .brr{animation:pnb-sn-brow 2.4s ease-in-out both}
.pnb.sneeze .glance{animation:none}
@keyframes pnb-sn-eye{0%{opacity:1;transform:scaleY(1)}30%{opacity:1;transform:scaleY(.6)}43%{opacity:1;transform:scaleY(.45)}45%,74%{opacity:0;transform:scaleY(.45)}78%,100%{opacity:1;transform:scaleY(1)}}
@keyframes pnb-sn-sq{0%,44%{opacity:0;transform:scale(.6)}46%{opacity:1;transform:scale(1.1)}50%,73%{opacity:1;transform:none}76%,100%{opacity:0}}
@keyframes pnb-sn-o{0%,6%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(.75)}28%{opacity:1;transform:scale(.9)}40%{opacity:1;transform:scale(1.15,1.25)}46%{opacity:1;transform:scale(1.3,.45)}58%{opacity:1;transform:scale(1,.5)}66%,100%{opacity:0;transform:scale(.5,.3)}}
@keyframes pnb-sn-face{0%{transform:none}38%{transform:translateY(-6px) rotate(-6deg)}44%{transform:translateY(-8px) rotate(-7deg)}48%{transform:translateY(6px) rotate(5deg) scale(1.04)}56%{transform:translateY(1px) rotate(-3deg)}64%{transform:rotate(2deg)}72%,100%{transform:none}}
@keyframes pnb-sn-body{0%{transform:none}40%{transform:scale(.97,1.05)}44%{transform:scale(.96,1.06)}48%{transform:translateY(3px) scale(1.13,.85)}55%{transform:scale(.95,1.06) rotate(-4deg)}63%{transform:scale(1.02,.98) rotate(3deg)}71%{transform:rotate(-1.5deg)}80%,100%{transform:none}}
@keyframes pnb-sn-txt{0%,45%{opacity:0;transform:scale(.3)}49%{opacity:1;transform:scale(1.14)}53%,76%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:translateY(-8px) scale(1)}}
@keyframes pnb-sn-brow{0%{transform:none}35%{transform:translateY(-7px)}44%{transform:translateY(-9px)}47%,74%{transform:translateY(4px)}82%,100%{transform:none}}
@keyframes pnb-sp0{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(-18.6px,2.4px) scale(1)}78%,100%{opacity:0;transform:translate(-62px,8px) scale(1.7)}}
.pnb.sneeze .sp0{animation:pnb-sp0 2.4s ease-out both}
@keyframes pnb-sp1{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(-14.4px,9.0px) scale(1)}78%,100%{opacity:0;transform:translate(-48px,30px) scale(1.7)}}
.pnb.sneeze .sp1{animation:pnb-sp1 2.4s ease-out both}
@keyframes pnb-sp2{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(-9.0px,-3.0px) scale(1)}78%,100%{opacity:0;transform:translate(-30px,-10px) scale(1.7)}}
.pnb.sneeze .sp2{animation:pnb-sp2 2.4s ease-out both}
@keyframes pnb-sp3{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(16.8px,3.0px) scale(1)}78%,100%{opacity:0;transform:translate(56px,10px) scale(1.7)}}
.pnb.sneeze .sp3{animation:pnb-sp3 2.4s ease-out both}
@keyframes pnb-sp4{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(12.6px,9.6px) scale(1)}78%,100%{opacity:0;transform:translate(42px,32px) scale(1.7)}}
.pnb.sneeze .sp4{animation:pnb-sp4 2.4s ease-out both}
@keyframes pnb-sp5{0%,45%{opacity:0;transform:translate(0,0) scale(.3)}49%{opacity:1;transform:translate(2.4px,13.2px) scale(1)}78%,100%{opacity:0;transform:translate(8px,44px) scale(1.7)}}
.pnb.sneeze .sp5{animation:pnb-sp5 2.4s ease-out both}
/* 2 Schlafen: Augen zu, Zzz steigt auf, langsamer Atem; Aufwachen: erschrocken, kleiner Sprung */
.pnb .zz text{opacity:0}
.pnb.sleeping .zz text{animation:pnb-zz 3.6s ease-out infinite}
.pnb.sleeping .zz .z2{animation-delay:1.2s}.pnb.sleeping .zz .z3{animation-delay:2.4s}
.pnb.sleeping .breath{animation:pnb-breath 6.5s ease-in-out infinite}
.pnb.sleeping .bob{animation:pnb-sleepbob 6.5s ease-in-out infinite}
.pnb.sleeping .ground{animation:pnb-ground 6.5s ease-in-out infinite}
.pnb.sleeping .glance,.pnb.sleeping .blink{animation:none}
.pnb.sleeping .face{transform:translateY(4px) rotate(-3deg)}
.pnb[data-emo="sleep"] .brl{transform:translate(1px,7px) rotate(6deg)}.pnb[data-emo="sleep"] .brr{transform:translate(-1px,7px) rotate(-6deg)}
@keyframes pnb-zz{0%{opacity:0;transform:translate(0,4px) scale(.6)}15%{opacity:1}75%{opacity:.9}100%{opacity:0;transform:translate(18px,-38px) scale(1.15)}}
@keyframes pnb-sleepbob{0%,100%{transform:translateY(0) scale(1.03,.97)}50%{transform:translateY(-2px) scale(.99,1.02)}}
.pnb[data-emo="startle"] .brl,.pnb[data-emo="startle"] .brr{transform:translateY(-11px) scale(1.1)}
.pnb.wake .act{animation:pnb-startle .7s cubic-bezier(.3,1.4,.5,1) both}
.pnb .wk-bang,.pnb .wk-o{opacity:0}
.pnb .wk-bang{transform-origin:176px 18px}.pnb .wk-o{transform-origin:100px 158px}
.pnb.wake .wk-bang{animation:pnb-bang 1.3s both}
.pnb.wake .wk-o{animation:pnb-wko 1.3s both}
@keyframes pnb-startle{0%{transform:scale(1.08,.9)}25%{transform:translateY(-24px) scale(.93,1.1)}55%{transform:translateY(0) scale(1.1,.9)}75%{transform:translateY(-4px)}100%{transform:none}}
@keyframes pnb-bang{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.2)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes pnb-wko{0%{opacity:0;transform:scale(.3)}10%{opacity:1;transform:scale(1.15)}18%,62%{opacity:1;transform:none}80%,100%{opacity:0;transform:scale(.5)}}
/* 3 Verlegen: Bäckchen glühen, Blick nach unten weg, kleines Winden */
.pnb .blush{opacity:0;transition:opacity .3s}
.pnb[data-emo="shy"] .blush{opacity:1}
.pnb[data-emo="shy"] .turn-eyes{transform:translate(-13px,10px)}
.pnb[data-emo="shy"] .turn-nose{transform:translate(-6px,3px)}
.pnb[data-emo="shy"] .turn-cheeks{transform:translate(-5px,1px)}
.pnb[data-emo="shy"] .glance{animation:none}
.pnb[data-emo="shy"] .brl{transform:translateY(4px) rotate(-12deg)}.pnb[data-emo="shy"] .brr{transform:translateY(4px) rotate(12deg)}
.pnb.shy .act{animation:pnb-squirm 1.8s ease-in-out both}
@keyframes pnb-squirm{0%,100%{transform:none}15%{transform:rotate(-4deg) scale(1.02,.98)}35%{transform:rotate(3deg) scale(.98,1.02)}55%{transform:rotate(-3deg)}75%{transform:rotate(1.5deg)}}
/* 4 Nicken / Kopfschütteln (Augen bewegen sich mehr als die Nase = Kopf dreht sich) */
.pnb[data-emo="pleased"] .brl,.pnb[data-emo="pleased"] .brr{transform:translateY(-5px)}
.pnb[data-emo="doubt"] .brl{transform:translateY(3px) rotate(11deg)}.pnb[data-emo="doubt"] .brr{transform:translateY(3px) rotate(-11deg)}
.pnb.nod .glance,.pnb.shake .glance{animation:none}
.pnb.nod .turn-eyes{animation:pnb-nod-e 1s ease-in-out both}
.pnb.nod .turn-nose{animation:pnb-nod-n 1s ease-in-out both}
.pnb.nod .turn-cheeks{animation:pnb-nod-c 1s ease-in-out both}
.pnb.nod .act{animation:pnb-nod-b 1s ease-in-out both}
@keyframes pnb-nod-e{0%,100%{transform:translate(0,0)}20%,60%{transform:translate(0,9px)}40%,80%{transform:translate(0,-2px)}}
@keyframes pnb-nod-n{0%,100%{transform:translate(0,0)}20%,60%{transform:translate(0,5px)}40%,80%{transform:translate(0,-1px)}}
@keyframes pnb-nod-c{0%,100%{transform:translate(0,0)}20%,60%{transform:translate(0,4px)}40%,80%{transform:translate(0,0)}}
@keyframes pnb-nod-b{0%,40%,80%,100%{transform:none}20%,60%{transform:translateY(2px) scale(1.02,.97)}}
.pnb.shake .turn-eyes{animation:pnb-sh-e .95s ease-in-out both}
.pnb.shake .turn-nose{animation:pnb-sh-n .95s ease-in-out both}
.pnb.shake .turn-cheeks{animation:pnb-sh-c .95s ease-in-out both}
.pnb.shake .act{animation:pnb-sh-b .95s ease-in-out both}
@keyframes pnb-sh-e{0%,100%{transform:translate(0,0)}15%{transform:translate(-13px,0)}35%{transform:translate(12px,0)}55%{transform:translate(-9px,0)}75%{transform:translate(5px,0)}}
@keyframes pnb-sh-n{0%,100%{transform:translate(0,0)}15%{transform:translate(-8px,0)}35%{transform:translate(7px,0)}55%{transform:translate(-5px,0)}75%{transform:translate(3px,0)}}
@keyframes pnb-sh-c{0%,100%{transform:translate(0,0)}15%{transform:translate(-6px,0)}35%{transform:translate(6px,0)}55%{transform:translate(-4px,0)}75%{transform:translate(2px,0)}}
@keyframes pnb-sh-b{0%,100%{transform:none}15%{transform:rotate(-3deg)}35%{transform:rotate(3deg)}55%{transform:rotate(-2deg)}75%{transform:rotate(1deg)}}
/* 5 Freudensprung: großer Sprung, kurzes Lachen, Konfetti */
.pnb .cf{opacity:0}
.pnb.jump .bob{animation:pnb-bigjump 1.2s cubic-bezier(.3,.7,.4,1) both}
.pnb.jump .ground{animation:pnb-gjump 1.2s ease-in-out both}
.pnb.jump .m-happy{animation:pnb-laugh 1.7s ease-out both}
@keyframes pnb-bigjump{0%{transform:none}14%{transform:translateY(0) scale(1.16,.84)}42%{transform:translateY(-64px) scale(.92,1.1) rotate(-5deg)}55%{transform:translateY(-58px) scale(.98,1.03) rotate(4deg)}78%{transform:translateY(0) scale(1.16,.84)}90%{transform:translateY(-6px) scale(.97,1.03)}100%{transform:none}}
@keyframes pnb-gjump{0%,14%,90%,100%{transform:scale(1);opacity:1}42%,55%{transform:scale(.55);opacity:.35}78%{transform:scale(1.12);opacity:1}}
@keyframes pnb-laugh{0%{opacity:0;transform:scale(.5,.3)}12%{opacity:1;transform:scale(1.08)}20%,80%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.6,.4)}}
@keyframes pnb-cf0{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-97.0px,-28.7px) rotate(120deg) scale(1)}100%{opacity:0;transform:translate(-126.1px,91.3px) rotate(240deg) scale(.9)}}
.pnb.jump .cf0{animation:pnb-cf0 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf1{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-69.8px,-40.0px) rotate(-120deg) scale(1)}100%{opacity:0;transform:translate(-90.7px,80.0px) rotate(-240deg) scale(.9)}}
.pnb.jump .cf1{animation:pnb-cf1 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf2{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-74.9px,-49.4px) rotate(160deg) scale(1)}100%{opacity:0;transform:translate(-97.4px,70.6px) rotate(320deg) scale(.9)}}
.pnb.jump .cf2{animation:pnb-cf2 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf3{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-60.3px,-72.2px) rotate(-120deg) scale(1)}100%{opacity:0;transform:translate(-78.4px,47.8px) rotate(-240deg) scale(.9)}}
.pnb.jump .cf3{animation:pnb-cf3 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf4{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-38.8px,-67.3px) rotate(-260deg) scale(1)}100%{opacity:0;transform:translate(-50.4px,52.7px) rotate(-520deg) scale(.9)}}
.pnb.jump .cf4{animation:pnb-cf4 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf5{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-17.9px,-70.8px) rotate(-260deg) scale(1)}100%{opacity:0;transform:translate(-23.3px,49.2px) rotate(-520deg) scale(.9)}}
.pnb.jump .cf5{animation:pnb-cf5 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf6{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(-19.6px,-109.1px) rotate(-120deg) scale(1)}100%{opacity:0;transform:translate(-25.5px,10.9px) rotate(-240deg) scale(.9)}}
.pnb.jump .cf6{animation:pnb-cf6 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf7{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(17.4px,-109.0px) rotate(-160deg) scale(1)}100%{opacity:0;transform:translate(22.6px,11.0px) rotate(-320deg) scale(.9)}}
.pnb.jump .cf7{animation:pnb-cf7 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf8{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(28.2px,-106.7px) rotate(-160deg) scale(1)}100%{opacity:0;transform:translate(36.7px,13.3px) rotate(-320deg) scale(.9)}}
.pnb.jump .cf8{animation:pnb-cf8 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf9{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(55.6px,-81.9px) rotate(260deg) scale(1)}100%{opacity:0;transform:translate(72.3px,38.1px) rotate(520deg) scale(.9)}}
.pnb.jump .cf9{animation:pnb-cf9 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf10{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(49.7px,-71.9px) rotate(160deg) scale(1)}100%{opacity:0;transform:translate(64.6px,48.1px) rotate(320deg) scale(.9)}}
.pnb.jump .cf10{animation:pnb-cf10 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf11{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(60.2px,-56.7px) rotate(120deg) scale(1)}100%{opacity:0;transform:translate(78.3px,63.3px) rotate(240deg) scale(.9)}}
.pnb.jump .cf11{animation:pnb-cf11 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf12{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(72.2px,-44.7px) rotate(210deg) scale(1)}100%{opacity:0;transform:translate(93.9px,75.3px) rotate(420deg) scale(.9)}}
.pnb.jump .cf12{animation:pnb-cf12 1.7s cubic-bezier(.2,.7,.4,1) both}
@keyframes pnb-cf13{0%,16%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}21%{opacity:1}48%{opacity:1;transform:translate(75.9px,-17.0px) rotate(-260deg) scale(1)}100%{opacity:0;transform:translate(98.7px,103.0px) rotate(-520deg) scale(.9)}}
.pnb.jump .cf13{animation:pnb-cf13 1.7s cubic-bezier(.2,.7,.4,1) both}
/* 6 Lesen: runde Lesebrille, Augen wandern Zeile für Zeile */
.pnb .rglass{opacity:0;transform-origin:100px 80px;transform:translateY(-14px) scale(.7);transition:opacity .25s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.pnb.reading .rglass{opacity:1;transform:none}
.pnb.reading .glance{animation:pnb-read 1.5s ease-in-out .3s infinite}
.pnb[data-emo="read"] .brl,.pnb[data-emo="read"] .brr{transform:translateY(5px)}
@keyframes pnb-read{0%{transform:translate(-6px,3px)}70%{transform:translate(6px,3px)}78%{transform:translate(6px,5px)}88%,100%{transform:translate(-6px,5px)}}
/* 7 Regenwolke: grau-blau, traurige Brauen, ein paar Tropfen */
.pnb .tint{opacity:0;mix-blend-mode:color;transition:opacity .6s}
.pnb.rain .tint{opacity:.85}
.pnb[data-emo="sad"] .brl{transform:translateY(6px) rotate(-20deg)}.pnb[data-emo="sad"] .brr{transform:translateY(6px) rotate(20deg)}
.pnb.rain .turn-eyes{transform:translate(0,7px)}
.pnb.rain .face{transform:translateY(4px)}
.pnb.rain .glance{animation:none}
.pnb.rain .bob{animation-duration:5s}
.pnb .dp{opacity:0}
.pnb.rain .dp{animation:pnb-drop 1.2s linear infinite}
.pnb.rain .dp1{animation-delay:-.5s}.pnb.rain .dp2{animation-delay:-.25s}.pnb.rain .dp3{animation-delay:-.85s}.pnb.rain .dp4{animation-delay:-.6s}
@keyframes pnb-drop{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(48px)}}
/* 8 Sonnenbrille: setzt sie auf, nickt cool, nimmt sie wieder ab */
.pnb .shades{opacity:0;transform:translateY(-70px)}
.pnb.cool .shades{animation:pnb-shades 4.6s both}
.pnb.cool .face{animation:pnb-coolnod 4.6s ease-in-out both}
.pnb.cool .glance{animation:none}
.pnb .sh-glint{opacity:0;transform:translateX(-16px)}
.pnb.cool .sh-glint{animation:pnb-glint 4.6s both}
@keyframes pnb-shades{0%{opacity:0;transform:translateY(-70px) rotate(-8deg)}12%{opacity:1;transform:translateY(3px) rotate(0)}16%,84%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-60px) rotate(6deg)}}
@keyframes pnb-coolnod{0%,22%,100%{transform:none}28%{transform:translateY(5px) rotate(-2deg)}34%{transform:translateY(-1px)}40%{transform:translateY(4px) rotate(1deg)}46%{transform:none}}
@keyframes pnb-glint{0%,28%{opacity:0;transform:translateX(-16px)}33%{opacity:1}44%,100%{opacity:0;transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){
  .pnb,.pnb *{animation:none!important;transition:none!important}
  .pnb svg{transform:none!important}
  .pnb .ar-hands{display:none}
  .pnb .turn-eyes,.pnb .turn-nose,.pnb .turn-mouth,.pnb .turn-cheeks{transform:none!important}
  .pnb .shades,.pnb .rglass,.pnb .cf,.pnb .dp,.pnb .sn-txt,.pnb .wk-bang,.pnb .sp{display:none}
  .pnb.sleeping .zz .z1{opacity:1}
}