/* Anpassbare Bildmaße. */
.ssk-campaign {
  z-index: 2147483001 !important;
  visibility: hidden;
  pointer-events: none;
}

.ssk-campaign[hidden] {
  display: none !important;
}

.ssk-campaign.ssk-visible:not([hidden]) {
  visibility: visible;
  pointer-events: auto;
}

.ssk-campaign .ssk-image {
  width: var(--ssk-image-width, 35%);
}

.ssk-campaign.ssk-img-top .ssk-image {
  width: 100%;
  height: var(--ssk-image-height, 210px);
}

.ssk-campaign.ssk-img-background .ssk-image {
  width: auto;
}

.ssk-campaign .ssk-copy {
  padding: var(--ssk-copy-padding, 30px);
}

.ssk-campaign.ssk-modal {
  width: min(var(--ssk-popup-width, 560px), calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
}

/* Die sichtbare Animation darf die eigentliche Zentrierung nicht aufheben. */
.ssk-campaign.ssk-pos-center.ssk-visible {
  transform: translate(-50%, -50%) !important;
}

.ssk-campaign.ssk-pos-top-center.ssk-visible,
.ssk-campaign.ssk-pos-bottom-center.ssk-visible {
  transform: translateX(-50%) !important;
}

.ssk-campaign.ssk-pos-center.ssk-anim-slide:not(.ssk-visible) {
  transform: translate(-50%, calc(-50% + 30px));
}

.ssk-campaign.ssk-pos-center.ssk-anim-zoom:not(.ssk-visible) {
  transform: translate(-50%, -50%) scale(0.9);
}

.ssk-campaign.ssk-pos-top-center.ssk-anim-slide:not(.ssk-visible),
.ssk-campaign.ssk-pos-bottom-center.ssk-anim-slide:not(.ssk-visible) {
  transform: translate(-50%, 30px);
}

/* Separate Lightbox-Ebene, damit sie nicht vom Popup abgeschnitten wird. */
.ssk-campaign.ssk-modal::before {
  display: none;
}

.ssk-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000 !important;
  display: block;
  background: rgba(24, 12, 11, 0.76) !important;
  background: rgb(24 12 11 / var(--ssk-overlay-opacity, 76%)) !important;
  backdrop-filter: blur(var(--ssk-overlay-blur, 6px));
  -webkit-backdrop-filter: blur(var(--ssk-overlay-blur, 6px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
  cursor: pointer;
}

.ssk-overlay[hidden] {
  display: none !important;
}

.ssk-overlay.ssk-visible:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.ssk-modal-open,
html.ssk-modal-open body {
  overflow: hidden;
}

/* Der rechtlich notwendige Complianz-Dialog hat immer Vorrang. */
#cmplz-cookiebanner-container,
#cmplz-cookiebanner-container .cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-show {
  z-index: 2147483646 !important;
}

.ssk-campaign .ssk-button {
  color: var(--ssk-btn-color) !important;
}

/* Eigener, theme-unabhängiger Schließen-Button. */
.ssk-campaign button.ssk-close {
  appearance: none !important;
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #5a302d !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgb(55 31 28 / 24%) !important;
  cursor: pointer !important;
}

.ssk-campaign button.ssk-close span,
.ssk-campaign button.ssk-close span::before {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.ssk-campaign button.ssk-close span {
  transform: rotate(45deg);
}

.ssk-campaign button.ssk-close span::before {
  transform: rotate(90deg);
}

.ssk-campaign button.ssk-close:hover {
  background: #9a3f38 !important;
  transform: scale(1.06);
}

@media (max-width: 782px) {
  .ssk-campaign .ssk-image {
    width: var(--ssk-image-width, 42%);
  }

  .ssk-campaign.ssk-img-top .ssk-image {
    width: 100%;
    height: min(var(--ssk-image-height, 210px), 260px);
  }

  .ssk-campaign .ssk-copy {
    padding: min(var(--ssk-copy-padding, 30px), 28px);
  }

  .ssk-campaign.ssk-pos-center.ssk-visible,
  .ssk-campaign.ssk-pos-top-center.ssk-visible,
  .ssk-campaign.ssk-pos-bottom-center.ssk-visible {
    left: 15px !important;
    right: 15px !important;
    transform: none !important;
  }

  .ssk-campaign.ssk-modal.ssk-pos-center,
  .ssk-campaign.ssk-modal.ssk-pos-center.ssk-visible {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Auf schmalen Bildschirmen wird das Bild vollständig und platzsparend gezeigt. */
@media (max-width: 620px) {
  .ssk-campaign.ssk-modal.ssk-img-side-left,
  .ssk-campaign.ssk-modal.ssk-img-side-right {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ssk-campaign.ssk-modal.ssk-img-side-left .ssk-image,
  .ssk-campaign.ssk-modal.ssk-img-side-right .ssk-image {
    width: 100% !important;
    height: clamp(110px, 24vh, 165px);
    height: clamp(110px, 24dvh, 165px);
    min-height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ssk-campaign.ssk-modal .ssk-copy {
    padding: 20px 22px 22px;
  }

  .ssk-campaign.ssk-modal .ssk-copy h2 {
    font-size: 21px !important;
  }
}

/* Auch bei niedrigen Desktopfenstern darf das Bild das Popup nicht sprengen. */
@media (max-height: 700px) and (min-width: 621px) {
  .ssk-campaign.ssk-modal {
    overflow-y: auto;
  }

  .ssk-campaign.ssk-modal.ssk-img-side-left .ssk-image,
  .ssk-campaign.ssk-modal.ssk-img-side-right .ssk-image {
    width: clamp(105px, 28%, 145px) !important;
    min-height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ssk-campaign.ssk-modal .ssk-copy {
    padding: 20px 22px;
  }
}