html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

:root {
  --focus: #1292bb;
  --text: #173042;
  --led-off: #cccccc;
  --led-green: #00ff00;
  --led-red: #ff0000;
  --led-blue: #0000ff;
  --led-orange: #ffb34f;
  --led-grey: #cccccc;

  /* Grundgroesse der kompletten Leuchte bzw. des inneren Lichtkoerpers */
  --lamp-size: 50px;

  /* Wie weit der weiche innere Lichtkern im ausgeschalteten Zustand ueber die Leuchte hinauslaeuft 22px*/
  --lamp-core-spread: 10px;

  /* Wie weit der weiche innere Lichtkern im eingeschalteten Zustand ueber die Leuchte hinauslaeuft 26px*/
  --lamp-core-spread-on: 0px;

  /* Wie weit der aeussere Lichtschein um die Leuchte herum auslaeuft */
  --lamp-glow-spread: 130px;

  /* Gesamthelligkeit des inneren Leuchtkoerpers 1*/
  --lamp-light-intensity: 1;

  /* Gesamthelligkeit des aeusseren Lichtscheins 0.95*/
  --lamp-glow-intensity: 0.95;

  /* Staerke des sehr hellen inneren Lampenkerns 1*/
  --lamp-inner-intensity: 10;

  /* Groesse des sehr hellen inneren Lampenkerns als erster Verlaufspunkt 16%*/
  --lamp-inner-size: 5%;

  /* Groesse des mittleren weichen Uebergangs im inneren Leuchtkoerper 34%*/
  --lamp-inner-mid-size: 34%;

  /* Groesse des aeusseren weichen Uebergangs im inneren Leuchtkoerper 54%*/
  --lamp-inner-fade-size: 54%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
}

.knx-app,
.knx-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
}

.knx-stage {
  overflow: hidden;
}

.knx-switch {
  width: var(--w, 230px);
  height: var(--h, 430px);
  background-image: url("images/tastsensor-3-5-fach-komplett.png");
  background-repeat: no-repeat;
}

.knx-shutter-group {
  width: var(--w, 200px);
  height: var(--h, 266px);
  background-image: url("images/fenster.png");
  background-repeat: no-repeat;
}

.knx-free {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
}

.knx-control {
  width: var(--w, 26px);
  height: var(--h, 50px);
  z-index: 100;
  /*border: 1px dashed rgba(19, 48, 68, 0.28);*/
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.knx-control:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(19, 48, 68, 0.42);
}

.knx-control.is-pressed {
  transform: translateY(1px) scale(0.985);
  background: rgba(255, 255, 255, 0.3);
}

