/*
 * ============================================================
 * SVARTLIND NEXTGEN · VAKTEN DEMO RENDERERS
 * Quelle:
 *   /home/www/vakten/ui/css/vakten.css
 *
 * Automatisch extrahierter REFRIGERATOR_STANDARD-Stand.
 * Keine komplette VAKTEN-App-CSS.
 * ============================================================
 */

/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   parametrischer Kühlschrank
   ========================================================== */


/* Door-Renderer nur bei Tür-/Tor-Familie sichtbar */

.live-fridge-scene {
  display: none;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-door-scene {
  display: none;
}


/* Kühlschrank aktivieren */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-scene {
  display: block;

  position: relative;

  width: min(78%, 430px);
  aspect-ratio: 0.72 / 1;

  margin: 0 auto;

  perspective: 1200px;
  perspective-origin: 50% 42%;

  transform-style: preserve-3d;
}


/* Bodenschatten */

.live-fridge-shadow {
  position: absolute;

  left: 13%;
  right: 13%;
  bottom: -1%;

  height: 9%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.52),
      rgba(0, 0, 0, 0.12) 54%,
      transparent 75%
    );

  filter: blur(8px);

  transform:
    rotateX(68deg);
}


/* Gehäuse */

.live-fridge-body {
  position: absolute;
  inset: 2% 10% 5%;

  transform-style: preserve-3d;
}

.live-fridge-cabinet {
  position: absolute;
  inset: 0;

  transform-style: preserve-3d;

  border-radius: 9px;

  background:
    linear-gradient(
      100deg,
      #b9bab8 0%,
      #eeeeeb 12%,
      #f7f6f2 45%,
      #dadbd8 80%,
      #a9aba9 100%
    );

  border:
    1px solid
    rgba(77, 81, 79, 0.72);

  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}


/* Innenraum */

.live-fridge-interior {
  position: absolute;

  left: 7%;
  right: 7%;
  top: 5%;
  bottom: 5%;

  overflow: hidden;

  border-radius: 5px;

  background:
    linear-gradient(
      180deg,
      #d8dedc 0%,
      #afb8b5 48%,
      #929b98 100%
    );

  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.32);

  transform:
    translateZ(-5px);
}


/* Innenlicht */

.live-fridge-light {
  position: absolute;

  top: 2.5%;
  left: 50%;

  width: 34%;
  height: 2.3%;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    rgba(210, 217, 214, 0.45);

  transition:
    background 0.22s ease,
    box-shadow 0.22s ease;
}


/* eigentlicher Lichtschein */

.live-fridge-interior-glow {
  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      ellipse at 50% 5%,
      rgba(244, 255, 249, 0.82) 0%,
      rgba(186, 255, 220, 0.25) 28%,
      rgba(82, 255, 177, 0.055) 58%,
      transparent 78%
    );

  transition:
    opacity 0.25s ease;
}


/* Licht AN, sobald Tür > 3° */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="ON"]
.live-fridge-light {
  background:
    rgba(245, 255, 250, 0.98);

  box-shadow:
    0 0 7px rgba(245, 255, 250, 0.92),
    0 0 20px rgba(132, 255, 201, 0.48),
    0 7px 30px rgba(82, 255, 177, 0.22);
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="ON"]
.live-fridge-interior-glow {
  opacity: 1;
}


/* Regalböden */

.live-fridge-shelf {
  position: absolute;

  left: 8%;
  right: 8%;

  height: 1.7%;

  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      rgba(245, 250, 248, 0.90),
      rgba(145, 158, 154, 0.88)
    );

  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.20);
}

.live-fridge-shelf-a {
  top: 27%;
}

.live-fridge-shelf-b {
  top: 47%;
}

.live-fridge-shelf-c {
  top: 67%;
}


/* Gemüse-/untere Schublade */

.live-fridge-drawer {
  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 5%;

  height: 17%;

  border:
    1px solid rgba(103, 117, 113, 0.54);

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(226, 237, 233, 0.58),
      rgba(149, 164, 159, 0.52)
    );
}


