/* PlanITarium Missionsprotokolle – gemeinsame Darstellung aller Kategorien.
 * Kaskadenreihenfolge und notwendige DIVI-Overrides bleiben erhalten. */
.missionprotocol {
  /* Direkte DIVI-Anbindung: dieselben Größen vor und nach dem Skriptstart.
     Die Fallbacks entsprechen den aktuellen responsiven DIVI-Werten. */
  --mp-heading-font: var(--et_global_heading_font, "Titan One", sans-serif);
  --mp-body-font: var(
    --et_global_body_font,
    "Open Sans 600",
    "Open Sans",
    Arial,
    sans-serif
  );
  --mp-size-2xl: var(
    --gvid-vozybrac3y,
    clamp(1.4238rem, calc(0.00998 * (100vw - 360px) + 22.7813px), 2.1973rem)
  );
  --mp-size-m: var(
    --gvid-48t2c1aj5b,
    clamp(1rem, calc(0.001613 * (100vw - 360px) + 16px), 1.125rem)
  );
  --mp-heading-weight: 300;
  --mp-heading-line-height: 1.1;
  --mp-body-weight: 600;
  --mp-body-line-height: 1.6;
  --mp-accent: #67b440;
  --mp-accent-rgb: 103, 180, 64;
  --mp-dark-green: #478c22;
  --mp-alert: #ff6868;
  --mp-alert-rgb: 255, 104, 104;
  --mp-white: #f6f6f6;
  --mp-muted: rgba(246, 246, 246, 0.72);
  --mp-line: rgba(246, 246, 246, 0.11);
  --mp-frame-height: 500px;
  --mp-bar-height: 60px;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--mp-white);
  font-family: var(--mp-body-font) !important;
}

.missionprotocol *,
.missionprotocol *::before,
.missionprotocol *::after {
  box-sizing: border-box;
  letter-spacing: normal !important;
}

.missionprotocol p,
.missionprotocol h3,
.missionprotocol ul,
.missionprotocol ol {
  margin: 0 !important;
  padding: 0 !important;
}
.missionprotocol button,
.missionprotocol a,
.missionprotocol li,
.missionprotocol p,
.missionprotocol span {
  font-family: var(--mp-body-font) !important;
}

.mp-screen {
  position: relative;
  display: grid !important;
  grid-template-rows: var(--mp-bar-height) minmax(0, 1fr) !important;
  width: 100% !important;
  height: var(--mp-frame-height) !important;
  min-height: var(--mp-frame-height) !important;
  max-height: var(--mp-frame-height) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(
    rgba(24, 24, 24, 0.6),
    rgba(16, 16, 16, 0.6)
  ) !important;
  box-shadow: 0 8px 10px rgba(51, 51, 51, 0.2) !important;
  isolation: isolate;
  transition: box-shadow 0.3s ease !important;
}

.mp-screen::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 6px,
    rgba(246, 246, 246, 0.018) 7px
  );
  content: "";
  opacity: 0.16;
}

.mp-screen:hover,
.mp-screen:active,
.mp-screen.is-tapped {
  box-shadow: 0 8px 30px rgba(136, 136, 136, 0.35) !important;
}

.mp-screenbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--mp-bar-height) !important;
  min-height: var(--mp-bar-height) !important;
  max-height: var(--mp-bar-height) !important;
  padding: 0 27px;
  border-bottom: 1px solid var(--mp-line);
  text-align: center;
}

