/* Werkuna Laptop-, Tablet- und Smartphone-Rahmen */

.mkt-showcase-media-body.mkt-showcase-dashboard {
  position: relative;
  border: 1px solid rgba(93, 163, 255, 0.6) !important;
  border-radius: 18px !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(37, 126, 255, 0.16);
  transform: perspective(1400px) rotateY(-2deg);
  transform-origin: center center;
}

.mkt-showcase-media-body.mkt-showcase-dashboard::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(145, 199, 255, 0.45);
  border-radius: 22px;
  pointer-events: none;
  z-index: 10;
}

.mkt-showcase-media-body.mkt-showcase-dashboard::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -17px;
  height: 15px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #142a53, #071326);
  border: 1px solid rgba(119, 180, 255, 0.42);
  box-shadow: 0 13px 22px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 9;
}

/* Hero: eigenstaendiger Laptop statt Browserfenster */
.mkt-hero-media {
  position: relative;
  overflow: visible !important;
  padding: 10px 10px 12px;
  border: 1px solid rgba(104, 171, 255, 0.62) !important;
  border-radius: 16px 16px 10px 10px !important;
  background: linear-gradient(145deg, #17325c 0%, #0a1932 48%, #132b50 100%);
  box-shadow:
    0 30px 72px rgba(0, 0, 0, 0.46),
    0 0 40px rgba(37, 126, 255, 0.18),
    inset 0 1px 0 rgba(202, 227, 255, 0.18);
  transform: perspective(1400px) rotateY(-2deg);
  transform-origin: center center;
}

.mkt-hero-media::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #42658f;
  box-shadow: 0 0 0 1px #061228, 0 0 5px rgba(69, 143, 232, 0.62);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 12;
}

.mkt-hero-media::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -22px;
  height: 20px;
  border: 1px solid rgba(119, 180, 255, 0.46);
  border-top-color: rgba(173, 211, 255, 0.68);
  border-radius: 3px 3px 18px 18px;
  background:
    linear-gradient(90deg, transparent 38%, rgba(164, 205, 255, 0.28) 38%, rgba(164, 205, 255, 0.28) 62%, transparent 62%) top / 100% 3px no-repeat,
    linear-gradient(180deg, #1b365f 0%, #0a172d 72%, #071224 100%);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42);
  pointer-events: none;
  z-index: 9;
}

.mkt-hero-media-chrome {
  display: none !important;
}

.mkt-hero-media-body {
  overflow: hidden;
  border: 1px solid rgba(78, 133, 207, 0.36);
  border-radius: 8px;
}

.wk-device-stage {
  position: relative;
  overflow: visible !important;
}

.wk-device-cluster {
  position: absolute;
  z-index: 20;
  right: -26px;
  bottom: -42px;
  display: flex;
  align-items: end;
  gap: 18px;
  pointer-events: none;
}

.wk-device {
  position: relative;
  overflow: hidden;
  background: #07152d;
  border: 6px solid #142b51;
  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(44, 137, 255, 0.18);
}

.wk-device--tablet {
  width: 235px;
  height: 168px;
  padding: 6px;
  border-radius: 18px;
}

.wk-device--phone {
  width: 92px;
  height: 174px;
  padding: 5px;
  border-radius: 21px;
  border-width: 5px;
}

.wk-device--tablet::before,
.wk-device--phone::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: #27436e;
  transform: translateX(-50%);
  z-index: 2;
}

.wk-device__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: #081a39;
}

.wk-device__screen > * {
  box-sizing: border-box !important;
  max-width: none !important;
  transform-origin: top left !important;
}

.wk-device--tablet .wk-device__screen > * {
  width: 500px !important;
  height: 360px !important;
  transform: scale(0.42);
}

.wk-device--phone .wk-device__screen > * {
  width: 500px !important;
  height: 1060px !important;
  transform: scale(0.145);
}

@media (max-width: 1100px) and (min-width: 1025px) {
  .wk-device-cluster {
    right: 10px;
    bottom: -30px;
    transform: scale(0.86);
    transform-origin: bottom right;
  }
}

/* Unterhalb von Tablet-Breite ragt der abgesetzte Tablet-/Handy-Stapel
   (bewusst per negativem right/bottom-Versatz außerhalb der Karte
   positioniert, siehe .wk-device-cluster oben) über den Viewport-Rand
   hinaus und wird dort abgeschnitten. Da er rein dekorativ ist (die
   Kerninformation steht bereits in der Haupt-Dashboard-Karte), wird er
   hier ausgeblendet statt fehlerhaft abgeschnitten angezeigt. */
@media (max-width: 1024px) {
  .wk-device-cluster {
    display: none;
  }
}

@media (max-width: 760px) {
  .mkt-hero-media,
  .mkt-showcase-media-body.mkt-showcase-dashboard {
    transform: none;
  }

  .mkt-hero-media::after,
  .mkt-showcase-media-body.mkt-showcase-dashboard::after {
    bottom: -14px;
    height: 12px;
  }

  .mkt-hero-media {
    padding: 8px 8px 10px;
  }

  .mkt-hero-media::after {
    left: -3%;
    right: -3%;
  }
}