/* ==========================================================
   Kühlschranktür
   ========================================================== */

.live-fridge-door {
  position: absolute;

  left: 4%;
  right: 4%;
  top: 3%;
  bottom: 3%;

  transform-style: preserve-3d;

  transform-origin: left center;

  transform:
    rotateY(
      calc(var(--door-angle) * -1)
    );

  transition:
    transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* Außenseite */

.live-fridge-door-face,
.live-fridge-door-inner {
  position: absolute;
  inset: 0;

  border-radius: 7px;

  backface-visibility: hidden;
}

.live-fridge-door-face {
  z-index: 2;

  background:
    linear-gradient(
      100deg,
      #aeb0ae 0%,
      #f0f0ed 14%,
      #faf9f5 47%,
      #dcddda 79%,
      #a3a5a3 100%
    );

  border:
    1px solid rgba(68, 72, 70, 0.68);

  box-shadow:
    5px 8px 18px rgba(0, 0, 0, 0.27),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}


/* kleine neutrale Markenlinie – kein Herstellerlogo */

.live-fridge-brand-line {
  position: absolute;

  top: 5%;
  left: 50%;

  width: 19%;
  height: 1.3%;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    rgba(92, 96, 94, 0.38);
}


/* Griff */

.live-fridge-handle {
  position: absolute;

  right: 4.5%;
  top: 23%;

  width: 3.7%;
  height: 49%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #5d605f,
      #c6c8c5 35%,
      #e2e3df 56%,
      #717472
    );

  box-shadow:
    1px 2px 5px rgba(0, 0, 0, 0.28);
}


/* Innenseite */

.live-fridge-door-inner {
  transform:
    rotateY(180deg)
    translateZ(2px);

  background:
    linear-gradient(
      100deg,
      #b8c1be,
      #e9eeec 30%,
      #c6cfcc 100%
    );

  border:
    1px solid rgba(75, 88, 84, 0.54);
}


/* Türablagen */

.live-fridge-door-rack {
  position: absolute;

  left: 10%;
  right: 10%;

  height: 13%;

  border:
    1px solid rgba(102, 119, 114, 0.48);

  border-radius: 4px;

  background:
    rgba(219, 231, 227, 0.40);
}

.live-fridge-door-rack-a {
  top: 22%;
}

.live-fridge-door-rack-b {
  top: 43%;
}

.live-fridge-door-rack-c {
  top: 65%;
}


/* kompakter auf kleineren Screens */

@media (max-width: 900px) {
  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    width: min(72%, 360px);
  }
}



/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Detailpass · Kühl-Gefrier-Kombination
   ========================================================== */


/* ----------------------------------------------------------
   Das Innenleben muss VOR der Gehäuserückwand liegen.
   Der alte translateZ(-5px) versteckte es optisch.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-cabinet {
  background:
    linear-gradient(
      100deg,
      #a6aaa8 0%,
      #d9dcda 5%,
      #eef0ed 9%,
      #eef0ed 91%,
      #bec2bf 96%,
      #989d9a 100%
    );
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  left: 9%;
  right: 9%;

  top: 5%;
  bottom: 35%;

  z-index: 2;

  transform:
    translateZ(2px);

  border:
    5px solid
    rgba(226, 231, 228, 0.96);

  border-radius: 4px;

  background:
    linear-gradient(
      110deg,
      #c4cdca 0%,
      #edf2ef 18%,
      #f6f8f6 49%,
      #d9e0dd 78%,
      #aeb9b5 100%
    );

  box-shadow:
    inset 0 0 28px rgba(67, 78, 75, 0.30),
    inset 0 -16px 28px rgba(71, 84, 80, 0.12);
}


/* leichte technische Rückwand */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior::before {
  content: "";

  position: absolute;
  inset: 3% 4% 4%;

  border-radius: 3px;

  background:
    linear-gradient(
      90deg,
      rgba(93, 109, 104, 0.055),
      transparent 14%,
      transparent 86%,
      rgba(93, 109, 104, 0.055)
    );

  pointer-events: none;
}