.mp-screen-title {
  display: block !important;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--mp-alert) !important;
  font-family: var(--mp-body-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.missionprotocol.is-running .mp-screen-title,
.missionprotocol.is-complete .mp-screen-title {
  color: var(--mp-accent) !important;
}

.mp-viewport {
  display: grid !important;
  place-items: stretch center !important;
  width: 100%;
  height: calc(var(--mp-frame-height) - var(--mp-bar-height)) !important;
  min-height: 0 !important;
  max-height: calc(var(--mp-frame-height) - var(--mp-bar-height)) !important;
  padding: 8px 28px;
  overflow: hidden !important;
}

.mp-panel {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-rows: 70px 48px minmax(142px, 1fr) 90px;
  gap: 6px;
  align-content: stretch;
  align-self: stretch;
  width: min(1040px, 100%);
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  padding: 4px 0 8px;
  text-align: center;
  isolation: isolate;
  animation: mp-panel-in 0.42s ease both;
}

.mp-panel[hidden] {
  display: none !important;
}

.mp-panel > :not(.mp-mark) {
  position: relative;
  z-index: 1;
}

.mp-panel h3 {
  grid-row: 1;
  align-self: center;
  color: var(--mp-white) !important;
  font-family: var(--mp-heading-font) !important;
  font-size: clamp(38px, 3.35vw, 48px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.08 !important;
  text-align: center;
}

.mp-ist h3 {
  color: var(--mp-alert) !important;
  text-shadow: 0 0 20px rgba(var(--mp-alert-rgb), 0.14);
}

.mp-result h3 {
  color: var(--mp-accent) !important;
  text-shadow: 0 0 20px rgba(var(--mp-accent-rgb), 0.15);
}

.mp-lead {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  max-width: 900px;
  color: var(--mp-white) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  text-align: center;
}

.mp-mobile-break {
  display: none;
}

.mp-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 480px;
  height: 480px;
  border: 8px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.12;
  transform: translate(-50%, -50%);
}

.mp-mark::before {
  color: currentColor;
  font-size: 190px;
  font-weight: 400;
  line-height: 1;
}

.mp-mark--alert {
  color: var(--mp-alert);
  filter: drop-shadow(0 0 18px rgba(var(--mp-alert-rgb), 0.24));
}

.mp-mark--alert::before {
  content: "!";
}

.mp-mark--success {
  color: var(--mp-accent);
  filter: drop-shadow(0 0 18px rgba(var(--mp-accent-rgb), 0.24));
}

.mp-mark--success::before {
  content: "✓";
  font-size: 145px;
}

.mp-list {
  grid-row: 3;
  align-self: center;
  justify-self: center !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 66px;
  gap: 10px;
  width: min(1040px, 100%);
  height: 142px;
  margin: 0 auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  list-style: none !important;
}

.mp-list li {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 66px;
  min-height: 66px;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 1px solid rgba(246, 246, 246, 0.09);
  border-radius: 14px;
  background: rgba(246, 246, 246, 0.015);
  color: var(--mp-white) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  text-align: center;
}

.mp-findings li > span,
.mp-wins li > span,
.mp-task-copy {
  min-width: 0;
  overflow-wrap: normal;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: normal;
}

.mp-findings li {
  border-color: rgba(var(--mp-alert-rgb), 0.2);
  background: rgba(var(--mp-alert-rgb), 0.025);
}

.mp-findings li::before,
.mp-wins li::before {
  justify-self: center;
  display: block;
  width: 19px;
  height: 19px;
  content: "";
}

.mp-findings li::before {
  background:
    linear-gradient(
      45deg,
      transparent 44%,
      var(--mp-alert) 45%,
      var(--mp-alert) 55%,
      transparent 56%
    ),
    linear-gradient(
      -45deg,
      transparent 44%,
      var(--mp-alert) 45%,
      var(--mp-alert) 55%,
      transparent 56%
    );
}

.mp-wins li {
  border-color: rgba(var(--mp-accent-rgb), 0.24);
  background: rgba(var(--mp-accent-rgb), 0.035);
}

.mp-wins li::before {
  width: 10px;
  height: 16px;
  border-right: 3px solid var(--mp-accent);
  border-bottom: 3px solid var(--mp-accent);
  transform: rotate(42deg);
}

.mp-tasks li {
  grid-template-columns: 21px minmax(0, 1fr) auto;
  color: var(--mp-white) !important;
  transition:
    color 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.mp-tasks li::before {
  justify-self: center;
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(246, 246, 246, 0.28);
  border-radius: 50%;
  background: transparent;
  content: "";
  transition: 0.28s ease;
}

.mp-tasks li.is-active {
  border-color: rgba(var(--mp-accent-rgb), 0.34);
  background: rgba(var(--mp-accent-rgb), 0.055);
  color: var(--mp-white) !important;
}

.mp-tasks li.is-done {
  color: var(--mp-white) !important;
}

.mp-tasks li.is-active::before {
  border-color: var(--mp-accent);
  background: var(--mp-accent);
  box-shadow: 0 0 11px rgba(var(--mp-accent-rgb), 0.5);
}

.mp-tasks li.is-done::before {
  border-color: rgba(var(--mp-accent-rgb), 0.75);
  background: rgba(var(--mp-accent-rgb), 0.42);
}

.mp-task-copy {
  min-width: 0;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.34 !important;
  overflow-wrap: normal;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: normal;
}

.mp-task-state {
  color: rgba(246, 246, 246, 0.28) !important;
  font-family: var(--mp-body-font) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  line-height: 1;
}

.mp-tasks li.is-active .mp-task-state,
.mp-tasks li.is-done .mp-task-state {
  color: var(--mp-accent) !important;
}

.mp-actions,
.mp-progress {
  grid-row: 4;
}

.mp-actions {
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-rows: 36px 36px;
  gap: 14px;
  place-items: center;
  width: 100%;
  height: 86px;
}

.mp-action-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  color: var(--mp-white) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center;
}

body .missionprotocol .mp-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 7px 14px !important;
  border: 2px solid var(--mp-accent) !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mp-accent) !important;
  -webkit-text-fill-color: var(--mp-accent) !important;
  font-family: var(--mp-body-font) !important;
  font-size: var(--text-s, 14px) !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  filter: none !important;
  transform: none !important;
  transition:
    transform 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease !important;
}

