/**
 * Meet Erfolgsseite (step8): nur sichtbar mit body.meet-on-success
 * (display:flex !important auf #step8 allein wuerde jQuery .hide() ueberschreiben)
 */

#step8 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.meet-on-success #step8 {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(8px, 2vh, 20px) clamp(10px, 3vw, 16px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body.meet-on-success header.meet-site-header,
body.meet-on-success .meet-site-header {
  position: relative !important;
  z-index: 12 !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
}

body.meet-on-success .main-container > .container-steps {
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

#step8 .meet-success-block {
  width: min(92vw, 640px) !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 2.8vh, 24px) !important;
  margin: 0 auto !important;
}

#step8 .meet-success-message {
  color: #fff !important;
  font-family: 'museo-sans', sans-serif !important;
  font-size: clamp(1rem, 4.2vw, 1.45rem) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.4px !important;
  margin: 0 !important;
  padding: 0 clamp(4px, 2vw, 12px) !important;
  text-align: center !important;
  text-transform: none !important;
}

#step8 #player,
#step8 .meet-success-player,
#step8 .meet-success-video {
  position: relative !important;
  width: 100% !important;
  max-width: min(92vw, 560px) !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: clamp(160px, 42vw, 280px) !important;
  overflow: hidden !important;
  border-radius: clamp(12px, 2vw, 18px) !important;
}

#step8 #player::before {
  display: none !important;
  content: none !important;
  padding: 0 !important;
}

#step8 #player video.meet-success-video-main {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: clamp(12px, 2vw, 18px) !important;
  background: rgba(10, 24, 48, 0.5) !important;
}

/* ATZ-Vorschau (atz.group Montage), bis Joscha-MP4 lokal liegt */
#step8 .meet-video-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: clamp(12px, 2vw, 18px) !important;
  border: 1.5px solid rgba(126, 182, 255, 0.85) !important;
  box-shadow:
    0 10px 40px rgba(8, 20, 48, 0.55),
    0 0 0 1px rgba(255, 242, 0, 0.12) inset !important;
  background: #0a1830 !important;
  box-sizing: border-box !important;
}

#step8 .meet-video-preview-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #0a1830 !important;
}

#step8 .meet-video-placeholder {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, rgba(30, 60, 110, 0.55), rgba(10, 24, 48, 0.75)) !important;
  border: 1.5px solid #7eb6ff !important;
  border-radius: clamp(12px, 2vw, 18px) !important;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.35) !important;
  box-sizing: border-box !important;
}

#step8 .meet-video-placeholder-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(8px, 1.5vh, 14px) !important;
  padding: clamp(16px, 4vw, 28px) !important;
  max-width: 90% !important;
}

#step8 .meet-video-placeholder-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(48px, 12vw, 72px) !important;
  height: clamp(48px, 12vw, 72px) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
  color: #fff !important;
  opacity: 0.9 !important;
}

#step8 .meet-video-placeholder p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'museo-sans', sans-serif !important;
  font-size: clamp(0.85rem, 3.2vw, 1rem) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

#step8 .meet-video-placeholder-name {
  font-family: 'museo-sans', sans-serif !important;
  font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important;
  font-weight: 600 !important;
  color: #fff200 !important;
  letter-spacing: 0.5px !important;
}

#step8 .btn {
  margin: 0 !important;
  font-size: clamp(0.85rem, 3vw, 1rem) !important;
  padding: clamp(8px, 1.5vw, 12px) clamp(18px, 4vw, 28px) !important;
}

/* Legacy-Klasse aus altem Markup */
#step8 .center-block {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}