/* ----------------------------------------------------------
   Kühlteil-Regalböden
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-shelf {
  left: 7%;
  right: 7%;

  height: 1.5%;

  background:
    linear-gradient(
      180deg,
      rgba(249, 253, 251, 0.96),
      rgba(155, 168, 164, 0.90)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.82);

  box-shadow:
    0 2px 4px rgba(57, 68, 65, 0.22);
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-shelf-a {
  top: 23%;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-shelf-b {
  top: 43%;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-shelf-c {
  top: 63%;
}


/* ----------------------------------------------------------
   Flaschenrost
   ---------------------------------------------------------- */

.live-fridge-bottle-rack {
  position: absolute;

  left: 12%;
  right: 12%;
  top: 30%;

  height: 7%;

  display: flex;
  justify-content: space-between;

  opacity: 0.82;
}

.live-fridge-bottle-rack span {
  display: block;

  width: 18%;
  height: 100%;

  border-top:
    2px solid rgba(118, 128, 125, 0.76);

  border-bottom:
    2px solid rgba(118, 128, 125, 0.64);

  transform: skewX(-18deg);
}


/* ----------------------------------------------------------
   Abstraktes Kühlgut
   Nur räumliche Lesbarkeit, keine Produktbehauptung.
   ---------------------------------------------------------- */

.live-fridge-food {
  position: absolute;

  border-radius:
    45% 48% 42% 52%;

  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.18);

  opacity: 0.78;
}

.live-fridge-food-a {
  left: 18%;
  top: 50%;

  width: 18%;
  height: 7%;

  background:
    linear-gradient(
      135deg,
      #d4a16f,
      #9b6949
    );
}

.live-fridge-food-b {
  left: 41%;
  top: 51%;

  width: 15%;
  height: 6%;

  background:
    linear-gradient(
      135deg,
      #abc982,
      #6c9156
    );
}

.live-fridge-food-c {
  right: 17%;
  top: 50%;

  width: 16%;
  height: 7%;

  background:
    linear-gradient(
      135deg,
      #d18f78,
      #9e5c52
    );
}


/* ----------------------------------------------------------
   Gemüseschublade
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-drawer {
  left: 7%;
  right: 7%;

  bottom: 4%;

  height: 20%;

  overflow: hidden;

  border:
    1px solid
    rgba(107, 122, 117, 0.58);

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(230, 240, 236, 0.62),
      rgba(156, 173, 167, 0.48)
    );

  box-shadow:
    inset 0 4px 7px rgba(255, 255, 255, 0.22);
}

.live-fridge-drawer-handle {
  position: absolute;

  left: 26%;
  right: 26%;
  top: 8%;

  height: 5%;

  border-radius: 999px;

  background:
    rgba(99, 112, 108, 0.42);
}


/* ==========================================================
   GEFRIERTEIL
   bleibt geschlossen
   ========================================================== */

.live-fridge-freezer-front {
  position: absolute;

  z-index: 3;

  left: 4%;
  right: 4%;

  top: 69%;
  bottom: 3%;

  border-radius: 0 0 7px 7px;

  background:
    linear-gradient(
      100deg,
      #a8aaa8 0%,
      #e7e8e5 10%,
      #f2f2ef 48%,
      #d2d4d1 82%,
      #9ea19f 100%
    );

  border:
    1px solid
    rgba(73, 77, 75, 0.60);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 5px 10px rgba(0, 0, 0, 0.12);
}

.live-fridge-freezer-line {
  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 4px;

  background:
    linear-gradient(
      180deg,
      #505654,
      #bfc2bf 55%,
      #656a68
    );
}

.live-fridge-freezer-handle {
  position: absolute;

  left: 4%;
  top: 13%;

  width: 3%;
  height: 68%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #5f6361,
      #c8cbc7 42%,
      #7b7f7c
    );

  opacity: 0.72;
}


