/* ============================================================================
   box3d.css — echte 3D-Produktbox (Quader) für die Preset-Bundles
   Flächen: vorne (Titelbild), rechts (Titel), links, hinten, oben, unten.
   Texturen aus scripts/box-texturen.js (assets/shop/web/boxen/<name>-front|seite.webp).
   Drehung über --ry / --rx (js/box3d.js: beim Hover sanft nach rechts), Schweben über .is-schwebt.
   ========================================================================== */
.b3 { --w: 210px; --t: calc(var(--w) * .33); --h: calc(var(--w) * 1.5);
  --ry: -28deg; --rx: 6deg; --lift: 0px;
  position: relative; width: var(--w); height: var(--h); margin-inline: auto; perspective: 1600px; }
/* Zwei Ebenen: aussen schwebt (Animation), innen dreht (Übergang). So überschreibt
   das Schweben die Hover-Drehung nicht und sie gleitet weich statt zu springen. */
.b3__schwebe { position: absolute; inset: 0; transform-style: preserve-3d; }
.b3__szene { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); }   /* schnell an, weich aus */
.b3__f { position: absolute; left: 0; top: 0; backface-visibility: hidden; background-size: cover; background-position: center; }

/* Vorne und hinten: volle Breite */
.b3__vorne, .b3__hinten { width: var(--w); height: var(--h); }
.b3__vorne { transform: translateZ(calc(var(--t) / 2)); }
.b3__hinten { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); filter: brightness(.55) blur(1px); }
/* Seiten: Tiefe als Breite, links an der Mitte ausgerichtet */
.b3__rechts, .b3__links { width: var(--t); height: var(--h); left: calc((var(--w) - var(--t)) / 2); }
.b3__rechts { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.b3__links { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.7); }
/* Deckel und Boden */
.b3__oben, .b3__unten { width: var(--w); height: var(--t); top: calc((var(--h) - var(--t)) / 2); background: #d8d8d4; }
.b3__oben { transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(120deg, rgba(255,255,255,.85), rgba(225,225,220,.9)); }
.b3__unten { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #222; }

/* Licht: ruhiger, fester Schimmer; beim Hover läuft ein schmaler Lichtstreif einmal sauber
   von links nach rechts über die Vorderseite (Levin 06.10.: clean, hochwertig) */
.b3__vorne { overflow: hidden; }
.b3__vorne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06)); }
.b3__vorne::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.08) 65%, rgba(255,255,255,0) 100%);
  transform: translateX(-130%) skewX(-12deg); opacity: 0; }
.b3.is-hover .b3__vorne::before { animation: b3-sweep 1.1s cubic-bezier(.45, 0, .25, 1) .05s both; }
@keyframes b3-sweep {
  0% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(230%) skewX(-12deg); opacity: 0; }
}
.b3__rechts::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.08)); }
/* feine Kanten */
.b3__vorne, .b3__rechts { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* Bodenschatten: wird weicher und kleiner, wenn die Box abhebt */
.b3__schatten { position: absolute; left: 50%; bottom: calc(var(--h) * -.1); width: 120%; height: calc(var(--w) * .2);
  transform: translateX(-46%) scale(calc(1 - var(--lift) / -260px)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.32), rgba(0,0,0,0)); filter: blur(6px);
  opacity: calc(1 + var(--lift) / 120px); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; pointer-events: none; }

/* Leichtes Schweben im Ruhezustand */
.b3.is-schwebt .b3__schwebe { animation: b3-schweben 6.5s ease-in-out infinite; }
.b3.is-schwebt .b3__schatten { animation: b3-schatten 6.5s ease-in-out infinite; }
@keyframes b3-schweben {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-9px) rotateY(3deg); }
}
@keyframes b3-schatten { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

@media (prefers-reduced-motion: reduce) {
  .b3__szene, .b3__schatten { transition: none; }
  .b3.is-hover .b3__vorne::before { animation: none; }
  .b3.is-schwebt .b3__schwebe, .b3.is-schwebt .b3__schatten { animation: none; }
}