/* Produktkarussell-Styles aus player/style.css (nur pc-Regeln), Stand 2026-10-13. */
.pc-stage {
  position: absolute;
  inset: 0;
  /* Nicht hart am Rahmen abschneiden: Schlagschatten (pc-media) und
     Bodenschatten der Produkte reichen absichtlich darueber hinaus — vor
     allem nach unten. Seitlich bleibt ein schmaler Rand, damit beim
     Wechsel hinausgleitende Produkte nicht weit ausserhalb erscheinen. */
  overflow: visible;
  clip-path: inset(-30% -6% -60% -6%);
  border-radius: inherit;
  perspective: 1600px;
  --pc-duration: 1s;
  --pc-ease: var(--tv-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.pc-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 82%;
  transform: translate(-50%, -50%);
  transform-style: flat;
  isolation: isolate;
}
.pc-item {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Grundbreite eines Produkts in der Box. Mehrfach-Helden und
     Hintergrundplaetze bekommen ihre Breite von der Engine; alles andere
     lebt von diesem Wert. */
  width: 38%;
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  transform-style: flat;
  isolation: isolate;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  /* EINE Kurve und EINE Dauer fuer alles, was sich bewegt.
     Vorher liefen Lage, Breite, Deckkraft und Schaerfe mit drei
     verschiedenen Kurven und drei Dauern: das Bild war schon an seinem
     Platz, waehrend die Unschaerfe noch nachzog — und am Ende sprang der
     Rest hinterher. Die Kurve startet und endet in Ruhe (Steigung 0), also
     schnellt nichts los und nichts wird abgeschnitten. Dieselben Zahlen
     stehen in player/carousel.js (EASE). */
  transition:
    transform var(--pc-duration) var(--pc-ease),
    width var(--pc-duration) var(--pc-ease),
    opacity var(--pc-duration) var(--pc-ease),
    filter var(--pc-duration) var(--pc-ease);
}
.pc-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.35em;
}
.pc-media {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 2% 2% 0;
  position: relative;
}
.pc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1.2em 1.4em rgba(0, 0, 0, .42));
}
.pc-media.is-empty::after {
  content: '';
  width: 72%;
  height: 72%;
  border-radius: 0.6em;
  border: 1px dashed rgba(255, 255, 255, .18);
}
.pc-copy {
  align-self: end;
  margin-inline: auto;
  width: min(94%, 22em);
  border-radius: 0.7em;
  padding: 0.5em 0.6em 0.55em;
  background: linear-gradient(180deg, rgba(21, 21, 21, .82), rgba(8, 8, 8, .92));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
}
.pc-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5em;
}
.pc-name {
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.08;
  color: #f7f7f7;
}
.pc-price {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.66em;
  font-weight: 700;
  color: #f5f5f5;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  padding: 0.16em 0.45em;
}
.pc-sub {
  margin-top: 0.3em;
  color: #b6b6b6;
  font-size: 0.6em;
  line-height: 1.2;
}
.pc-item.is-compact .pc-copy { padding: 0.42em 0.5em; width: min(96%, 17em); }
.pc-item.is-compact .pc-name { font-size: 0.66em; }
.pc-item.is-compact .pc-price { font-size: 0.56em; }
.pc-item.is-micro .pc-name { font-size: 0.58em; }
.pc-item.is-micro .pc-sub { display: none; }
.pc-stage.pc-no-anim .pc-item,
.pc-stage.pc-no-anim .pc-item * { transition: none !important; }
.pc-item.pc-incoming { opacity: 1 !important; }
.pc-item.pc-sinking .pc-media {
  animation: pc-sink var(--pc-sink-ms, 1000ms) cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes pc-sink {
  0%   { opacity: 1; }
  45%  { opacity: 0.28; }
  55%  { opacity: 0.28; }
  100% { opacity: 1; }
}
.pc-safe-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.pc-safe-zone {
  position: absolute;
  border: 1px dashed rgba(200, 250, 54, .55);
  border-radius: 0.4em;
  background: rgba(200, 250, 54, .06);
}
.pc-item:not(.hide-copy) .pc-copy {
  animation: pcCopyIn 0.38s var(--tv-ease) both;
}
@keyframes pcCopyIn {
  from { opacity: 0; transform: translateY(0.35em); }
  to { opacity: 1; transform: none; }
}
.pc-stage.pc-reduced .pc-copy { animation: none !important; }
.pc-item.hide-copy .pc-copy { display: none !important; }
.pc-item.hide-name .pc-name { display: none !important; }
.pc-item.hide-price .pc-price { display: none !important; }
.pc-item.hide-sub .pc-sub { display: none !important; }
.pc-motion-float .pc-media img { animation: pcFloat 5.8s ease-in-out infinite alternate; }
.pc-motion-zerog .pc-media img { animation: pcZeroG 6.5s ease-in-out infinite alternate; }
.pc-motion-breathe .pc-media img { animation: pcBreathe 4.8s ease-in-out infinite alternate; }
.pc-motion-sway .pc-media img { animation: pcSway 5.7s ease-in-out infinite alternate; }
.pc-motion-drift .pc-media img { animation: pcDrift 5.4s ease-in-out infinite alternate; }
.pc-motion-lift .pc-media img { animation: pcLift 4.7s ease-in-out infinite alternate; }
.pc-motion-tilt .pc-media img { animation: pcTilt 5.2s ease-in-out infinite alternate; transform-origin: 50% 72%; }
.pc-motion-pendulum .pc-media img { animation: pcPendulum 4.9s ease-in-out infinite alternate; transform-origin: 50% 10%; }
.pc-motion-pulse .pc-media img { animation: pcPulse 4.2s ease-in-out infinite alternate; }
.pc-motion-spatialfloat .pc-media > img { animation: pcFloat 5.8s ease-in-out infinite alternate; }
.pc-media.has-spatial {
  --persp: 1400;
  display: block;
  height: 100%;
  align-self: stretch;
  padding: 0;
  perspective: calc(var(--persp) * 1px);
  perspective-origin: 50% 50%;
}
.pc-media img.spatial-layer {
  --zz: calc(var(--z, 0) * var(--z-gain, 2.6));
  /* Ueberabtastung. Ein Stapel mit preserve-3d und laufender Animation wird
     vom Browser EINMAL in Layoutgroesse in eine Textur gezeichnet; danach
     schiebt die Grafikkarte nur noch diese Textur. Das Karussell vergroessert
     das fuehrende Produkt aber um 1,13, und in der Vorschau kommt die Skalierung
     der Buehne dazu — die Textur wird also gedehnt, und das Produkt sieht
     matschig aus, waehrend ein gewoehnliches <img> bei jedem Zeichnen neu
     aufgeloest wird. Deshalb liegt jede Ebene etwas zu gross im Layout und
     wird per Transformation wieder verkleinert: gleiche Groesse am Schirm,
     aber feinere Textur. Der Wert deckt genau die Vergroesserung des
     fuehrenden Produkts (1,13) mit etwas Luft ab — mehr waere nur
     Bildspeicher, denn er geht quadratisch ein. */
  --ss: 1.25;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--ss));
  height: calc(100% * var(--ss));
  object-fit: contain;
  pointer-events: none;
  filter: none;
  transform: translate(-50%, -50%)
             translateZ(calc(var(--zz) * 1px))
             scale(calc((var(--persp) - var(--zz)) / var(--persp) / var(--ss)));
  backface-visibility: hidden;
}
.pc-motion-spatialfloat .spatial-media {
  animation: pcSpatialFloat 6.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--phase, 0) * -0.9s);
}
@keyframes pcSpatialFloat {
  from { transform: translateY(-1.4%) rotateY(-3.5deg) rotateX(1.2deg); }
  to   { transform: translateY(1.6%) rotateY(3.5deg) rotateX(-1.2deg); }
}
.pc-stage.pc-reduced .spatial-media { animation: none !important; }
.pc-item .pc-media img { animation-delay: calc(var(--phase, 0) * -0.7s); }
.pc-motion-lightsweep::after {
  content: '';
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 58%, transparent 72%);
  transform: translateX(-130%) skewX(-14deg);
  mix-blend-mode: screen;
  animation: pcLightSweep 4.6s ease-in-out infinite;
}
@keyframes pcFloat { from { transform: translateY(-2%) rotateZ(-.7deg); } to { transform: translateY(2.5%) rotateZ(.7deg); } }
@keyframes pcZeroG { 0% { transform: translate(-1%, -2%) rotate(-1.5deg); } 50% { transform: translate(1.2%, 2.6%) rotate(1deg); } 100% { transform: translate(-.5%, -1%) rotate(.2deg); } }
@keyframes pcBreathe { from { transform: scale(.985); } to { transform: scale(1.015); } }
@keyframes pcSway { from { transform: translateX(-1.5%) rotateZ(-1.1deg); } to { transform: translateX(1.5%) rotateZ(1.1deg); } }
@keyframes pcDrift { from { transform: translateX(-2.4%); } to { transform: translateX(2.4%); } }
@keyframes pcLift { from { transform: translateY(1.7%) scale(.99); } to { transform: translateY(-2.2%) scale(1.012); } }
@keyframes pcTilt { from { transform: rotateZ(-1.8deg) translateY(.5%); } to { transform: rotateZ(1.8deg) translateY(-.5%); } }
@keyframes pcPendulum { from { transform: rotateZ(-2.2deg); } to { transform: rotateZ(2.2deg); } }
@keyframes pcPulse { from { transform: scale(.975); } to { transform: scale(1.025); } }
@keyframes pcLightSweep {
  0% { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  17% { opacity: .75; }
  42% { transform: translateX(20%) skewX(-14deg); opacity: .35; }
  62% { opacity: 0; }
  100% { transform: translateX(130%) skewX(-14deg); opacity: 0; }
}
.pc-stage.pc-reduced .pc-media img,
.pc-stage.pc-reduced::after { animation: none !important; }