/**
 * Join Startseite (#slide2): fluid Layout + Footer/Cookie-Umschaltung
 * Breit: CCM-Badge unten links, Datenschutz/Impressum darunter, kein Wort „Cookie“
 * Handy: Badge weg, Footer unter dem Kasten mit Datenschutz | Cookie | Impressum
 */

/* --- Gemeinsam (alle Größen) --- */
body.join-at-slide2 #slide2 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: rgba(10, 24, 48, 0.25) !important;
  z-index: 100 !important;
}

/* Kopf: join-header.css */

body.join-at-slide2 #slide2 > .slider-bg-row {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(4px, 1.2vw, 16px) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

body.join-at-slide2 #slide2 .slider-bg-img {
  flex: 0 0 auto !important;
  width: clamp(44px, 6.5vw, 140px) !important;
  min-width: clamp(40px, 5vw, 120px) !important;
  max-width: none !important;
  height: clamp(72px, 38dvh, 420px) !important;
  min-height: clamp(64px, 22dvh, 200px) !important;
  max-height: 45dvh !important;
  object-fit: cover !important;
  opacity: 0;
  transform: translateY(60px);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}

body.join-at-slide2 #slide2 .slider-bg-img.animate-bg {
  transform: translateY(0) !important;
  opacity: 0.85 !important;
}

body.join-at-slide2 #slide2 .slider-bg-img {
  max-width: none !important;
}

body.join-at-slide2 #slide2 .slider-center-stack,
body.join-at-slide2 #slide2 .slider-textbox,
body.join-at-slide2 #slide2 .slider-btn,
body.join-at-slide2 #slide2 .footer-links--slide2,
body.join-at-slide2 #slide2 .footer-links--slide2 a {
  pointer-events: auto !important;
}

body.join-at-slide2 #slide2 .slider-textbox h2 {
  font-size: clamp(0.9rem, 3.6vw, 2.5rem) !important;
  font-weight: 700 !important;
  margin-bottom: clamp(10px, 2.5vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: clamp(0.5px, 0.35vw, 2.5px) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Erste Zeile wie ueberall: „Surround yourself“ nicht umbrechen */
body.join-at-slide2 #slide2 .slider-textbox h2 .join-slide-line-first,
body.join-at-slide2 #slide2 .join-slide-line-first {
  white-space: nowrap !important;
}

/* Schlüsselwörter gelb wie Meet (#e6f14a) */
body.join-at-slide2 #slide2 .slider-textbox h2 .highlight,
#step .welcome-box h1 .highlight {
  color: #e6f14a !important;
  font-weight: 700 !important;
}

body.join-at-slide2 #slide2 .slider-btn {
  font-size: clamp(0.72rem, 2.1vw, 1.1rem) !important;
  padding: clamp(6px, 1.4vw, 12px) clamp(14px, 3vw, 32px) !important;
  border-radius: clamp(18px, 4vw, 30px) !important;
}