.knx-control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.knx-led {
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: 50%;
  background: var(--led-off);
  border: 1px solid rgba(90, 100, 110, 0.22);
  color: var(--led-off);
  opacity: 1;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.knx-led.is-on {
  opacity: 1;
}

.knx-led.is-weak {
  opacity: 0.6;
}

.knx-led.is-pulsing {
  animation: knxLedPulse 1.1s ease-in-out infinite;
}

.knx-led--green {
  color: var(--led-green);
}

.knx-led--red {
  color: var(--led-red);
}

.knx-led--blue {
  color: var(--led-blue);
}

.knx-led--orange {
  color: var(--led-orange);
}

.knx-led--grey {
  color: var(--led-grey);
}

.knx-led.is-on.knx-led--green,
.knx-led.is-weak.knx-led--green {
  background: var(--led-green);
}

.knx-led.is-on.knx-led--red,
.knx-led.is-weak.knx-led--red {
  background: var(--led-red);
}

.knx-led.is-on.knx-led--blue,
.knx-led.is-weak.knx-led--blue {
  background: var(--led-blue);
}

.knx-led.is-on.knx-led--orange,
.knx-led.is-weak.knx-led--orange {
  background: var(--led-orange);
}

.knx-led.is-on,
.knx-led.is-weak {
  box-shadow:
    0 0 2px currentColor,
    0 0 10px currentColor;
}

.knx-temperature-display {
  width: 95px;
  height: 33px;
  /*padding: 10px 14px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: rgba(26, 36, 46, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #000000;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 0 10px rgba(112, 201, 255, 0.3);
  backdrop-filter: blur(6px);
}

.knx-shutter-position-display {
  min-width: 92px;
  min-height: 36px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(26, 36, 46, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f5fbff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 0 10px rgba(112, 201, 255, 0.18);
  backdrop-filter: blur(6px);
}

.knx-lamp {
  position: absolute;
  left: 50%;
  top: 70%;
  width: var(--lamp-size);
  height: var(--lamp-size);
  pointer-events: none;
  overflow: visible;
  transform: translate(-50%, -50%);
  opacity: calc(var(--lamp-level, 0) * var(--lamp-light-intensity));
}

.knx-lamp-bulb,
.knx-lamp-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.knx-lamp-bulb {
  inset: calc(-1 * var(--lamp-core-spread));
  background: radial-gradient(
    circle,
    rgb(255 250 228 / calc(0.68 * var(--lamp-inner-intensity))) 0%,
    rgb(255 235 168 / calc(0.46 * var(--lamp-inner-intensity))) var(--lamp-inner-size),
    rgb(255 214 108 / calc(0.24 * var(--lamp-inner-intensity))) var(--lamp-inner-mid-size),
    rgb(255 188 68 / calc(0.1 * var(--lamp-inner-intensity))) var(--lamp-inner-fade-size),
    rgb(255 186 66 / 0) 100%
  );
  border: 0;
  filter: blur(10px);
}

.knx-lamp-glow {
  inset: calc(-1 * var(--lamp-glow-spread));
  background: radial-gradient(
    circle,
    rgba(255, 238, 164, 0.46) 0%,
    rgba(255, 214, 108, 0.28) 20%,
    rgba(255, 187, 66, 0.16) 42%,
    rgba(255, 166, 48, 0.06) 62%,
    rgba(255, 166, 48, 0) 100%
  );
  opacity: calc(var(--lamp-level, 0) * var(--lamp-glow-intensity));
  transform: scale(0.98);
  filter: blur(24px);
  transition:
    opacity 140ms linear,
    transform 140ms linear;
}

.knx-lamp.is-on .knx-lamp-bulb {
  inset: calc(-1 * var(--lamp-core-spread-on));
  background: radial-gradient(
    circle,
    rgb(255 255 244 / calc(0.82 * var(--lamp-inner-intensity))) 0%,
    rgb(255 242 186 / calc(0.62 * var(--lamp-inner-intensity))) var(--lamp-inner-size),
    rgb(255 220 118 / calc(0.34 * var(--lamp-inner-intensity))) var(--lamp-inner-mid-size),
    rgb(255 192 72 / calc(0.14 * var(--lamp-inner-intensity))) var(--lamp-inner-fade-size),
    rgb(255 192 72 / 0) 100%
  );
  box-shadow: none;
  filter: blur(12px);
}

.knx-floor-heating {
  width: var(--w, 420px);
  height: var(--h, 240px);
  border-radius: 28px;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.knx-floor-heating.is-active {
  opacity: 1;
}

.knx-floor-heating-glow,
.knx-floor-heating-pipes {
  position: absolute;
  inset: 0;
}

.knx-floor-heating-glow {
  background:
    radial-gradient(circle at center, rgba(255, 112, 78, 0.36), rgba(255, 112, 78, 0.12) 48%, transparent 76%);
  opacity: calc(var(--heat-level, 0) * 1);
  filter: blur(18px);
}

.knx-floor-heating-pipes {
  border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 240'%3E%3Cpath d='M34 28H386Q404 28 404 46Q404 64 386 64H34Q16 64 16 82Q16 100 34 100H386Q404 100 404 118Q404 136 386 136H34Q16 136 16 154Q16 172 34 172H386Q404 172 404 190Q404 208 386 208H34' fill='none' stroke='%23ff8054' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  opacity: calc(0.18 + var(--heat-level, 0) * 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 111, 72, calc(0.2 * var(--heat-level, 0))),
    0 0 28px rgba(255, 91, 58, calc(0.42 * var(--heat-level, 0)));
}

.knx-shutter {
  width: var(--w, 120px);
  height: var(--h, 160px);
  z-index: 1;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(35, 41, 48, 0.08);
  pointer-events: none;
}

.knx-shutter-curtain {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0%;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(82, 88, 96, 0.98), rgba(50, 55, 61, 0.98));
  transition: height 120ms linear;
}

.knx-shutter-slat {
  width: 100%;
  height: calc(100% / 18);
  min-height: 7px;
  border-bottom: 1px solid rgba(27, 31, 36, 0.24);
  background:
    linear-gradient(180deg, rgba(115, 121, 129, 0.98), rgba(65, 70, 76, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(26, 31, 36, 0.16);
}

.knx-shutter.is-moving-up .knx-shutter-curtain,
.knx-shutter.is-moving-down .knx-shutter-curtain {
  box-shadow: 0 0 16px rgba(75, 168, 255, 0.12);
}

.knx-shutter.is-stopped .knx-shutter-curtain {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.knx-switch-label {
  width: 106px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(0, 0, 255, 0.95);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.knx-lamp-slot {
  width: var(--w, var(--lamp-size));
  height: var(--h, var(--lamp-size));
  background-image: url("images/lampe.png");
  /*background: transparent;*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: visible;
}

#knx-switch {
  --x: 72%;
  --y: 7%;
}

#knx-shutter {
  --x: 0px;
  --y: 0px;
}

#temperature-display {
  --x: 67px;
  --y: 38px;
}

#shutter-position-display {
  --x: 200px;
  --y: 40px;
}

#floor-heating-visual {
  --x: 8%;
  --y: 66%;
  --w: 420px;
  --h: 240px;
}

#shutter-visual {
  --x: 34.5px;
  --y: 34px;
  --w: 133px;
  --h: 197px;
}

#lamp-livingRoom {
  --x: 30%;
  --y: 60%;
  --w: var(--lamp-size);
  --h: var(--lamp-size);
}

#lamp-kitchen {
  --x: 36%;
  --y: 22%;
  --w: var(--lamp-size);
  --h: var(--lamp-size);
}

#lamp-bedroom {
  --x: 52%;
  --y: 22%;
  --w: var(--lamp-size);
  --h: var(--lamp-size);
}

#lamp-bathroom {
  --x: 60%;
  --y: 24%;
  --w: var(--lamp-size);
  --h: var(--lamp-size);
}

#lamp-hallway {
  --x: 44%;
  --y: 34%;
  --w: var(--lamp-size);
  --h: var(--lamp-size);
}

#control-temperature-left {
  --x: 34px;
  --y: 33px;
}

#control-temperature-right {
  --x: 168px;
  --y: 33px;
}

#led-temperature-left {
  --x: 41px;
  --y: 53px;
}

#led-temperature-right {
  --x: 181px;
  --y: 53px;
}

#control-livingRoom-left {
  --x: 34px;
  --y: 86px;
}

#control-livingRoom-right {
  --x: 168px;
  --y: 86px;
}

#led-livingRoom-left {
  --x: 41px;
  --y: 109px;
}

#led-livingRoom-right {
  --x: 181px;
  --y: 109px;
}

#label-livingRoom {
  --x: 62px;
  --y: 86px;
}

#control-kitchen-left {
  --x: 34px;
  --y: 141px;
}

#control-kitchen-right {
  --x: 168px;
  --y: 141px;
}

#led-kitchen-left {
  --x: 41px;
  --y: 164px;
}

#led-kitchen-right {
  --x: 181px;
  --y: 164px;
}

#label-kitchen {
  --x: 62px;
  --y: 141px;
}

#control-bedroom-left {
  --x: 34px;
  --y: 241px;
}

#control-bedroom-right {
  --x: 168px;
  --y: 241px;
}

#led-bedroom-left {
  --x: 41px;
  --y: 262px;
}

#led-bedroom-right {
  --x: 181px;
  --y: 262px;
}

#label-bedroom {
  --x: 62px;
  --y: 241px;
}

#control-allLights-left {
  --x: 34px;
  --y: 294px;
}

#control-allLights-right {
  --x: 168px;
  --y: 294px;
}

#led-allLights-left {
  --x: 41px;
  --y: 318px;
}

#led-allLights-right {
  --x: 181px;
  --y: 318px;
}

#label-allLights {
  --x: 62px;
  --y: 294px;
}

#control-shutter-left {
  --x: 34px;
  --y: 349px;
}

#control-shutter-right {
  --x: 168px;
  --y: 349px;
}

#led-shutter-left {
  --x: 41px;
  --y: 373px;
}

#led-shutter-right {
  --x: 181px;
  --y: 373px;
}

#label-shutter {
  --x: 62px;
  --y: 349px;
}

@keyframes knxLedPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (max-width: 720px) {
  .knx-control {
    width: 54px;
    height: 38px;
  }

  .knx-temperature-display {
    min-width: 92px;
    min-height: 38px;
    font-size: 17px;
  }

  .knx-lamp {
    width: var(--lamp-size);
    height: var(--lamp-size);
  }
}