/*
 * ============================================================
 * SVARTLIND NEXTGEN · VAKTEN DEMO · 2FLG_TOR
 *
 * Automatisch aus produktivem VAKTEN extrahiert:
 * /home/www/vakten/ui/css/vakten.css
 *
 * Enthält nur den 2FLG-TOR-Basisrenderer bis vor 1FLG_TOR.
 * ============================================================
 */

/* ==========================================================
   VAKTEN LIVE · UNIT RENDERER · 2FLG_TOR
   parametrischer 3D-Zwilling
   --door-angle wird später direkt durch ANGLE-Signale steuerbar
   ========================================================== */

.live-unit-renderer {
  --door-angle: 0deg;

  position: relative;
  z-index: 2;
  width: min(92%, 720px);
  height: min(62vh, 680px);
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.live-door-scene {
  position: relative;
  width: min(92%, 580px);
  aspect-ratio: 1 / 1.08;
  perspective: 1250px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

.live-door-floor-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 11%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0) 74%
    );
  filter: blur(9px);
  transform: rotateX(68deg);
  transform-origin: center;
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}

.live-door-frame {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 7%;
  bottom: 12%;
  transform-style: preserve-3d;
}

.live-door-opening {
  position: absolute;
  inset: 3.6%;
  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(14, 47, 39, 0.88),
      rgba(3, 10, 9, 0.98) 68%
    );
  box-shadow:
    inset 0 0 48px rgba(0, 0, 0, 0.86),
    0 0 36px rgba(0, 255, 162, 0.035);
}

.live-door-frame-top,
.live-door-frame-left,
.live-door-frame-right {
  position: absolute;
  z-index: 9;
  background:
    linear-gradient(
      90deg,
      #c9c8c2 0%,
      #f4f2eb 38%,
      #d9d7d1 72%,
      #a9a8a3 100%
    );
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.live-door-frame-top {
  left: 0;
  right: 0;
  top: 0;
  height: 5.5%;
  border-radius: 4px 4px 0 0;
}

.live-door-frame-left,
.live-door-frame-right {
  top: 0;
  bottom: 0;
  width: 4.8%;
}

.live-door-frame-left {
  left: 0;
}

.live-door-frame-right {
  right: 0;
}

.live-door-leaf {
  position: absolute;
  top: 5.5%;
  bottom: 0;
  width: 45.3%;
  transform-style: preserve-3d;
  transition:
    transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 1.5s ease;
  backface-visibility: visible;
}

.live-door-leaf-left {
  left: 4.7%;
  transform-origin: left center;
  transform:
    rotateY(
      calc(var(--door-angle) * -1)
    );
}

.live-door-leaf-right {
  right: 4.7%;
  transform-origin: right center;
  transform:
    rotateY(
      var(--door-angle)
    );
}

.live-door-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(
      100deg,
      #bab9b4 0%,
      #eeece6 16%,
      #f7f5ef 46%,
      #dddcd6 78%,
      #b3b2ad 100%
    );
  border: 1px solid rgba(78, 80, 78, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    inset 0 -18px 34px rgba(100, 100, 96, 0.08),
    0 9px 22px rgba(0, 0, 0, 0.27);
}

.live-door-leaf-left .live-door-face {
  border-right-color: rgba(43, 45, 44, 0.72);
}

.live-door-leaf-right .live-door-face {
  border-left-color: rgba(43, 45, 44, 0.72);
}

.live-door-window {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 25%;
  height: 42%;
  transform: translateX(-50%);
  padding: 5px;
  background:
    linear-gradient(
      110deg,
      #d8d7d1,
      #f3f1ea 46%,
      #bab9b4
    );
  border-radius: 2px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.54);
}

.live-door-window-glass {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      132deg,
      rgba(76, 112, 106, 0.22),
      rgba(4, 18, 16, 0.94) 46%,
      rgba(31, 76, 65, 0.42)
    );
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.76);
}

.live-door-closer {
  position: absolute;
  top: 4.5%;
  width: 39%;
  height: 4%;
  border-radius: 5px;
  background:
    linear-gradient(
      180deg,
      #e9e8e3,
      #b6b6b2
    );
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.26);
}

