/*
  Die 3D-Automaten und ihre Fächer.

  Die Automaten sind in scripts/automaten-3d/ (Website-Ordner) mit Three.js
  nachgebaut und als Bild gerendert. automaten-3d.js liefert die Lage jeder
  Fachreihe im Bild in Prozent; app.js setzt sie als left/top/width/height
  und --schiene (Höhe der Preisschiene innerhalb der Reihe) an die Reihe.

  Diese Datei liegt zuletzt und gilt nur für .vending-machine--3d. Die alten
  Regeln für die Referenzfotos bleiben für den Notfall unberührt.
*/

.vending-machine--3d {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Der Sanden ist breiter als hoch gebaut; er bekommt mehr Breite, damit
   seine Fächer so groß erscheinen wie die der Sielaff-Geräte. */
.vending-machine--3d.vending-machine--sanden { width: min(100%, 640px); }

.vending-machine--3d .vm-reference-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Bodenschatten unter dem Gerät */
.vending-machine--3d::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -1.2%;
  height: 2.4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(10 16 30 / 28%), transparent);
  filter: blur(6px);
}

/* ── Reihen ─────────────────────────────────────────────────────────── */

.vending-machine--3d .vm-row {
  position: absolute;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}

/* Reihenkennung links auf dem Fensterrand, auf Höhe der Preisschiene */
.vending-machine--3d .vm-row__label {
  position: absolute;
  left: -0.25em;
  top: var(--schiene, 90%);
  z-index: 7;
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  transform: translate(-100%, -50%);
  border-radius: 999px;
  background: #fff;
  color: #10141b;
  font: 600 clamp(7px, 1.9vw, 10px) / 1 var(--font-ui, 'Inter', sans-serif);
  box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
}

.vending-machine--3d .vm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--half-columns), minmax(0, 1fr));
  gap: 0;
  pointer-events: none;
}

/* ── Fächer ─────────────────────────────────────────────────────────── */

.vending-machine--3d .vm-slot {
  position: relative;
  grid-column: span var(--lane-span);
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: clamp(3px, 0.9vw, 7px);
  background: transparent;
  color: inherit;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.18s, box-shadow 0.18s;
}

.vending-machine--3d .vm-slot:hover,
.vending-machine--3d .vm-slot:focus-visible {
  /* ohne eigene Ebene: sonst spränge das Produkt vor die Spirale (.vm-vorn) */
  z-index: auto;
  background: rgb(77 124 255 / 16%);
  box-shadow: inset 0 0 0 1.5px rgb(138 165 255 / 90%);
  outline: none;
  transform: none;
}

.vending-machine--3d .vm-slot.is-drop-target {
  background: rgb(77 124 255 / 24%);
  box-shadow: inset 0 0 0 2px #8aa5ff;
}

.vending-machine--3d .vm-slot.is-shift-selected {
  z-index: auto;
  background: rgb(77 124 255 / 26%);
  box-shadow: inset 0 0 0 2px #8aa5ff, 0 0 18px rgb(77 124 255 / 45%);
}

.vending-machine--3d .vm-slot.is-filled { background: transparent; }

/* Spirale je Fach aus dem Bildblatt (app.js spiralHTML): hinten unter dem
   Produkt, die vorderste Windung darüber. Die Preisschiene (.vm-vorn, 5)
   liegt später im Dokument und damit vor der Windung. */
.vending-machine--3d .vm-spirale {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  pointer-events: none;
}
.vending-machine--3d .vm-spirale--vorn { z-index: 5; }

/* Spirale und Schieber stehen im Bild, die gezeichneten Ersatzformen nicht */
.vending-machine--3d .vm-slot__coil,
.vending-machine--3d .vm-slot__pusher { display: none; }

/* Fachnummer auf der Preisschiene, lesbar groß. Mit .vm-row davor, weil
   styles.css für die Sielaff-Reihen A bis D eine feste Höhe setzt. */