/* --- Breit (PC / großes Fenster): Kasten mittig, Footer links unter CCM-Badge --- */
body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 > .slider-center-stack {
  display: contents !important;
  position: static !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-textbox {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  min-width: min(88vw, 520px) !important;
  max-width: min(92vw, 640px) !important;
  /* Wie Handy: wenig vw – sonst oben/unten riesig leer (7vw ≈ 100px auf großem Monitor) */
  padding: clamp(16px, 3.5vh, 32px) clamp(12px, 2.8vw, 44px) clamp(14px, 3vh, 26px) !important;
  box-sizing: border-box !important;
  border-radius: clamp(14px, 3vw, 28px) !important;
  z-index: 2 !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-textbox h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  margin-bottom: clamp(10px, 2vh, 18px) !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .footer-links--slide2 {
  display: none !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) .main-container > .footer-links {
  display: flex !important;
  visibility: visible !important;
  position: fixed !important;
  left: max(15px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  transform: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: clamp(10px, 1.5vw, 15px) !important;
  width: auto !important;
  max-width: min(90vw, 480px) !important;
  margin: 0 !important;
  padding: 0 0 0 2px !important;
  z-index: 1100 !important;
  pointer-events: auto !important;
  text-align: left !important;
  font-size: clamp(11px, 1.4vw, 1rem) !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) .main-container > .footer-links a {
  font-size: inherit !important;
  padding: 0.4rem !important;
  white-space: nowrap !important;
}

body.join-at-slide2:not(.join-slide2-footer-compact) #footer-cookie-link,
body.join-at-slide2:not(.join-slide2-footer-compact) .main-container > .footer-links .footer-cookie-link {
  display: none !important;
}

/* --- Handy Hochformat: Streifen höher als Box → oben/unten sichtbar, seitlich angeschnitten --- */
body.join-at-slide2.join-slide2-footer-compact #slide2 > .slider-bg-row {
  position: absolute !important;
  top: 44% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  width: max-content !important;
  max-width: min(96vw, 720px) !important;
  overflow: visible !important;
  gap: clamp(4px, 1vw, 10px) !important;
  /* Nur unten leicht ausblenden (vor Footer), nicht den ganzen Streifen */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%) !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .slider-bg-img {
  flex: 0 0 auto !important;
  width: clamp(46px, 11vw, 68px) !important;
  min-width: 46px !important;
  max-width: 68px !important;
  /* Mindesthöhe in px: sonst verschwindet alles hinter der Box */
  height: clamp(140px, 34dvh, 230px) !important;
  min-height: 140px !important;
  max-height: min(38dvh, 230px) !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 > .slider-center-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(90vw, 360px) !important;
  max-width: 90vw !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .slider-textbox {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: clamp(16px, 4.5vw, 28px) clamp(10px, 3vw, 16px) clamp(14px, 3.5vw, 22px) !important;
  box-sizing: border-box !important;
  border-radius: clamp(14px, 3vw, 28px) !important;
  z-index: 2 !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .slider-textbox h2 {
  font-size: clamp(1.05rem, 5.2vw, 1.55rem) !important;
  margin-bottom: clamp(10px, 2.8vw, 18px) !important;
  line-height: 1.22 !important;
  letter-spacing: clamp(0.5px, 0.25vw, 1.2px) !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .slider-btn {
  font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
  padding: clamp(6px, 1.5vw, 10px) clamp(14px, 3.5vw, 22px) !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .footer-links--slide2 {
  display: flex !important;
  visibility: visible !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: clamp(8px, 2.5vw, 14px) !important;
  position: relative !important;
  width: 100% !important;
  margin: clamp(12px, 3.2vh, 22px) 0 0 0 !important;
  padding: 0 clamp(4px, 1vw, 8px) max(4px, env(safe-area-inset-bottom)) !important;
  z-index: 3 !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
}

body.join-at-slide2.join-slide2-footer-compact #slide2 .footer-links--slide2 .footer-cookie-link {
  display: inline !important;
}

body.join-at-slide2.join-slide2-footer-compact .main-container > .footer-links {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.join-at-slide2.join-slide2-footer-compact #ccm19Widget,
body.join-at-slide2.join-slide2-footer-compact #CCM19Widget,
body.join-at-slide2.join-slide2-footer-compact #ccm19widget,
body.join-at-slide2.join-slide2-footer-compact .ccm19-widget-launcher,
body.join-at-slide2.join-slide2-footer-compact .ccm-widget-icon,
body.join-at-slide2.join-slide2-footer-compact .ccm-widget-launcher,
body.join-at-slide2.join-slide2-footer-compact .ccm-cookie-banner-icon {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Media-Query = gleiche Schwelle wie script.js (echtes Handy / schmales Fenster) */
@media (max-width: 768px) {
  body.join-at-slide2 #slide2 > .slider-bg-row {
    position: absolute !important;
    top: 44% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
    width: max-content !important;
    max-width: min(96vw, 720px) !important;
    overflow: visible !important;
    gap: clamp(4px, 1vw, 10px) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%) !important;
  }

  body.join-at-slide2 #slide2 .slider-bg-img {
    flex: 0 0 auto !important;
    width: clamp(46px, 11vw, 68px) !important;
    min-width: 46px !important;
    max-width: 68px !important;
    height: clamp(140px, 34dvh, 230px) !important;
    min-height: 140px !important;
    max-height: min(38dvh, 230px) !important;
  }

  body.join-at-slide2 #slide2 > .slider-center-stack {
    width: min(90vw, 360px) !important;
    max-width: 90vw !important;
  }

  body.join-at-slide2 #slide2 .slider-textbox {
    padding: clamp(16px, 4.5vw, 28px) clamp(10px, 3vw, 16px) clamp(14px, 3.5vw, 22px) !important;
  }

  body.join-at-slide2 #slide2 .slider-textbox h2 {
    font-size: clamp(1.05rem, 5.2vw, 1.55rem) !important;
    margin-bottom: clamp(10px, 2.8vw, 18px) !important;
    line-height: 1.22 !important;
  }

  body.join-at-slide2 #slide2 .slider-btn {
    font-size: clamp(0.8rem, 3vw, 0.95rem) !important;
  }
}