body .missionprotocol .mp-button::before,
body .missionprotocol .mp-button::after {
  display: none !important;
  content: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body .missionprotocol .mp-button:hover {
    border-color: var(--mp-accent) !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow:
      0 0 8px rgba(var(--mp-accent-rgb), 0.42),
      0 0 18px rgba(var(--mp-accent-rgb), 0.16) !important;
    color: var(--mp-accent) !important;
    -webkit-text-fill-color: var(--mp-accent) !important;
    transform: scale(1.01875) !important;
  }
}

body .missionprotocol .mp-button:focus-visible,
body .missionprotocol .mp-button:active {
  border-color: var(--mp-accent) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--mp-accent) !important;
  -webkit-text-fill-color: var(--mp-accent) !important;
  outline: none !important;
  transform: scale(1.01875) !important;
}

.mp-restart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--mp-muted) !important;
  line-height: 0 !important;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease !important;
}

.mp-restart svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.mp-restart:hover,
.mp-restart:focus-visible {
  background: rgba(var(--mp-accent-rgb), 0.12) !important;
  color: var(--mp-accent) !important;
  outline: none;
  transform: rotate(-22deg);
}

.mp-restart:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--mp-accent-rgb), 0.42) !important;
}

.mp-progress {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(900px, 100%);
  height: 72px;
  overflow: visible;
}

.mp-progress::before,
.mp-progress-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 24px;
  border-radius: 999px;
  content: "";
}

.mp-progress::before {
  right: 0;
  z-index: 0;
  border: 1px solid rgba(var(--mp-accent-rgb), 0.42);
  background: rgba(var(--mp-accent-rgb), 0.1);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(var(--mp-accent-rgb), 0.08);
}

.mp-progress-fill {
  z-index: 1;
  display: block;
  width: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--mp-accent-rgb), 0.34),
    rgba(var(--mp-accent-rgb), 0.76)
  );
  box-shadow: 0 0 24px rgba(var(--mp-accent-rgb), 0.28);
}

