.price-bg{
  position:absolute!important;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}

.shop .price-bg{
display: none;
}

.layer{
  position:absolute;
  inset:-10%;
}

/* Tiefenwirkung */
.layer--far  { opacity:.25; filter: blur(1px); }
.layer--mid  { opacity:.40; filter: blur(.6px); }
.layer--near { opacity:.55; filter: none; }

/* Tag-Box (zeigt nur PNG) */
.tag{
  position:absolute;
  width: 220px;     /* ggf. an deine PNGs anpassen */
  height: 140px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  /* optional: etwas „Punch“, falls PNGs transparent sind */
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.22));

  animation-name: floatFadeDown;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform, opacity;
}

/* Layer-Größenvarianten */
.layer--far  .tag{ width: 170px; height: 110px; }
.layer--mid  .tag{ width: 210px; height: 135px; }
.layer--near .tag{ width: 250px; height: 160px; }

/* PNG-Zuweisung (Pfad anpassen) */
.img1  { background-image:url("tag1.png"); }
.img2  { background-image:url("tag2.png"); }
.img3  { background-image:url("tag3.png"); }
.img4  { background-image:url("tag4.png"); }
.img5  { background-image:url("tag5.png"); }
.img6  { background-image:url("tag6.png"); }
.img7  { background-image:url("tag7.png"); }
.img8  { background-image:url("tag8.png"); }
.img9  { background-image:url("tag9.png"); }
.img10 { background-image:url("tag10.png"); }
.img11 { background-image:url("tag11.png"); }
.img12 { background-image:url("tag12.png"); }

/* Animation: von oben rein, nach unten raus */
@keyframes floatFadeDown {
  0%   { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(var(--r0)); }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) rotate(var(--r1)); }
}

/* Individuelle Pfade / Zeiten (Start oben, Ende unten) */
.t1  { --x0: 10vw; --y0: -25vh; --x1: 25vw; --y1: 125vh; --r0:-12deg; --r1:  8deg; animation-duration: 20s; animation-delay: -2s; }
.t2  { --x0: 70vw; --y0: -30vh; --x1: 55vw; --y1: 130vh; --r0: 10deg; --r1: -6deg; animation-duration: 23s; animation-delay: -11s; }
.t3  { --x0: 40vw; --y0: -22vh; --x1: 45vw; --y1: 128vh; --r0:  6deg; --r1: 14deg; animation-duration: 21s; animation-delay: -15s; }
.t4  { --x0: 85vw; --y0: -20vh; --x1: 92vw; --y1: 120vh; --r0: -6deg; --r1:  9deg; animation-duration: 19s; animation-delay: -7s; }

.t5  { --x0: 12vw; --y0: -35vh; --x1:  6vw; --y1: 135vh; --r0:  8deg; --r1:-12deg; animation-duration: 16s; animation-delay: -1s; }
.t6  { --x0: 56vw; --y0: -38vh; --x1: 66vw; --y1: 138vh; --r0: -8deg; --r1: 12deg; animation-duration: 17s; animation-delay: -9s; }
.t7  { --x0: 82vw; --y0: -32vh; --x1: 72vw; --y1: 132vh; --r0: 14deg; --r1: -6deg; animation-duration: 15s; animation-delay: -12s; }
.t8  { --x0: 33vw; --y0: -40vh; --x1: 40vw; --y1: 140vh; --r0:-12deg; --r1:  8deg; animation-duration: 18s; animation-delay: -6s; }

.t9  { --x0: 62vw; --y0: -45vh; --x1: 36vw; --y1: 150vh; --r0: 10deg; --r1:-14deg; animation-duration: 12s; animation-delay: -3s; }
.t10 { --x0: 18vw; --y0: -50vh; --x1: 32vw; --y1: 155vh; --r0:-10deg; --r1: 12deg; animation-duration: 13s; animation-delay: -8s; }
.t11 { --x0: 86vw; --y0: -48vh; --x1: 96vw; --y1: 152vh; --r0:  6deg; --r1: -8deg; animation-duration: 14s; animation-delay: -11s; }
.t12 { --x0: 45vw; --y0: -55vh; --x1: 55vw; --y1: 160vh; --r0: -4deg; --r1:  7deg; animation-duration: 11s; animation-delay: -5s; }

/* Optional: sanftes „Wobble“ zusätzlich (ohne JS) */
@keyframes wobble {
  0%,100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
  50%     { transform: translate(calc(var(--tx) + 8px), calc(var(--ty) - 6px)) rotate(calc(var(--rot) * -1)); }
}
/* Falls du Wobble willst: lieber separat lösen, sonst kollidiert transform. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tag{ animation:none; opacity:.25; }
}