/* ==========================================================
   NUR DIE OBERE KÜHLSCHRANKTÜR BEWEGT SICH
   ========================================================== */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door {
  left: 4%;
  right: 4%;

  top: 3%;
  bottom: 31%;

  z-index: 6;

  transform-origin:
    left center;
}


/* Griff nur am Kühlteil */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-handle {
  right: 4.2%;
  top: 20%;

  width: 3.2%;
  height: 56%;
}


/* Türablagen etwas kompakter */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-rack-a {
  top: 18%;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-rack-b {
  top: 42%;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-rack-c {
  top: 67%;
}


/* ----------------------------------------------------------
   Lichtwirkung kräftiger und klarer
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="ON"]
.live-fridge-interior {
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.36),
    inset 0 0 52px rgba(143, 255, 207, 0.12),
    0 0 18px rgba(82, 255, 177, 0.055);
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="OFF"]
.live-fridge-interior {
  filter:
    brightness(0.70)
    saturate(0.70);
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Edelstahl-/Siemens-inspirierter Materialpass
   ========================================================== */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"] {
  --fridge-steel-dark: #777d7e;
  --fridge-steel-mid: #aeb4b5;
  --fridge-steel-light: #d9ddde;
  --fridge-steel-highlight: #eef1f1;
}


/* Gehäuse außen */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-cabinet {
  background:
    linear-gradient(
      100deg,
      #6f7576 0%,
      #8d9394 4%,
      #bcc1c2 10%,
      #d8dcdd 24%,
      #c2c7c8 48%,
      #a6acad 70%,
      #868c8d 91%,
      #6c7273 100%
    );

  border:
    1px solid rgba(55, 61, 62, 0.82);

  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.38),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    inset -1px 0 0 rgba(0, 0, 0, 0.16);
}


/* obere Kühlschranktür außen */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-face {
  background:
    linear-gradient(
      97deg,
      #777d7e 0%,
      #959b9c 5%,
      #c5cacb 13%,
      #d9ddde 32%,
      #c9cecf 52%,
      #b0b6b7 72%,
      #8e9495 93%,
      #747a7b 100%
    );

  border:
    1px solid rgba(59, 65, 66, 0.78);

  box-shadow:
    6px 10px 20px rgba(0, 0, 0, 0.32),
    inset 1px 0 0 rgba(255, 255, 255, 0.26),
    inset -1px 0 0 rgba(0, 0, 0, 0.17);
}


/* sehr feine gebürstete Metallstruktur */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-face::after,

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-freezer-front::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.15;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 1px,
      rgba(0, 0, 0, 0.025) 1px,
      rgba(0, 0, 0, 0.025) 2px,
      transparent 2px,
      transparent 4px
    );
}


/* Gefrierfront aus demselben Material */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-freezer-front {
  background:
    linear-gradient(
      97deg,
      #747a7b 0%,
      #969c9d 6%,
      #c6cbcc 15%,
      #d7dbdc 39%,
      #bec4c5 65%,
      #929899 91%,
      #707677 100%
    );

  border:
    1px solid rgba(58, 64, 65, 0.78);
}


/* klare dunkle Trennfuge Kühlteil / Gefrierteil */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-freezer-line {
  height: 5px;

  background:
    linear-gradient(
      180deg,
      #373c3d 0%,
      #15191a 46%,
      #777d7e 100%
    );

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.42);
}


/* neutrale kleine Markenlinie etwas dunkler */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-brand-line {
  width: 16%;
  height: 1%;

  background:
    rgba(52, 57, 58, 0.58);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15);
}