.live-door-closer-left {
  left: 8%;
}

.live-door-closer-right {
  right: 8%;
}

.live-door-closer::after {
  content: "";
  position: absolute;
  top: -130%;
  width: 72%;
  height: 2px;
  background: #a5a5a1;
}

.live-door-closer-left::after {
  left: 65%;
  transform:
    rotate(-10deg);
  transform-origin: left center;
}

.live-door-closer-right::after {
  right: 65%;
  transform:
    rotate(10deg);
  transform-origin: right center;
}

.live-door-handle-set {
  position: absolute;
  left: 4%;
  top: 54%;
  width: 28%;
  height: 12%;
}

.live-door-handle-plate {
  position: absolute;
  left: 0;
  top: 0;
  width: 21%;
  height: 100%;
  border-radius: 9px;
  background:
    linear-gradient(
      90deg,
      #111,
      #292929 50%,
      #070707
    );
  box-shadow:
    1px 2px 5px rgba(0, 0, 0, 0.48);
}

.live-door-handle {
  position: absolute;
  left: 12%;
  top: 28%;
  width: 72%;
  height: 19%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #323232,
      #080808
    );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.42);
}

.live-door-hinge {
  position: absolute;
  width: 4%;
  height: 9%;
  border-radius: 3px;
  background:
    linear-gradient(
      90deg,
      #858682,
      #d1d1cb 45%,
      #777874
    );
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.32);
}

.live-door-hinge-a {
  top: 13%;
}

.live-door-hinge-b {
  bottom: 13%;
}

.live-door-hinge-left {
  left: 0;
}

.live-door-hinge-right {
  right: 0;
}

.live-unit-renderer[data-unit-state="UNKNOWN"]
.live-door-leaf {
  filter:
    grayscale(0.7)
    brightness(0.62);
}

.live-unit-renderer[data-unit-state="OPEN"]
.live-door-floor-shadow {
  opacity: 0.58;
  transform:
    rotateX(68deg)
    scaleX(1.08);
}

.live-unit-renderer[data-unit-state="CLOSED"]
.live-door-floor-shadow {
  opacity: 0.34;
  transform:
    rotateX(68deg)
    scaleX(0.86);
}

@media (max-width: 900px) {
  .live-unit-renderer {
    height: min(54vh, 560px);
  }

  .live-door-scene {
    width: min(96%, 520px);
  }
}


/* ==========================================================
   VAKTEN LIVE · 2FLG_TOR · VISUAL FINETUNING
   2026-08-15
   ========================================================== */

/*
 * Farbkanal für spätere Zustandsdarstellung.
 * Heute Romulan Green; später per JS z.B. rot/gelb/blau setzbar.
 */
.live-unit-renderer {
  --door-status-rgb: 82, 255, 177;
}


/* ----------------------------------------------------------
   Sichtfenster
   Nahezu schwarz wie bei der realen Vorlage.
   Der Statusschein liegt optisch "hinter" der Scheibe.
   ---------------------------------------------------------- */

.live-door-window {
  width: 23%;
  height: 41%;
  padding: 4px;

  background:
    linear-gradient(
      110deg,
      #d4d3ce 0%,
      #f2f0e9 46%,
      #b7b6b1 100%
    );

  box-shadow:
    0 2px 7px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48);
}

.live-door-window-glass {
  position: relative;

  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(var(--door-status-rgb), 0.14) 0%,
      rgba(1, 8, 7, 0.94) 42%,
      #020303 78%
    );

  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.95),
    inset 0 0 10px rgba(var(--door-status-rgb), 0.11),
    0 0 7px rgba(var(--door-status-rgb), 0.06);
}


/* ----------------------------------------------------------
   Beschlag
   Weniger Comic, näher an schmalem schwarzem Türbeschlag.
   ---------------------------------------------------------- */

.live-door-handle-set {
  left: 3.2%;
  top: 54%;
  width: 23%;
  height: 10%;
}

.live-door-handle-plate {
  width: 15%;
  height: 100%;
  border-radius: 6px;

  background:
    linear-gradient(
      90deg,
      #080808 0%,
      #242424 52%,
      #050505 100%
    );
}

