/* =========================================================
   GLOBAL
========================================================= */
* {
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* 🔴 FINAL ABGESTIMMTE TÜRWERTE */
:root {
  /* Türbereich (enger gefasst) */
  --door-top: 33.6%;
  --door-left: 28.4%;
  --door-width: 380px;     /* ⬅️ schmaler als vorher */
  --door-height: 255px;

  /* Fenster innerhalb der Tür */
  --window-width: 34%;
  --window-height: 40%;
  --window-top: 14%;

  /* Türblatt-Dicke */
  --door-leaf-width: 44%; /* ⬅️ Türen selbst dünner */
}

body {
  margin: 0;
  background: #eef2f6;
  color: #1f2933;
}

/* =========================================================
   HEADER
========================================================= */
.topbar {
  background: #ffffff;
  padding: 1rem;
  border-bottom: 1px solid #d1d5db;
  font-weight: 600;
  text-align: center;
}

/* =========================================================
   STAGE
========================================================= */
.stage {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

/* =========================================================
   MACHINE
========================================================= */
.machine-wrapper {
  position: relative;
  width: 1200px;
  max-width: 100%;
}

.machine-img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

/* =========================================================
   INNENRAUM
========================================================= */
.interior {
  position: absolute;
  top: var(--door-top);
  left: var(--door-left);
  width: var(--door-width);
  height: var(--door-height);
  z-index: 1;
  overflow: hidden;
}

.interior img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   TÜREN – DÜNNER & PRÄZISER
========================================================= */
.doors {
  position: absolute;
  top: var(--door-top);
  left: var(--door-left);
  width: var(--door-width);
  height: var(--door-height);
  z-index: 3;
  overflow: hidden;
}

/* Türflügel */
.door {
  position: absolute;
  width: var(--door-leaf-width); /* ⬅️ NICHT MEHR 50% */
  height: 100%;
  background: #2b2b2b;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Fenster */
.door::after {
  content: "";
  position: absolute;
  top: var(--window-top);
  left: 50%;
  transform: translateX(-50%);
  width: var(--window-width);
  height: var(--window-height);
  background: rgba(0,0,0,0.28);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset 0 0 12px rgba(0,0,0,0.4);
}

/* Position */
.door.left {
  left: 0;
}

.door.right {
  right: 0;
}

/* Öffnen – weiter wegfahren */
.doors.open .door.left {
  transform: translateX(-120%);
  transition: transform 0.85s ease-in-out;
}

.doors.open .door.right {
  transform: translateX(120%);
  transition: transform 0.85s ease-in-out;
}

/* =========================================================
   BEDIENPANEL – IMMER SICHTBAR
========================================================= */
.panel {
  position: fixed;
  right: 1rem;
  top: 6rem;
  width: 220px;
  background: #c7cdd3;
  padding: 10px;
  border-radius: 8px;
  z-index: 10;
}

.monitor {
  background: #0f172a;
  color: #e5e7eb;
  height: 140px;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.screen {
  display: none;
}

.screen.active {
  display: block;
}

.panel button {
  width: 100%;
  margin-bottom: 6px;
  padding: 12px;
  background: #c01818;
  color: #ffffff;
  border: none;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

.panel button:active {
  transform: scale(0.98);
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 900px) {

  .stage {
    padding-bottom: 270px;
  }

  .machine-wrapper {
    transform: scale(0.9);
    transform-origin: top center;
  }

  .panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    border-radius: 12px 12px 0 0;
  }

  .monitor {
    height: 110px;
    font-size: 0.95rem;
  }

  .panel button {
    padding: 14px;
    font-size: 1rem;
  }
}