/*
 * Griff näher an eingelassenem Seiten-/Kantengriff
 * statt aufgesetzter weißer Stange.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-handle {
  right: 1.5%;
  top: 23%;

  width: 2.3%;
  height: 48%;

  border-radius: 3px;

  background:
    linear-gradient(
      90deg,
      #3f4546 0%,
      #707677 28%,
      #c1c6c7 54%,
      #626869 78%,
      #333839 100%
    );

  box-shadow:
    inset 1px 0 1px rgba(255, 255, 255, 0.24),
    inset -1px 0 2px rgba(0, 0, 0, 0.42),
    1px 1px 3px rgba(0, 0, 0, 0.30);
}


/* Gefriergriff ebenfalls als dezente Griffkante */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-freezer-handle {
  left: 1.6%;
  top: 17%;

  width: 2.2%;
  height: 62%;

  background:
    linear-gradient(
      90deg,
      #3f4546,
      #a6acad 48%,
      #505657
    );

  opacity: 0.82;
}


/* Innenraum bleibt bewusst hell/weiß */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  background:
    linear-gradient(
      110deg,
      #cbd3d0 0%,
      #edf2ef 16%,
      #fafcf9 49%,
      #dde4e1 79%,
      #b7c1bd 100%
    );
}


/* Türinnenseite ebenfalls weiß statt Edelstahl */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-inner {
  background:
    linear-gradient(
      105deg,
      #c5cdca 0%,
      #eef2ef 23%,
      #fafbf9 54%,
      #d6dedb 100%
    );
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   realistischer Innenraum als PNG-Layer
   ========================================================== */


/* ----------------------------------------------------------
   Innenraum-PNG
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  background:
    url("/img/live/renderers/refrigerator_standard_inner.png")
    center center / cover
    no-repeat;

  overflow: hidden;
}


/* ----------------------------------------------------------
   Das bisherige CSS-Innenleben wird für diesen Renderer
   nicht mehr gezeichnet.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-shelf,

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-bottle-rack,

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-food,

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-drawer {
  display: none;
}


/* ----------------------------------------------------------
   Licht bleibt als eigener Layer erhalten.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-light {
  z-index: 12;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior-glow {
  z-index: 11;
}


/*
 * Das Bild selbst soll bei ausgeschaltetem Licht nicht
 * verschwinden, sondern nur glaubwürdig dunkler werden.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="OFF"]
.live-fridge-interior {
  filter:
    brightness(0.56)
    saturate(0.72)
    contrast(0.94);
}


/*
 * Bei geöffneter Tür / Licht an:
 * deutlich heller, aber nicht überstrahlt.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="ON"]
.live-fridge-interior {
  filter:
    brightness(1.03)
    saturate(0.94)
    contrast(1.02);

  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.25),
    inset 0 0 42px rgba(143, 255, 207, 0.09);
}


/* ----------------------------------------------------------
   Lichtschein bewusst dezent über dem Foto.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior-glow {
  background:
    linear-gradient(
      180deg,
      rgba(239, 255, 247, 0.34) 0%,
      rgba(177, 255, 216, 0.10) 24%,
      rgba(82, 255, 177, 0.025) 52%,
      transparent 76%
    );

  mix-blend-mode: screen;
}


/* Lichtquelle oben */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-light {
  top: 2.2%;
  width: 28%;
  height: 1.8%;
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Innenraum nur sichtbar, wenn Tür tatsächlich offen ist
   ========================================================== */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  opacity: 0;
  transition:
    opacity 0.18s ease,
    filter 0.22s ease;
}


/*
 * Dieselbe Schwelle wie das Innenlicht:
 * > 3° = Tür geöffnet genug, um Innenraum zu sehen.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="ON"]
.live-fridge-interior {
  opacity: 1;
}


/*
 * Geschlossen bleibt die Metallfront eine geschlossene,
 * ruhige Fläche.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-light="OFF"]
.live-fridge-interior {
  opacity: 0;
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Innenraum vollständig innerhalb des Kühlfachs
   ========================================================== */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  /*
   * Nicht mehr "cover":
   * das hat unten die Frischeschublade abgeschnitten.
   *
   * Bild jetzt vollständig innerhalb der Kühlraumöffnung.
   */
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;

  /*
   * Einen kleinen Sicherheitsabstand zur Gefrierfuge lassen.
   */
  bottom: 36.5%;

  /*
   * Ruhiger Abschluss unten, damit Bild und Gefrierfront
   * nicht optisch ineinanderlaufen.
   */
  border-bottom-width: 6px;
}


