/* Büro-Kachel */

/* Modernes Büro-Setup */
.kachel_buero {
  position: relative;
  overflow: hidden;
  background-color: #1e2530;
}

.buero_wand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(to bottom, #622A44, #202c39);
}

.buero_boden {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: #141d26;
  border-top: 2px solid #111;
}

/* Schreibtisch im modernen Vektorstil */
.schreibtisch_komplex {
  position: absolute;
  bottom: -2%;
  left:0%;
  width: 103%;
  height: 40px;
  z-index: 5;
}

.tisch_platte {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #000000;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.tisch_bein {
  position: absolute;
  top: 6px;
  width: 4px;
  height: 34px;
  background-color: #ffffff;
}
.bein_links { left: 8%; transform: rotate(5deg); }

.schubladen_element {
  position: absolute;
  top: 6px;
  right: 5%;
  width: 45px;
  height: 34px;
  background-color: #ffffff;
  border-radius: 0 0 2px 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 2px 0;
  box-sizing: border-box;
}

.schublade_linie {
  width: 70%;
  height: 2px;
  background-color: #141d26;
  margin: 0 auto;
  border-radius: 1px;
}

/* Minimalistischer Monitor */
.monitor_komplex {
  position: absolute;
  bottom: calc(12% + 20px);
  left: 28%;
  width: 110px;
  height: 75px;
  z-index: 6;
}

.monitor_fuss {
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px 2px 0 0;
}

.monitor_stange {
  position: absolute;
  bottom: 3px;
  left: 52px;
  width: 6px;
  height: 14px;
  background-color: #ffffff;
}

.monitor_rahmen {
  position: absolute;
  bottom: 17px;
  left: 0;
  width: 110px;
  height: 58px;
  background-color: #111111;
  border: 3px solid #ffffff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

.monitor_bildschirm {
  position: relative;
  left: 0;
  top: 0;
  width: 104px;
  height: 52px;
  background-color: #050505;
  color: #33ff33;
  font-family: 'Courier New', Courier, monospace;
  font-size: 8px;
  font-weight: bold;
  font-kerning: none;
  font-variant-ligatures: none;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: pre-wrap;
  line-height: 8px;
  text-shadow: none;
}

/* Schreibtischpflanze */
.pflanze_komplex {
  position: absolute;
  bottom: calc(12% + 20px);
  right: 22%;
  width: 20px;
  height: 25px;
  z-index: 6;
}

.pflanzentopf {
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 16px;
  height: 12px;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

.blatt {
  position: absolute;
  background-color: #2ecc71;
  border-radius: 50% 50% 0 50%;
  transform-origin: bottom center;
}
.b1 { width: 6px; height: 14px; bottom: 10px; left: 2px; transform: rotate(-35deg); }
.b2 { width: 6px; height: 16px; bottom: 11px; left: 7px; transform: rotate(5deg); border-radius: 50% 50% 50% 50%; }
.b3 { width: 6px; height: 13px; bottom: 10px; right: 2px; transform: rotate(40deg); border-radius: 50% 50% 50% 0; }

/* Design-Lampe und Lichtausrichtung */
.lampe_komplex {
  position: absolute;
  bottom: calc(12% + 20px);
  left: 8%;
  width: 80px;
  height: 80px;
  z-index: 7;
}

.lampe_fuss {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 24px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 2px;
}

.lampe_arm {
  position: absolute;
  bottom: 4px;
  left: 14px;
  width: 3px;
  height: 45px;
  background-color: #ffffff;
  transform: rotate(25deg);
  transform-origin: bottom center;
  border-radius: 2px;
}

.lampe_kopf_leitung {
  position: absolute;
  bottom: 42px;
  left: 33px;
  width: 1px;
  height: 1px;
}

.lampe_kopf {
  position: absolute;
  top: -6px;
  left: -12px;
  width: 26px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 12px 12px 0 0;
  transform: rotate(35deg);
}

.lichtkegel {
  position: absolute;
  top: 4px;
  left: -50px;
  width: 90px;
  height: 85px;
  background: linear-gradient(to bottom, rgba(255, 255, 200, 0.35), rgba(255, 255, 200, 0.03) 70%, transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: top center;
  transform: rotate(35deg);
  pointer-events: none;
  animation: raum_licht 1s infinite alternate;
}

@keyframes raum_licht {
  0% { opacity: 0.85; }
  30% { opacity: 0.95; }
  32% { opacity: 0.75; }
  34% { opacity: 0.90; }
  70% { opacity: 0.85; }
  100% { opacity: 0.95; }
}