/* ===================================================================
   vialytics module: Final CTA Dark  (vlt-final-cta)
   All themable values come from --vlt-final-cta-* variables set
   inline on the block, so markets can override them centrally.
   =================================================================== */

.vlt-final-cta {
  width: 100%;
  box-sizing: border-box;
  padding: var(--vlt-final-cta-pad-top) 24px var(--vlt-final-cta-pad-bottom);
  font-family: Roboto, Arial, sans-serif;
}
.vlt-final-cta *,
.vlt-final-cta *::before,
.vlt-final-cta *::after { box-sizing: border-box; }

.vlt-final-cta__inner {
  width: 100%;
  max-width: var(--vlt-final-cta-max-width);
  margin: 0 auto;
}

/* ---- Card ---------------------------------------------------------- */
.vlt-final-cta__card {
  position: relative;
  overflow: hidden;
  background: var(--vlt-final-cta-card-bg);
  color: var(--vlt-final-cta-text);
  border-radius: var(--vlt-final-cta-radius);
  padding: 80px 48px;
  text-align: center;
  container-type: inline-size; /* lets the watermark scale with the card width */
}

/* ---- Watermark (decorative) ---------------------------------------- */
.vlt-final-cta__watermark {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(22px, 8vw, 110px); /* fallback for older browsers */
  font-weight: 900;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--vlt-final-cta-text);
  opacity: 0.035;
  user-select: none;
  pointer-events: none;
}

/* Scale to the card itself: ~9% of the card width per character height
   keeps "#BESSERESTRASSEN" fully inside the card on every screen. */
@supports (font-size: 1cqw) {
  .vlt-final-cta__watermark {
    font-size: clamp(16px, 9cqw, 110px);
  }
}

/* ---- Content ------------------------------------------------------- */
.vlt-final-cta__content {
  position: relative; /* above the watermark */
}

.vlt-final-cta__title {
  margin: 0 0 18px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--vlt-final-cta-text);
  overflow-wrap: anywhere;
}

.vlt-final-cta__text {
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--vlt-final-cta-muted);
  overflow-wrap: anywhere;
}
/* Explicit color on p/li/span: theme rules targeting bare `p` would
   otherwise beat the inherited light color on the dark card. */
.vlt-final-cta__text p,
.vlt-final-cta__text li,
.vlt-final-cta__text span {
  color: var(--vlt-final-cta-muted);
}
.vlt-final-cta__text p { margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
.vlt-final-cta__text p:last-child { margin-bottom: 0; }
.vlt-final-cta__text a { color: var(--vlt-final-cta-accent); }

/* ---- Buttons ------------------------------------------------------- */
.vlt-final-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.vlt-final-cta__btn {
  display: inline-block;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform 200ms ease;
}

.vlt-final-cta__btn--primary {
  background: var(--vlt-final-cta-accent);
  color: #222D39;
}

.vlt-final-cta__btn--secondary {
  background: transparent;
  border: 2px solid var(--vlt-final-cta-text);
  color: var(--vlt-final-cta-text);
}

/* Keep button text color stable on hover/focus/active:
   theme-level `a:hover` rules would otherwise recolor the label
   (yellow on yellow = invisible). */
.vlt-final-cta__btn--primary:hover,
.vlt-final-cta__btn--primary:focus,
.vlt-final-cta__btn--primary:active {
  color: #222D39;
  text-decoration: none;
}
.vlt-final-cta__btn--secondary:hover,
.vlt-final-cta__btn--secondary:focus,
.vlt-final-cta__btn--secondary:active {
  color: var(--vlt-final-cta-text);
  text-decoration: none;
}

/* Hover scale – only when enabled via boolean field */
.vlt-final-cta--hover .vlt-final-cta__btn:hover {
  transform: scale(1.03);
}

/* Visible focus on dark background */
.vlt-final-cta__btn:focus-visible {
  outline: 3px solid var(--vlt-final-cta-accent);
  outline-offset: 3px;
}

/* ---- Note ----------------------------------------------------------- */
.vlt-final-cta__note {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--vlt-final-cta-muted);
  opacity: 0.75;
}

/* ---- Fade-in on scroll (only when enabled) -------------------------- */
.vlt-final-cta--animated .vlt-final-cta__card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.vlt-final-cta--animated.is-visible .vlt-final-cta__card {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 991px) {
  .vlt-final-cta__card { padding: 64px 36px; }
}
@media (max-width: 767px) {
  .vlt-final-cta { padding-left: 16px; padding-right: 16px; }
  .vlt-final-cta__card { padding: 48px 24px; }
  .vlt-final-cta__buttons { flex-direction: column; align-items: stretch; }
  .vlt-final-cta__btn { width: 100%; text-align: center; }
}

/* ---- Editor: never hide content while editing ------------------------ */
.hs-editor .vlt-final-cta--animated .vlt-final-cta__card {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vlt-final-cta * { transition: none !important; animation: none !important; }
  .vlt-final-cta--animated .vlt-final-cta__card { opacity: 1 !important; transform: none !important; }
}