/*
 * Der Lichtschein soll ebenfalls sauber vor der
 * horizontalen Trennung enden.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior-glow {
  bottom: 0;
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   finaler Alignment-Pass
   ========================================================== */


/* Innenraum etwas höher / voller ziehen */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  top: 3.8%;

  background-size: 100% 103%;
  background-position: center top;
}


/* Gefriergriff auf die rechte Seite */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-freezer-handle {
  left: auto;
  right: 1.6%;
}


/* obere Türgriffkante ebenfalls rechts lassen */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-handle {
  left: auto;
  right: 1.5%;
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   finaler 3D-/Schließpass
   ========================================================== */


/* ----------------------------------------------------------
   Innenraum bleibt bis kurz vor CLOSED sichtbar.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-interior {
  opacity: 0;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-visible="YES"]
.live-fridge-interior {
  opacity: 1;
}

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"][data-interior-visible="NO"]
.live-fridge-interior {
  opacity: 0;
}


/* ----------------------------------------------------------
   Kühlschranktür bekommt echte optische Materialstärke.
   ---------------------------------------------------------- */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door {
  --fridge-door-depth: 14px;

  transform-style: preserve-3d;
}


/* Vorderseite minimal nach vorn */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-face {
  transform:
    translateZ(
      calc(var(--fridge-door-depth) / 2)
    );
}


/* Innenseite minimal nach hinten */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-inner {
  transform:
    rotateY(180deg)
    translateZ(
      calc(var(--fridge-door-depth) / 2)
    );
}


/*
 * sichtbare Schlosskante / Türstärke
 * rechte Kante des Türblatts
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-edge {
  position: absolute;

  top: 0;
  right: 0;

  width: var(--fridge-door-depth);
  height: 100%;

  transform-origin: right center;

  transform:
    translateX(50%)
    rotateY(90deg);

  background:
    linear-gradient(
      90deg,
      #666c6d 0%,
      #aeb4b5 38%,
      #d4d8d8 58%,
      #7b8182 100%
    );

  border-top:
    1px solid rgba(255,255,255,0.18);

  border-bottom:
    1px solid rgba(0,0,0,0.18);

  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.18),
    inset -1px 0 1px rgba(0,0,0,0.22);

  backface-visibility: visible;
}


/*
 * etwas stärkere Schattenwirkung bei geöffnetem Blatt,
 * damit die Dicke auch räumlich gelesen wird.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-door-face {
  box-shadow:
    7px 10px 20px rgba(0,0,0,0.34),
    inset 1px 0 0 rgba(255,255,255,0.24),
    inset -1px 0 0 rgba(0,0,0,0.18);
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   dimensionsstabil innerhalb der Renderer-Stage
   ========================================================== */


/*
 * Der Kühlschrank darf weder über die Breite NOCH über
 * die verfügbare Höhe der Stage hinauswachsen.
 *
 * Entscheidend für Tablet / Querformat:
 * Höhe limitiert jetzt genauso wie Breite.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-scene {
  width: min(78%, 430px);

  max-width: 78%;

  /*
   * Verhindert das Herauswachsen bei breiten,
   * aber relativ niedrigen Viewports.
   */
  max-height: 82%;

  aspect-ratio: 0.72 / 1;

  margin:
    auto;

  /*
   * Die Scene bleibt sauber innerhalb ihres verfügbaren
   * Bereiches zentriert.
   */
  position: relative;
}


/*
 * Falls die Höhe der begrenzende Faktor ist,
 * wird die Breite automatisch aus dem Seitenverhältnis
 * abgeleitet.
 */

@supports (height: min(1px, 1%)) {

  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    height:
      min(
        82%,
        600px
      );

    width: auto;

    max-width: 78%;
  }
}