.mp-progress-percent {
  position: absolute;
  right: 16px;
  bottom: 5px;
  z-index: 4;
  color: var(--mp-white) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: normal !important;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

.mp-ufo {
  position: absolute;
  bottom: 27px;
  left: 0;
  z-index: 2;
  display: block;
  width: 112px;
  height: 63px;
  background: url("/wp-content/uploads/2026/03/Logo-480x270.png") center /
    contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(246, 246, 246, 0.2));
  transform: translateX(0);
  will-change: left, transform;
}

.mp-ufo::before {
  display: none;
}

.mp-ufo::after {
  display: none;
}

@keyframes mp-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 800px) {
  .missionprotocol {
    --mp-frame-height: 560px;
    --mp-bar-height: 52px;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin-right: calc(50% - 50vw + 8px) !important;
    margin-left: calc(50% - 50vw + 8px) !important;
  }

  .mp-screenbar {
    padding: 0 12px;
  }

  .mp-screen-title {
    font-size: 10.5px !important;
    letter-spacing: normal !important;
  }

  .mp-viewport {
    padding: 14px 18px 16px;
  }

  .mp-panel {
    grid-template-rows: 40px 54px minmax(214px, 1fr) 86px;
    gap: 6px;
    padding: 4px 0 2px;
  }

  .mp-panel h3 {
    font-size: clamp(20px, 6.2vw, 27px) !important;
    line-height: 1.08 !important;
    white-space: nowrap;
  }

  .mp-lead {
    max-width: 430px;
    font-size: 14.5px !important;
    line-height: 1.42 !important;
  }

  .mp-mobile-break {
    display: block;
  }

  .mp-mark {
    width: min(62vw, 230px);
    height: min(62vw, 230px);
    border-width: 5px;
  }

  .mp-mark::before {
    font-size: 95px;
  }

  .mp-mark--success::before {
    font-size: 74px;
  }

  .mp-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, 49px);
    grid-auto-rows: 49px;
    gap: 5px;
    width: 100%;
    height: 211px;
  }

  .mp-list li {
    height: 49px;
    min-height: 49px;
    padding: 0 10px !important;
    border-radius: 11px;
    font-size: clamp(11.5px, 3.25vw, 14px) !important;
    line-height: 1.34 !important;
  }

  .mp-list li > span,
  .mp-task-copy {
    text-align: center !important;
  }

  .mp-findings li,
  .mp-wins li {
    grid-template-columns: 17px minmax(0, 1fr);
    gap: 9px;
  }

  .mp-tasks li {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .mp-task-copy {
    font-size: clamp(11.5px, 3.25vw, 14px) !important;
    line-height: 1.34 !important;
  }

  .mp-task-state {
    font-size: 9.5px !important;
  }

  .mp-action-note {
    font-size: 14.5px !important;
  }

  body .missionprotocol .mp-button {
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .mp-progress {
    width: min(390px, 100%);
    height: 60px;
  }

  .mp-progress::before,
  .mp-progress-fill {
    height: 14px;
  }

  .mp-progress-percent {
    right: 11px;
    bottom: 3px;
    font-size: 11px !important;
  }

  .mp-ufo {
    bottom: 17px;
    width: 86px;
    height: 48px;
  }

  .mp-ufo::before {
    display: none;
  }

  .mp-ufo::after {
    display: none;
  }
}

@media (max-width: 380px) {
  .mp-viewport {
    padding-right: 14px;
    padding-left: 14px;
  }

  .mp-panel h3 {
    font-size: clamp(18px, 5.7vw, 22px) !important;
  }

  .mp-lead,
  .mp-action-note {
    font-size: 13.5px !important;
  }

  .mp-list li,
  .mp-task-copy {
    font-size: clamp(10.5px, 3.05vw, 11.6px) !important;
  }

  .mp-task-state {
    font-size: 8.5px !important;
  }

  body .missionprotocol .mp-button {
    padding-right: 11px !important;
    padding-left: 11px !important;
    font-size: 12px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mp-screen:hover {
    box-shadow: 0 8px 10px rgba(51, 51, 51, 0.2) !important;
  }

  .mp-screen:active,
  .mp-screen.is-tapped {
    box-shadow: 0 8px 30px rgba(136, 136, 136, 0.35) !important;
  }
}
.missionprotocol .mp-screen-title,
.missionprotocol .mp-lead,
.missionprotocol .mp-list li,
.missionprotocol .mp-task-copy,
.missionprotocol .mp-action-note {
  font-family: var(--mp-body-font) !important;
  font-size: var(--mp-size-m) !important;
  font-weight: var(--mp-body-weight) !important;
  line-height: var(--mp-body-line-height) !important;
}

.missionprotocol .mp-panel h3 {
  font-family: var(--mp-heading-font) !important;
  font-size: var(--mp-size-2xl) !important;
  font-weight: var(--mp-heading-weight) !important;
  line-height: var(--mp-heading-line-height) !important;
}
@media (max-width: 800px) {
  .missionprotocol .mp-viewport {
    padding: 12px 16px 14px;
  }
  .missionprotocol .mp-mark {
    display: none !important;
  }

  .missionprotocol .mp-panel {
    grid-template-rows: 72px 54px minmax(230px, 1fr) 94px;
    gap: 4px;
    padding: 0;
  }

  .missionprotocol .mp-panel h3 {
    width: 100%;
    max-width: 100%;
    padding: 0 4px !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
    text-align: center !important;
    text-wrap: balance;
    white-space: normal !important;
    word-break: normal;
  }

  .missionprotocol .mp-lead {
    width: 100%;
    max-width: 100%;
    padding: 0 4px !important;
    line-height: 1.4 !important;
    overflow-wrap: normal;
    text-align: center !important;
    text-wrap: balance;
    white-space: normal !important;
    word-break: normal;
  }

  .missionprotocol .mp-list {
    grid-template-rows: repeat(4, 55px);
    grid-auto-rows: 55px;
    gap: 5px;
    width: 100%;
    height: 235px;
  }

  .missionprotocol .mp-list li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    height: 55px;
    min-height: 55px;
    padding: 5px 11px !important;
    overflow: hidden;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .missionprotocol .mp-findings li > span,
  .missionprotocol .mp-wins li > span,
  .missionprotocol .mp-task-copy {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: normal;
    line-height: 1.25 !important;
    text-align: center !important;
    text-wrap: balance;
    white-space: normal !important;
    word-break: normal;
  }

  .missionprotocol .mp-findings li::before,
  .missionprotocol .mp-wins li::before,
  .missionprotocol .mp-tasks li::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    justify-self: auto;
    margin: 0;
    pointer-events: none;
    opacity: 0.22;
  }

  .missionprotocol .mp-findings li::before {
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
  }

  .missionprotocol .mp-wins li::before {
    width: 22px;
    height: 34px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    transform: translate(-50%, -59%) rotate(42deg);
  }

  .missionprotocol .mp-tasks li::before {
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
  }

  .missionprotocol .mp-tasks .mp-task-copy {
    padding: 0 24px !important;
  }

  .missionprotocol .mp-task-state {
    position: absolute;
    right: 7px;
    bottom: 3px;
    z-index: 1;
    width: auto;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  .missionprotocol .mp-actions {
    grid-template-rows: 48px 38px;
    gap: 8px;
    height: 94px;
  }

  .missionprotocol .mp-action-note {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 0 4px !important;
    line-height: 1.35 !important;
    overflow-wrap: normal;
    text-align: center !important;
    text-wrap: balance;
    white-space: normal !important;
    word-break: normal;
  }
}

@media (max-width: 380px) {
  .missionprotocol .mp-viewport {
    padding-right: 12px;
    padding-left: 12px;
  }

  .missionprotocol .mp-panel h3 {
    font-size: clamp(22px, 7.5vw, var(--mp-size-2xl)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .missionprotocol *,
  .missionprotocol *::before,
  .missionprotocol *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}