/* WG Bausteine: Widget „vorteile“. Übernommen aus startseite-2026/v3/parts/vorteile.html (style-Block unverändert). */
/* ================================================================
   VORTEILE · Physik-Pillen im Milchglas-Kasten
   Alle Selektoren beginnen mit #vorteile. Setzt die Shell voraus.
   Ohne JavaScript oder bei reduzierter Bewegung liegen die Pillen
   als ruhige, leicht gedrehte Anordnung im Kasten.
   ================================================================ */
#vorteile .vt-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}

#vorteile .vt-box{position:relative;margin-top:56px;min-height:520px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:0}
#vorteile .vt-grid{position:absolute;inset:0;z-index:0;pointer-events:none}
#vorteile .vt-glow{left:50%;bottom:-38%;width:78%;height:70%;transform:translateX(-50%);opacity:.4;z-index:0}
#vorteile .vt-floor{position:absolute;left:0;right:0;bottom:0;height:1px;z-index:0;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent);pointer-events:none}

/* Schütteln-Pille oben rechts (ergänzt die Shell-Klasse v3-pill um Button-Verhalten) */
#vorteile .vt-shake{position:absolute;top:18px;right:18px;z-index:3;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;color:var(--ink);transition:background-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
#vorteile .vt-shake[hidden]{display:none}
#vorteile .vt-shake:hover{background:rgba(255,255,255,.95);box-shadow:0 8px 22px rgba(20,20,20,.08)}
#vorteile .vt-shake:active{transform:scale(.96)}
/* Seitenweite Button-Stile (live .elementor-kit-11 button:hover/:focus) nehmen sonst Rahmen und Pillenform weg */
#vorteile .vt-shake:is(:hover,:focus){border-style:solid;border-radius:999px}
#vorteile .vt-shake:focus-visible{outline:2px solid var(--lime-text);outline-offset:3px}
#vorteile .vt-shake.is-shaking{animation:vt-wiggle .5s var(--ease)}
@keyframes vt-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}45%{transform:rotate(5deg)}70%{transform:rotate(-3deg)}}

/* Stapel: ruhige Grundanordnung ohne Physik */
#vorteile .vt-pile{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:flex-end;gap:6px 8px;margin:0;padding:88px 32px 26px}
#vorteile .vt-item{flex:0 0 auto;margin:-3px 0;-webkit-user-select:none;user-select:none}
#vorteile .vt-item:nth-child(8n+1){transform:rotate(-6deg)}
#vorteile .vt-item:nth-child(8n+2){transform:rotate(4deg)}
#vorteile .vt-item:nth-child(8n+3){transform:rotate(-2deg)}
#vorteile .vt-item:nth-child(8n+4){transform:rotate(7deg)}
#vorteile .vt-item:nth-child(8n+5){transform:rotate(-4deg)}
#vorteile .vt-item:nth-child(8n+6){transform:rotate(3deg)}
#vorteile .vt-item:nth-child(8n+7){transform:rotate(-8deg)}
#vorteile .vt-item:nth-child(8n){transform:rotate(5deg)}

/* Pillen */
#vorteile .vt-p{--vt-fs:clamp(15px,calc(1.25vw + 4px),18px);display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 16px);padding:.98em 1.6em;border-radius:999px;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:var(--vt-fs);line-height:1.1;letter-spacing:-.01em;text-align:center;white-space:nowrap}
#vorteile .vt-p--lime{background:linear-gradient(96deg,#D8F75C -20%,#C2F21C 55%,#D8F75C 125%);color:var(--lime-ink);box-shadow:inset 0 0 0 1px rgba(20,23,12,.06),inset 0 -3px 0 rgba(20,23,12,.07),0 10px 24px rgba(140,180,0,.22)}
#vorteile .vt-p--dark{background:linear-gradient(180deg,#2B2F28 0%,var(--graphite-2) 45%,var(--graphite) 100%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(20,20,20,.18)}
#vorteile .vt-p--light{background:linear-gradient(180deg,#FFFFFF 0%,#F2F3ED 100%);color:var(--graphite);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 -3px 0 rgba(20,20,20,.03),0 10px 24px rgba(20,20,20,.08)}

/* Kreise */
#vorteile .vt-c{width:var(--d);height:var(--d);border-radius:50%}
#vorteile .vt-c--lime{background:radial-gradient(120% 120% at 30% 24%,#EEFCA8 0%,#D2F74A 30%,#C2F21C 60%,#A9D614 100%);box-shadow:inset 0 -4px 10px rgba(20,23,12,.08),0 10px 24px rgba(140,180,0,.22)}
#vorteile .vt-c--dark{background:radial-gradient(120% 120% at 30% 24%,#40463B 0%,var(--graphite-2) 45%,var(--graphite) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(20,20,20,.18)}
#vorteile .vt-c--light{background:radial-gradient(120% 120% at 30% 24%,#FFFFFF 0%,#F7F8F3 50%,#E9EBE3 100%);box-shadow:inset 0 0 0 1px var(--line-2),0 10px 24px rgba(20,20,20,.08)}

/* Physik aktiv (per JavaScript gesetzt) */
#vorteile .vt-box.is-armed{height:520px;min-height:0}
#vorteile .vt-box.is-armed .vt-pile{position:absolute;inset:0;display:block;padding:0}
#vorteile .vt-box.is-armed .vt-item{position:absolute;left:0;top:0;margin:0;transform:translate3d(-9999px,0,0);visibility:hidden;will-change:transform;backface-visibility:hidden}
#vorteile .vt-box.is-armed .vt-p{max-width:calc(100% - 24px)}
#vorteile .vt-box.is-armed .vt-item.is-on{visibility:visible}
#vorteile .vt-box.is-drag .vt-item{cursor:grab}
#vorteile .vt-box.is-grabbing,
#vorteile .vt-box.is-grabbing .vt-item{cursor:grabbing}

/* Handy */
@media (max-width:639px){
  #vorteile .vt-box{margin-top:40px;min-height:500px}
  #vorteile .vt-box.is-armed{height:500px}
  #vorteile .vt-pile{padding:76px 14px 20px;gap:4px 6px}
  #vorteile .vt-p{--vt-fs:14px;padding:.78em 1.1em;white-space:normal;max-width:calc(100% - 24px)}
  #vorteile .vt-c--wide{display:none}
  #vorteile .vt-shake{top:14px;right:14px}
}
@media (prefers-reduced-motion:reduce){
  #vorteile .vt-shake{display:none}
}