.live-door-handle {
  left: 9%;
  top: 31%;
  width: 58%;
  height: 13%;
  min-height: 3px;

  background:
    linear-gradient(
      180deg,
      #333 0%,
      #080808 75%
    );

  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5);
}


/* ----------------------------------------------------------
   Türschließer
   Solange die Geometrie nicht korrekt nachgebildet ist:
   lieber bewusst nicht darstellen.
   ---------------------------------------------------------- */

.live-door-closer {
  display: none;
}


/* ----------------------------------------------------------
   Türblätter etwas ruhiger / näher an der PNG-Anmutung
   ---------------------------------------------------------- */

.live-door-face {
  background:
    linear-gradient(
      96deg,
      #b8b7b2 0%,
      #e8e6df 9%,
      #f4f2eb 42%,
      #e6e4dd 77%,
      #b8b7b2 100%
    );

  border-color: rgba(68, 70, 68, 0.72);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 -12px 28px rgba(76, 77, 74, 0.07),
    0 8px 20px rgba(0, 0, 0, 0.29);
}


/* etwas schlankere Zarge */
.live-door-frame-left,
.live-door-frame-right {
  width: 4.1%;
}

.live-door-frame-top {
  height: 4.8%;
}


/* ==========================================================
   VAKTEN LIVE · 2FLG_TOR · DETAILPASS
   ========================================================== */


/* ----------------------------------------------------------
   Geschlossener Zustand:
   Flügel treffen fast exakt aufeinander.
   ---------------------------------------------------------- */

.live-door-leaf {
  width: 45.9%;
}

.live-door-leaf-left {
  left: 4.1%;
}

.live-door-leaf-right {
  right: 4.1%;
}


/* ----------------------------------------------------------
   Türblattkontur
   feine technische Fuge wie bei der Referenz
   ---------------------------------------------------------- */

.live-door-face {
  position: absolute;

  border:
    1px solid
    rgba(56, 58, 56, 0.82);

  box-shadow:
    inset 0 0 0 1px
      rgba(255, 255, 255, 0.38),

    inset 7px 0 10px
      rgba(50, 52, 50, 0.045),

    inset -7px 0 10px
      rgba(50, 52, 50, 0.045),

    inset 0 -16px 28px
      rgba(55, 56, 54, 0.055),

    0 8px 20px
      rgba(0, 0, 0, 0.28);
}

.live-door-face::after {
  content: "";
  position: absolute;
  inset: 2.1%;
  pointer-events: none;

  border:
    1px solid
    rgba(92, 94, 91, 0.19);

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


/* Mittelstoß deutlich feiner */

.live-door-leaf-left .live-door-face {
  border-right-width: 0.6px;
}

.live-door-leaf-right .live-door-face {
  border-left-width: 0.6px;
}


/* ----------------------------------------------------------
   Sichtfenster:
   nahezu schwarz, nur Tiefen-/Statusschein.
   ---------------------------------------------------------- */

.live-door-window {
  width: 22%;
  height: 41%;
  padding: 3.5px;

  border-radius: 1px;
}

.live-door-window-glass {
  background:
    radial-gradient(
      ellipse at 50% 46%,
      rgba(var(--door-status-rgb), 0.105) 0%,
      rgba(5, 13, 12, 0.97) 32%,
      #010202 70%
    );

  box-shadow:
    inset 0 0 17px
      rgba(0, 0, 0, 0.98),

    inset 0 0 9px
      rgba(var(--door-status-rgb), 0.10);
}


/* ----------------------------------------------------------
   Schmaler Langschild-Beschlag
   ---------------------------------------------------------- */

.live-door-handle-set {
  left: 2.6%;
  top: 53.5%;
  width: 20%;
  height: 12%;
}

.live-door-handle-plate {
  width: 13%;
  height: 100%;

  border-radius: 7px;

  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #252525 48%,
      #070707 100%
    );
}

.live-door-handle {
  left: 7%;
  top: 27%;

  width: 54%;
  height: 11%;

  min-height: 3px;

  border-radius: 999px;
}


/* Schloss / Profilzylinder */