/*
 * Bühne selbst: keine Renderer-Geometrie darf visuell
 * oben oder unten aus der Karte laufen.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"] {
  overflow: hidden;
}


/*
 * Auf klassischen Tablet-Querformaten etwas mehr Luft
 * oben/unten lassen.
 */

@media (max-height: 1000px) {

  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    height: 76%;
    max-height: 76%;
  }
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Renderer an tatsächliche Stage-Höhe binden
   ========================================================== */


/*
 * Die Bühne wird zum eindeutigen Bezugssystem.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"] {
  position: relative;
  overflow: hidden;
}


/*
 * Kühlschrank nicht mehr vom Viewport,
 * sondern von seiner eigenen Bühne begrenzen.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-scene {
  position: absolute;

  /*
   * Luft für Header/oben und VAKTEN-Badge/unten.
   */
  top: 7%;
  bottom: 9%;

  left: 50%;

  /*
   * Höhe ergibt sich nun ausschließlich aus
   * dem verfügbaren Raum innerhalb der Stage.
   */
  height: auto;
  max-height: none;

  /*
   * Breite folgt dem Seitenverhältnis.
   */
  width: auto;
  max-width: 78%;

  aspect-ratio: 0.72 / 1;

  margin: 0;

  transform: translateX(-50%);

  /*
   * Der Browser darf den Renderer niemals höher
   * als diesen verfügbaren Bereich machen.
   */
  contain: layout;
}


/*
 * Der Kühlschrankkörper füllt die neue Scene vollständig.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-body {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}


/*
 * Alte viewportabhängige Größenregeln neutralisieren.
 */

@media (max-height: 1000px) {
  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    height: auto;
    max-height: none;
  }
}


/*
 * Auf sehr breiten, aber niedrigen Displays:
 * etwas mehr Sicherheitsluft.
 */

@media (min-aspect-ratio: 4 / 3) {
  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    top: 8%;
    bottom: 10%;
  }
}


/* ==========================================================
   VAKTEN LIVE · REFRIGERATOR_STANDARD
   Renderer folgt der echten Image-Stage
   ========================================================== */


/*
 * Entscheidend:
 * Der Renderer selbst füllt beim Kühlschrank jetzt die
 * komplette live-unit-image-stage.
 *
 * Damit beziehen sich alle Prozentmaße der Fridge-Scene
 * endlich auf die sichtbare Bühne und nicht auf einen
 * intrinsisch skalierten Renderer.
 */

.live-unit-image-stage
.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"] {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  aspect-ratio: auto;

  margin: 0;

  overflow: hidden;
}


/*
 * Kühlschrank innerhalb dieser echten Stage.
 *
 * Höhe ist jetzt der Master.
 * Die Breite ergibt sich aus dem Kühlschrank-Seitenverhältnis.
 */

.live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-scene {
  position: absolute;

  top: 7%;
  bottom: 11%;

  left: 50%;

  height: auto;
  width: auto;

  max-height: none;
  max-width: 76%;

  aspect-ratio: 0.72 / 1;

  margin: 0;

  transform: translateX(-50%);
}


/*
 * Unsere früheren Viewport-Experimente neutralisieren.
 * Ab jetzt entscheidet nur noch die reale Stage.
 */

@media (max-height: 1000px) {
  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    top: 7%;
    bottom: 11%;

    height: auto;
    max-height: none;
  }
}

@media (min-aspect-ratio: 4 / 3) {
  .live-unit-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    top: 7%;
    bottom: 11%;
  }
}

/* ============================================================
   NEXTGEN · MEDICAL_FREEZER_RENDERER
   Fachliche Identität Medical, Mechanik Refrigerator Standard.
   ============================================================ */

.live-unit-renderer[data-renderer-model-key="MEDICAL_FREEZER_RENDERER"]
.live-fridge-interior {
  background:
    url("../assets/vakten-demo/refrigerator_standard_inner_med.png")
    center center / cover
    no-repeat;
}