.vending-machine--3d .vm-row .vm-slot__id {
  position: absolute;
  /* mittig unter der Spirale, auch bei 1,5× und Doppelspiralen */
  left: 50%;
  top: var(--schiene, 90%);
  right: auto;
  bottom: auto;
  z-index: 7;
  display: block;
  min-width: 2.3em;
  padding: 0.22em 0.3em;
  transform: translate(-50%, -50%);
  border-radius: 0.35em;
  background: #f3f5f8;
  color: #10141b;
  box-shadow: 0 1px 1.5px rgb(0 0 0 / 45%);
  font: 600 clamp(5.5px, 30cqw, 10px) / 1 var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
}

.vending-machine--3d .vm-slot:hover .vm-slot__id,
.vending-machine--3d .vm-slot:focus-visible .vm-slot__id,
.vending-machine--3d .vm-slot.is-shift-selected .vm-slot__id {
  background: var(--color-cobalt, #2348db);
  color: #fff;
}

/* Empfehlung und Breite stehen im Dialog; im Bild nur beim Zeigen */
.vending-machine--3d .vm-slot__rec,
.vending-machine--3d .vm-slot__width { display: none; }

/*
  Produkte stehen unten in der Spirale auf dem Tablar. --boden kommt aus
  automaten-3d.js (Oberkante Tablar in der vordersten Windung, Prozent der
  Reihe). Das Bild ist knapp ausgeschnitten und unten ausgerichtet, die
  vorderste Windung und die Preisschiene liegen als eigene Ebene (.vm-vorn)
  davor, so steht das Produkt wirklich in der Spirale.
*/
.vending-machine--3d .vm-slot .product-image--mini,
.vending-machine--3d .vm-slot .product-sprite--mini,
.vending-machine--3d .vm-slot .catalog-pack--mini,
.vending-machine--3d .vm-slot .pack--mini {
  /* --produkt-b: Anteil der Fachbreite, den das Produkt braucht (app.js);
     --produkt-h: echte Höhe bei Getränken, in Prozent der Reihe */
  --h: min(calc(var(--boden, 86) * 1% - 5%), var(--produkt-h, 100%));
  position: absolute;
  inset: auto;
  --w: var(--produkt-w, calc(90% * var(--produkt-b, 1)));
  left: calc(50% - var(--w) / 2);
  top: calc(var(--boden, 86) * 1% - var(--h));
  z-index: 4;
  width: var(--w);
  height: var(--h);
  padding: 0;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 40%));
}

/* Liegende Produkte werden hochkant gestellt (stovari-upright.js). Die Breite
   des Elements wird nach der Drehung zur Höhe, die Mitte liegt deshalb eine
   halbe Höhe über dem Boden. */
.vending-machine--3d .vm-slot .product-sprite.ist-quer,
.vending-machine--3d .vm-slot .product-sprite.ist-liegend {
  inset: auto;
  left: 50%;
  /* --fach-hb: Höhe des Fachs durch seine Breite, aus app.js */
  top: calc(var(--boden, 86) * 1% - (var(--boden, 86) - 5) * 0.5%);
  width: calc((var(--boden, 86) - 5) * 1% * var(--fach-hb, 1));
  height: calc(90% * var(--produkt-b, 1) / var(--fach-hb, 1));
  transform: translate(-50%, -50%) rotate(-90deg);
}
/* Im 3×-Breitfach hingelegt, im Uhrzeigersinn */
.vending-machine--3d .vm-slot .product-sprite.ist-liegend { transform: translate(-50%, -50%) rotate(90deg); }

/* Vorderste Windung und Preisschiene vor den Produkten */
.vending-machine--3d .vm-vorn {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* „Bearbeiten“ beim Zeigen auf ein gefülltes Fach */
.vending-machine--3d .vm-slot.is-filled:hover::after {
  content: "Ändern";
  position: absolute;
  left: 50%;
  top: 6%;
  inset-inline: auto;
  bottom: auto;
  z-index: 8;
  padding: 0.3em 0.55em;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgb(10 14 22 / 82%);
  color: #fff;
  font: 600 clamp(6px, 22cqw, 9px) / 1 var(--font-ui, 'Inter', sans-serif);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .vending-machine--3d .vm-slot { transition: none; }
}