.live-door-lock-cylinder {
  position: absolute;

  left: 3.8%;
  top: 69%;

  width: 6%;
  aspect-ratio: 0.72 / 1;

  min-width: 3px;

  border-radius:
    45% 45% 55% 55%;

  background:
    linear-gradient(
      90deg,
      #858585,
      #d5d5d2 48%,
      #747474
    );

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

.live-door-lock-cylinder::after {
  content: "";

  position: absolute;

  left: 42%;
  top: 24%;

  width: 16%;
  height: 48%;

  border-radius: 999px;

  background:
    #252525;
}


/* ----------------------------------------------------------
   Türschließer wieder sichtbar.
   Da sie im Türblatt liegen, folgen sie dessen Rotation.
   ---------------------------------------------------------- */

.live-door-closer {
  display: block;

  top: 3.8%;
  width: 35%;
  height: 3.2%;

  border-radius: 3px;

  background:
    linear-gradient(
      180deg,
      #eeeeea 0%,
      #c9c8c3 53%,
      #a9aaa6 100%
    );

  box-shadow:
    0 1px 4px
      rgba(0, 0, 0, 0.28),

    inset 0 1px 0
      rgba(255, 255, 255, 0.62);
}

.live-door-closer-left {
  left: 8%;
}

.live-door-closer-right {
  right: 8%;
}


/* Schließerarm */

.live-door-closer::after {
  content: "";

  position: absolute;

  top: -100%;

  width: 78%;
  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #8e8f8c,
      #c3c3bf
    );

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

.live-door-closer-left::after {
  left: 62%;

  transform:
    rotate(-8deg);

  transform-origin:
    left center;
}

.live-door-closer-right::after {
  right: 62%;

  transform:
    rotate(8deg);

  transform-origin:
    right center;
}


/* ----------------------------------------------------------
   Scharniere etwas filigraner
   ---------------------------------------------------------- */

.live-door-hinge {
  width: 3%;
  height: 8%;

  border-radius: 2px;

  opacity: 0.88;
}


/* ==========================================================
   VAKTEN LIVE · 2FLG_TOR · TECHNISCHER DETAILPASS
   ========================================================== */


/* ----------------------------------------------------------
   Alte 2D-Klinken-/Schlossdarstellung endgültig ausblenden
   ---------------------------------------------------------- */

.live-door-handle-set,
.live-door-handle-plate,
.live-door-handle,
.live-door-lock-cylinder,
.live-door-closer {
  display: none;
}


/* ----------------------------------------------------------
   Druckbeschlag am rechten Gehflügel
   bewusst flach: ein 2D-Metallteil ist hier geometrisch ehrlich
   ---------------------------------------------------------- */

.live-door-push-plate {
  position: absolute;

  left: 4.1%;
  top: 49%;

  width: 4.4%;
  height: 19%;

  min-width: 5px;

  border-radius: 3px;

  background:
    linear-gradient(
      90deg,
      #4e5150 0%,
      #a7aaa7 23%,
      #d0d2cf 48%,
      #8d908e 73%,
      #3b3e3d 100%
    );

  border:
    1px solid
    rgba(34, 36, 35, 0.62);

  box-shadow:
    1px 2px 5px rgba(0, 0, 0, 0.34),
    inset 1px 0 1px rgba(255, 255, 255, 0.42),
    inset -1px 0 1px rgba(0, 0, 0, 0.18);
}


/* kleine obere/untere Befestigung */

.live-door-push-plate::before,
.live-door-push-plate::after {
  content: "";

  position: absolute;
  left: 50%;

  width: 2px;
  height: 2px;

  transform: translateX(-50%);

  border-radius: 50%;

  background: rgba(45, 47, 46, 0.75);
}

.live-door-push-plate::before {
  top: 9%;
}

.live-door-push-plate::after {
  bottom: 9%;
}


/* ----------------------------------------------------------
   Schließerkästen:
   statisch an der Unterkante der oberen Zarge.
   Keine vorgetäuschte Gelenkkinematik.
   ---------------------------------------------------------- */

.live-door-frame-closer {
  position: absolute;

  z-index: 12;

  top: 4.8%;

  width: 20%;
  height: 3.6%;

  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      #efeee9 0%,
      #d1d0ca 50%,
      #aaa9a4 100%
    );

  border:
    1px solid
    rgba(94, 95, 92, 0.48);

  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.live-door-frame-closer-left {
  left: 16%;
}

.live-door-frame-closer-right {
  right: 16%;
}


/* kleine Montagekante unterhalb */

.live-door-frame-closer::after {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  bottom: -2px;

  height: 1px;

  background:
    rgba(72, 74, 72, 0.42);
}


/* ==========================================================
   VAKTEN LIVE · 2FLG_TOR
   Skizzen-Pass: integrierte Obentürschließer + Druckbeschlag
   ========================================================== */


/* ----------------------------------------------------------
   Obere Zarge

   Etwas kräftiger als zuvor.
   Die Schließerkästen liegen vollständig innerhalb der Zarge.
   ---------------------------------------------------------- */

.live-door-frame-top {
  height: 6.6%;

  background:
    linear-gradient(
      180deg,
      #f2f0e9 0%,
      #dedcd5 44%,
      #c0bfb9 78%,
      #aeadA8 100%
    );

  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(80, 82, 79, 0.24);
}


/*
 * Türblätter beginnen erst UNTER der oberen Zarge.
 * Damit kann beim Öffnen kein Flügel mehr durch
 * die Schließerkästen schneiden.
 */

.live-door-leaf {
  top: 6.6%;
}


/* ----------------------------------------------------------
   Schließerkästen

   Nicht mehr im Durchgang.
   Sie liegen wie flache technische Abdeckungen in der Zarge.
   ---------------------------------------------------------- */

.live-door-frame-closer {
  top: 1.15%;

  width: 20%;
  height: 4.05%;

  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      #f3f2ed 0%,
      #d7d6d0 44%,
      #bebdb8 72%,
      #a7a7a2 100%
    );

  border:
    1px solid
    rgba(84, 86, 83, 0.46);

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);

  z-index: 14;
}

