/* Taste and See: Baustein "Tropfen Weiter"
   Ein goldener Tropfen, der sanft schwebt. Drei Funkelsterne kreisen um ihn. Im Tropfen leuchtet "Weiter".
   Einbinden: <link rel="stylesheet" href="/css/tropfen-weiter.css"> und das Markup aus /_bausteine/tropfen-weiter.html kopieren.
   Größe anpassen: --tw-size am Element setzen, z. B. style="--tw-size:200px". */
.tw{--tw-size:clamp(180px,26vw,240px);position:relative;display:block;width:var(--tw-size);aspect-ratio:1;text-decoration:none;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.tw:focus-visible{outline:2px solid #F5F0E6;outline-offset:6px;border-radius:50%}
.tw-float{position:absolute;inset:0;animation:tw-float 4.2s ease-in-out infinite}
.tw-drop{position:absolute;left:50%;top:50%;width:62%;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 10px 26px rgba(201,162,39,.35));transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.tw:hover .tw-drop,.tw:focus-visible .tw-drop{transform:translate(-50%,-50%) scale(1.06)}
.tw-word{position:absolute;left:0;right:0;top:57%;transform:translateY(-50%);text-align:center;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:calc(var(--tw-size) * .08);letter-spacing:.04em;color:#FFFBEA;text-shadow:0 0 6px rgba(255,248,220,.95),0 0 14px rgba(255,226,140,.85),0 0 28px rgba(255,200,80,.6);animation:tw-glow 3s ease-in-out infinite;pointer-events:none}
.tw-orbit{position:absolute;inset:0;transform:scaleY(.72);pointer-events:none}
.tw-spin{position:absolute;inset:0;animation:tw-spin var(--t) linear infinite;animation-delay:var(--d)}
.tw-star{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);transform:translateX(calc(var(--tw-size) * var(--r)))}
.tw-keep{width:100%;height:100%;animation:tw-unspin var(--t) linear infinite;animation-delay:var(--d)}
.tw-star svg{display:block;width:100%;height:100%;transform:scaleY(1.39);animation:tw-twinkle 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tw-spin{to{transform:rotate(360deg)}}
@keyframes tw-unspin{to{transform:rotate(-360deg)}}
@keyframes tw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tw-twinkle{0%,100%{opacity:1;filter:drop-shadow(0 0 4px rgba(255,236,170,.9))}50%{opacity:.55;filter:drop-shadow(0 0 1px rgba(255,236,170,.4))}}
@keyframes tw-glow{0%,100%{opacity:1}50%{opacity:.82}}
@media (prefers-reduced-motion:reduce){.tw-float,.tw-spin,.tw-keep,.tw-star svg,.tw-word{animation:none}}