@media (max-width: 768px), ((max-height: 620px) and (pointer: coarse)) {
  body.join-at-slide2 #slide2 > .slider-bg-row {
    position: absolute !important;
    z-index: 1 !important;
    width: max-content !important;
    max-width: min(88vw, 640px) !important;
    overflow: visible !important;
  }

  body.join-at-slide2 #slide2 > .slider-center-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    width: min(92vw, 380px) !important;
    max-width: 92vw !important;
    pointer-events: none !important;
  }

  body.join-at-slide2 #slide2 .slider-textbox {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.join-at-slide2 #slide2 .footer-links--slide2 {
    display: flex !important;
  }

  body.join-at-slide2 .main-container > .footer-links {
    display: none !important;
  }

  body.join-at-slide2 #ccm19Widget,
  body.join-at-slide2 #CCM19Widget,
  body.join-at-slide2 #ccm19widget,
  body.join-at-slide2 .ccm19-widget-launcher,
  body.join-at-slide2 .ccm-widget-icon,
  body.join-at-slide2 .ccm-widget-launcher,
  body.join-at-slide2 .ccm-cookie-banner-icon {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/*
 * Wenig Hoehe nur echtes Touch-Geraet (Handy quer) – nicht PC-Fenster flach
 */
@media (max-height: 620px) and (pointer: coarse) {
  body.join-at-slide2 #slide2 {
    padding: max(40px, calc(env(safe-area-inset-top) + 36px)) 6px max(4px, env(safe-area-inset-bottom)) 6px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  body.join-at-slide2 #slide2 > .slider-bg-row {
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    gap: clamp(3px, 0.5vw, 7px) !important;
    max-width: min(94vw, 720px) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%) !important;
  }

  body.join-at-slide2 #slide2 .slider-bg-img {
    width: clamp(34px, 4.8vw, 50px) !important;
    min-width: 34px !important;
    max-width: 50px !important;
    height: clamp(78px, 54dvh, 128px) !important;
    min-height: 78px !important;
    max-height: min(54dvh, 128px) !important;
  }

  body.join-at-slide2 #slide2 > .slider-center-stack {
    width: min(78vw, 320px) !important;
    max-width: 78vw !important;
  }

  body.join-at-slide2 #slide2 .slider-textbox {
    padding: clamp(12px, 3.5dvh, 18px) clamp(10px, 2.8vw, 14px) clamp(10px, 2.8dvh, 14px) !important;
    border-radius: clamp(10px, 2dvh, 18px) !important;
  }

  body.join-at-slide2 #slide2 .slider-textbox h2 {
    font-size: clamp(0.95rem, 4.8vw, 1.22rem) !important;
    margin-bottom: clamp(6px, 2dvh, 12px) !important;
    line-height: 1.18 !important;
    letter-spacing: clamp(0.4px, 0.2vw, 1px) !important;
  }

  body.join-at-slide2 #slide2 .slider-btn {
    font-size: clamp(0.72rem, 2.8vw, 0.88rem) !important;
    padding: clamp(5px, 1.2dvh, 8px) clamp(12px, 2.5vw, 16px) !important;
    margin-top: 0 !important;
  }

  body.join-at-slide2 #slide2 .footer-links--slide2 {
    margin-top: clamp(5px, 1.6dvh, 9px) !important;
    gap: clamp(6px, 2vw, 10px) !important;
    font-size: clamp(9px, 2.2dvh, 11px) !important;
    padding-bottom: 0 !important;
  }

}