.live-door-frame-closer-left {
  left: 16.5%;
}

.live-door-frame-closer-right {
  right: 16.5%;
}


/*
 * Keine angedeuteten Arme oder herunterhängenden
 * Montagekanten mehr.
 */

.live-door-frame-closer::after {
  display: none;
}


/* ----------------------------------------------------------
   Seitenzargen bis sauber unter die obere Zarge
   ---------------------------------------------------------- */

.live-door-frame-left,
.live-door-frame-right {
  top: 0;
}


/* ----------------------------------------------------------
   Druckbeschlag

   Nach Saschas Skizze:
   - am Gehflügel
   - unmittelbar am Mittelstoß
   - kurzer vertikaler Metallbeschlag
   - keine Klinke, kein Schloss
   ---------------------------------------------------------- */

.live-door-push-plate {
  left: 1.8%;
  top: 51%;

  width: 5.8%;
  height: 13.5%;

  min-width: 7px;

  border-radius: 2px;

  background:
    linear-gradient(
      90deg,
      #696c6a 0%,
      #b7b9b6 18%,
      #e0e1dd 44%,
      #b9bbb8 67%,
      #626563 100%
    );

  border:
    1px solid
    rgba(48, 50, 49, 0.68);

  box-shadow:
    1px 2px 4px rgba(0, 0, 0, 0.30),
    inset 1px 0 1px rgba(255, 255, 255, 0.55),
    inset -1px 0 1px rgba(0, 0, 0, 0.19);
}


/*
 * Kleine Befestigungspunkte nur sehr dezent.
 */

.live-door-push-plate::before,
.live-door-push-plate::after {
  width: 2px;
  height: 2px;

  background:
    rgba(76, 78, 76, 0.62);
}

.live-door-push-plate::before {
  top: 8%;
}

.live-door-push-plate::after {
  bottom: 8%;
}


/* ----------------------------------------------------------
   Mittelstoß noch etwas ruhiger / enger
   ---------------------------------------------------------- */

.live-door-leaf-left .live-door-face {
  border-right-width: 0.45px;
}

.live-door-leaf-right .live-door-face {
  border-left-width: 0.45px;
}


/* ----------------------------------------------------------
   Türblattkontur leicht betonen
   ---------------------------------------------------------- */

.live-door-face::after {
  inset: 1.8%;

  border:
    1px solid
    rgba(87, 89, 86, 0.22);
}