/* Voxa – Produktmedien (07.11.2026), gehört zu voxa_media.js */
.vxk, .vxc, .vxkk { --vxm-acc: #9C79F4; --vxm-acc-rgb: 156,121,244; }
.vxs, .vxl { --vxm-acc: #A6F57A; --vxm-acc-rgb: 166,245,122; }

/* ---------- Vorschau-Leiste in Gruppen ---------- */
.vxm-on [class$="-gal-row"] { align-items: flex-start; gap: 16px; }
.vxm-g { flex: none; display: flex; flex-direction: column; gap: 5px; scroll-snap-align: start; }
.vxm-gt { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(233,235,242,.55); white-space: nowrap; padding-left: 2px; }
.vxm-gr { display: flex; gap: 8px; }
.vxm-on .vxm-g .vxm-gr > :last-child { margin-right: 0; }
.vxm-on .vxm-g:last-child { margin-right: 40px; }
.vxm-g + .vxm-g { position: relative; }
.vxm-g + .vxm-g::before { content: ""; position: absolute; left: -9px; top: 20px; bottom: 6px; width: 1px; background: rgba(255,255,255,.12); }

/* Video-Kachel in der Leiste: hochkant, gleiche Höhe wie die Bilder */
.vxm-vid { position: relative; flex: none; width: 66px; height: 92px; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(var(--vxm-acc-rgb), .55); background: #0B0A12; color: #fff; transition: transform .15s, box-shadow .15s; }
.vxm-vid img, .vxm-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vxm-vid video { opacity: 0; transition: opacity .2s; }
.vxm-vid.is-live video { opacity: 1; }
.vxm-vid:hover, .vxm-vid:focus-visible { transform: translateY(-2px); box-shadow: 0 0 18px rgba(var(--vxm-acc-rgb), .4); outline: none; }
.vxm-vid-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 4px 4px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.vxm-play { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.85); color: #fff; transition: opacity .2s; }
.vxm-play svg { width: 15px; height: 15px; margin-left: 2px; }
.vxm-vid.is-live .vxm-play { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vxm-vid .vxm-play { animation: vxm-pulse 2.4s ease-in-out infinite; }
  @keyframes vxm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--vxm-acc-rgb), .55); } 50% { box-shadow: 0 0 0 7px rgba(var(--vxm-acc-rgb), 0); } }
}
@media (max-width: 767.98px) { .vxm-vid { width: 60px; height: 84px; } }

/* ---------- Abschnitt „So sieht's in echt aus“ ---------- */
.vxm-real { margin-top: 34px; margin-bottom: 26px; color: var(--ink, #E9EBF2); }
.vxm-real-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.vxm-real .vxm-real-t { margin: 0; font-family: var(--vx-font-hand, "Caveat", cursive) !important; font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.3rem) !important; line-height: 1; color: var(--ink, #fff); text-transform: none; letter-spacing: 0; }
.vxm-real-sub { margin: 0; font-size: .92rem; color: rgba(233,235,242,.7); }
.vxm-real-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; align-items: stretch; }
.vxm-card, .vxm-photo { position: relative; flex: none; height: 360px; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.12); background: #0B0A12; color: #fff; text-align: left; transition: transform .18s, box-shadow .18s, border-color .18s; }
.vxm-card { width: 203px; }
.vxm-photo { width: 300px; cursor: zoom-in; }
.vxm-card img, .vxm-card video, .vxm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vxm-card video { opacity: 0; transition: opacity .25s; }
.vxm-card.is-live video { opacity: 1; }
.vxm-card:hover, .vxm-photo:hover, .vxm-card:focus-visible, .vxm-photo:focus-visible { transform: translateY(-3px); border-color: rgba(var(--vxm-acc-rgb), .7);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8), 0 0 22px rgba(var(--vxm-acc-rgb), .25); outline: none; }
.vxm-card .vxm-play { top: 50%; width: 54px; height: 54px; border-width: 2px; }
.vxm-card .vxm-play svg { width: 24px; height: 24px; }
.vxm-card.is-live .vxm-play { opacity: 0; }
.vxm-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 14px 12px; font-size: .9rem; font-weight: 700; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.vxm-card-snd { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); opacity: 0; transition: opacity .2s; }
.vxm-card-snd svg { width: 15px; height: 15px; }
.vxm-card-snd em { font-style: normal; }
.vxm-card.is-live .vxm-card-snd, .vxm-card:hover .vxm-card-snd { opacity: 1; }
.vxm-real-more { display: inline-block; margin-top: 4px; font-weight: 700; color: var(--vxm-acc); text-decoration: none; }
.vxm-real-more:hover { text-decoration: underline; }
@media (max-width: 767.98px) {
  .vxm-real { margin-top: 26px; }
  .vxm-card, .vxm-photo { height: 300px; }
  .vxm-card { width: 169px; }
  .vxm-photo { width: 240px; }
}

/* ---------- Video-Lightbox ---------- */
.vxm-lb { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 24px); padding: 0; border: 0; background: transparent; overflow: visible; color: #E9EBF2;
  width: min(92vw, 42vh); max-width: min(92vw, 42vh); }
.vxm-lb::backdrop { background: rgba(6,5,14,.88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vxm-lb figure { margin: 0; }
.vxm-lb-stage { aspect-ratio: 9 / 16; max-height: 76vh; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.vxm-lb video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vxm-lb figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .92rem; color: rgba(233,235,242,.85); }
.vxm-lb-n { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: rgba(233,235,242,.5); }
.vxm-lb-more { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--vxm-acc, #9C79F4); text-decoration: none; }
.vxm-lb-more:hover { text-decoration: underline; }
.vxm-lb-btn, .vxm-lb-x { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: rgba(16,14,28,.85); color: #fff; cursor: pointer; }
.vxm-lb-btn:hover, .vxm-lb-x:hover { border-color: var(--vxm-acc, #9C79F4); box-shadow: 0 0 14px rgba(var(--vxm-acc-rgb, 156,121,244), .45); }
.vxm-lb-btn { top: calc(50% - 40px); }
.vxm-lb-btn.prev { left: -60px; } .vxm-lb-btn.next { right: -60px; }
.vxm-lb-x { top: -18px; right: -60px; }
@media (max-width: 700px) {
  .vxm-lb { width: min(92vw, 40vh); max-width: min(92vw, 40vh); }
  .vxm-lb-btn.prev { left: 6px; } .vxm-lb-btn.next { right: 6px; } .vxm-lb-x { top: 6px; right: 6px; z-index: 2; }
}