/* Die Postboten – Hover-Animationen für Buttons Aktiv über , einstellbar im Studio unter Einstellungen → Design. */ .pb-btn{position:relative;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,background-color .22s ease,background-size .35s ease,color .22s ease;will-change:transform} .pb-btn:focus-visible{outline:3px solid #5f8b3e;outline-offset:3px} /* Anheben */ [data-btn-hover="anheben"] .pb-btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(20,20,20,.18)!important} [data-btn-hover="anheben"] .pb-btn:active{transform:translateY(-1px)} /* Vergrößern */ [data-btn-hover="vergroessern"] .pb-btn:hover{transform:scale(1.05)} [data-btn-hover="vergroessern"] .pb-btn:active{transform:scale(.98)} /* Leuchten (grüner Schein) */ [data-btn-hover="leuchten"] .pb-btn:hover{box-shadow:0 0 0 4px rgba(95,139,62,.28),0 8px 26px rgba(95,139,62,.35)!important} /* Füllen (Farbe läuft von links ein) */ [data-btn-hover="fuellen"] .pb-btn{background-image:linear-gradient(90deg,var(--pb-fill,#5f8b3e),var(--pb-fill,#5f8b3e))!important;background-repeat:no-repeat!important;background-size:0% 100%!important;background-position:left center!important} [data-btn-hover="fuellen"] .pb-btn--light{--pb-fill:#e9f0c4} [data-btn-hover="fuellen"] .pb-btn:hover{background-size:100% 100%!important} /* Glanz (Lichtstreifen fährt einmal durch) */ [data-btn-hover="glanz"] .pb-btn{overflow:hidden;isolation:isolate} [data-btn-hover="glanz"] .pb-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none} [data-btn-hover="glanz"] .pb-btn--light::after{background:linear-gradient(100deg,rgba(95,139,62,0) 0%,rgba(95,139,62,.22) 50%,rgba(95,139,62,0) 100%)} [data-btn-hover="glanz"] .pb-btn:hover::after{animation:pb-shine .7s ease} @keyframes pb-shine{to{left:120%}} /* Pfeil (Pfeil gleitet hinein) */ [data-btn-hover="pfeil"] .pb-btn::after{content:"→";display:inline-block;max-width:0;opacity:0;margin-left:0;overflow:hidden;transform:translateX(-6px);transition:max-width .25s ease,opacity .2s ease,margin .25s ease,transform .25s ease} [data-btn-hover="pfeil"] .pb-btn:hover::after{max-width:1.2em;opacity:1;margin-left:8px;transform:none} /* Pulsieren */ [data-btn-hover="pulsieren"] .pb-btn:hover{animation:pb-pulse .9s ease-in-out infinite} @keyframes pb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} @media (prefers-reduced-motion:reduce){.pb-btn,.pb-btn::after{transition:none!important;animation:none!important}[data-btn-hover] .pb-btn:hover{transform:none!important}}