.mbpet{position:relative;display:inline-block;line-height:0;z-index:60} .mbpet--fixed{position:fixed;left:24px;bottom:24px} .mbpet__canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges} .mbpet__bubble{position:absolute;left:50%;bottom:calc(100% + 40px);transform:translateX(-50%);width:max-content;max-width:260px;padding:10px 12px;background:#FFFFFF;color:#14324B;border:3px solid #14324B;border-radius:2px;font:500 14px/1.45 system-ui,-apple-system, "Segoe UI",sans-serif;text-align:left;white-space:normal;box-shadow:0 4px 0 0 rgba(20,50,75,.15)} .mbpet__bubble::after,.mbpet__bubble::before{content: "";position:absolute;box-sizing:border-box;background:#FFFFFF;border:3px solid #14324B;border-radius:2px;box-shadow:0 3px 0 0 rgba(20,50,75,.15)} .mbpet__bubble::after{width:12px;height:12px;top:calc(100% + 12px);left:calc((var(--mbpet-zipfel,50%) + 50%) / 2 - 6px)} .mbpet__bubble::before{width:9px;height:9px;top:calc(100% + 28px);left:calc(var(--mbpet-zipfel,50%) - 5px)} .mbpet__bubble[hidden]{display:none} .mbpet__zzz{position:absolute;left:100%;bottom:74%;width:0;margin-left:-41px;margin-bottom:25px;color:#2F5BA4;font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace} .mbpet__z{position:absolute;bottom:0;left:0;opacity:0;animation:mbpet-zzz 3s ease-out infinite} .mbpet__z--1{font-size:24px;animation-delay:0s} .mbpet__z--2{font-size:32px;animation-delay:1s} .mbpet__z--3{font-size:42px;animation-delay:2s} .mbpet__zzz[hidden]{display:none} @keyframes mbpet-zzz{0%{opacity:0;transform:translate(0,4px) scale(.7)} 15%{opacity:1;transform:translate(1px,-4px) scale(1)} 70%{opacity:.85;transform:translate(12px,-34px) scale(1)} 100%{opacity:0;transform:translate(20px,-54px) scale(1.05)}} .mbpet-hervorgehoben{outline:3px solid #6699FF;outline-offset:4px;transition:outline-color .2s} @media (prefers-reduced-motion:reduce){.mbpet__z{animation:none;opacity:.8} .mbpet__z--2{transform:translate(11px,-30px)} .mbpet__z--3{transform:translate(20px,-52px)} .mbpet-hervorgehoben{transition:none}}