/* PC: Fenster flach – gleiches Layout, nur sanft kleiner (kein Handy-Querformat-Sprung) */
@media (min-width: 769px) and (pointer: fine) and (max-height: 720px) {
  body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-textbox {
    padding: clamp(14px, 3.2vh, 28px) clamp(12px, 2.5vw, 40px) clamp(12px, 2.8vh, 24px) !important;
  }

  body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-textbox h2 {
    font-size: clamp(1.1rem, 2.6vw, 2.1rem) !important;
    margin-bottom: clamp(8px, 1.8vh, 16px) !important;
  }

  body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-btn {
    font-size: clamp(0.85rem, 1.8vw, 1rem) !important;
  }

  body.join-at-slide2:not(.join-slide2-footer-compact) #slide2 .slider-bg-img {
    height: clamp(64px, 36dvh, 280px) !important;
    min-height: clamp(56px, 28dvh, 160px) !important;
    max-height: min(40dvh, 280px) !important;
  }
}

/* CCM-Badge aus (Formular frueher ab 1024px, Startseite ab 768px) */
body.join-ccm-hide #ccm19Widget,
body.join-ccm-hide #CCM19Widget,
body.join-ccm-hide #ccm19widget,
body.join-ccm-hide .ccm19-widget-launcher,
body.join-ccm-hide .ccm-widget-icon,
body.join-ccm-hide .ccm-widget-launcher,
body.join-ccm-hide .ccm-cookie-banner-icon {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Formular: Footer-Woerter inkl. Cookie erst unter 600px (nicht schon bei Tablet 1180) */
html.join-layout-tablet body:not(.join-at-slide2):not(.join-footer-compact) #footer-cookie-link,
html.join-layout-tablet body:not(.join-at-slide2):not(.join-footer-compact) .footer-cookie-link,
html.join-layout-mobile body:not(.join-at-slide2):not(.join-footer-compact) #footer-cookie-link,
html.join-layout-mobile body:not(.join-at-slide2):not(.join-footer-compact) .footer-cookie-link,
body:not(.join-at-slide2):not(.join-footer-compact) #footer-cookie-link,
body:not(.join-at-slide2):not(.join-footer-compact) .main-container > .footer-links .footer-cookie-link {
  display: none !important;
}

body.join-footer-compact:not(.join-at-slide2) #footer-cookie-link,
body.join-footer-compact:not(.join-at-slide2) .main-container > .footer-links .footer-cookie-link,
html.join-layout-desktop body.join-footer-compact:not(.join-at-slide2) #footer-cookie-link,
html.join-layout-desktop body.join-footer-compact:not(.join-at-slide2) .footer-cookie-link,
html.join-layout-tablet body.join-footer-compact:not(.join-at-slide2) #footer-cookie-link,
html.join-layout-tablet body.join-footer-compact:not(.join-at-slide2) .footer-cookie-link {
  display: inline !important;
}

body.join-footer-compact:not(.join-at-slide2) .main-container > .footer-links {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}