/**
 * Join Formular: PC-Layout durchgehend, proportional skaliert (wie Startseite fluid).
 * Kein Tablet-/Querformat-Sonderlayout. Footer breit: unten links; schmal: unter Kasten.
 */

/* Scroll + Kopf: join-header.css */

/* Handy quer: Kasten mittig + 2 Spalten (Header: join-header.css) */
@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  body.join-form-fluid,
  body:not(.join-at-slide2) {
    display: block !important;
    align-items: stretch !important;
  }

  body.join-form-fluid .main-container,
  body:not(.join-at-slide2) .main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: max(4px, env(safe-area-inset-top)) clamp(8px, 2vw, 16px) max(18px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  body.join-form-fluid .container-steps,
  body.join-form-fluid #user-info,
  body:not(.join-at-slide2) .container-steps,
  body:not(.join-at-slide2) #user-info {
    width: 100% !important;
    max-width: min(92vw, 700px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
  }

  body.join-form-fluid .welcome-box,
  body.join-form-fluid .content-box,
  body:not(.join-at-slide2) .welcome-box,
  body:not(.join-at-slide2) .content-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: min(92vw, 700px) !important;
    max-width: min(92vw, 700px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.join-form-fluid .welcome-box,
  body:not(.join-at-slide2) .welcome-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.join-form-fluid #step9 .content-box,
  body:not(.join-at-slide2) #step9 .content-box {
    grid-template-columns: 1fr !important;
  }
}

/* --- Kasten: Mittelgroesse (lesbar, Kopf bleibt sichtbar) --- */
body.join-form-fluid .welcome-box,
body.join-form-fluid .content-box,
body:not(.join-at-slide2) .welcome-box,
body:not(.join-at-slide2) .content-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(5px, 0.9vw, 7px) !important;
  width: min(92vw, 700px) !important;
  max-width: min(92vw, 700px) !important;
  min-width: 0 !important;
  margin: clamp(5px, 1.1vh, 10px) auto !important;
  padding: clamp(10px, 2vw, 18px) clamp(11px, 2.4vw, 28px) clamp(7px, 1.5vw, 11px) !important;
  box-sizing: border-box !important;
  border-radius: clamp(13px, 1.8vw, 20px) !important;
}

body.join-form-fluid .welcome-box,
body:not(.join-at-slide2) .welcome-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(92vw, 640px) !important;
  max-width: min(92vw, 640px) !important;
  padding: clamp(18px, 4vw, 44px) clamp(16px, 3vw, 36px) clamp(14px, 3.2vw, 40px) !important;
}

body.join-form-fluid #step9 .content-box,
body:not(.join-at-slide2) #step9 .content-box {
  grid-template-columns: 1fr !important;
}

body.join-form-fluid .welcome-box h1,
body.join-form-fluid .content-box h1,
body:not(.join-at-slide2) .welcome-box h1,
body:not(.join-at-slide2) .content-box h1 {
  grid-column: 1 / -1 !important;
  font-size: clamp(1rem, 3.2vw, 2.1rem) !important;
  line-height: 1.22 !important;
  margin-bottom: clamp(7px, 1.5vh, 18px) !important;
  letter-spacing: clamp(0.4px, 0.25vw, 1.8px) !important;
}

body.join-form-fluid .content-box .box label,
body.join-form-fluid .box label,
body:not(.join-at-slide2) .content-box .box label,
body:not(.join-at-slide2) .box label {
  font-size: clamp(0.78rem, 2.4vw, 15px) !important;
  line-height: 1.26 !important;
  letter-spacing: clamp(0.4px, 0.2vw, 1.5px) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  text-align: center !important;
}

body.join-form-fluid .content-box .box,
body.join-form-fluid .box,
body:not(.join-at-slide2) .content-box .box,
body:not(.join-at-slide2) .box {
  min-height: clamp(30px, 5.5vh, 54px) !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Handy/Tablet: Auswahl-Kachel – Text mittig, gelb über volle Fläche */
body.join-form-fluid .content-box .box:has(> input[type="checkbox"]),
body.join-form-fluid .content-box .box:has(> input[type="radio"]),
body:not(.join-at-slide2) .content-box .box:has(> input[type="checkbox"]),
body:not(.join-at-slide2) .content-box .box:has(> input[type="radio"]) {
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.join-form-fluid .content-box .box:has(> input[type="checkbox"]) > label,
body.join-form-fluid .content-box .box:has(> input[type="radio"]) > label,
body:not(.join-at-slide2) .content-box .box:has(> input[type="checkbox"]) > label,
body:not(.join-at-slide2) .content-box .box:has(> input[type="radio"]) > label {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  padding: clamp(10px, 2.2vw, 14px) clamp(10px, 2vw, 16px) !important;
}

body.join-form-fluid .content-box .box:has(> input[type="checkbox"]:checked),
body.join-form-fluid .content-box .box:has(> input[type="radio"]:checked),
body:not(.join-at-slide2) .content-box .box:has(> input[type="checkbox"]:checked),
body:not(.join-at-slide2) .content-box .box:has(> input[type="radio"]:checked) {
  background: #ffe600 !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}

body.join-form-fluid .content-box .box input[type="checkbox"]:checked + label,
body.join-form-fluid .content-box .box input[type="radio"]:checked + label,
body:not(.join-at-slide2) .content-box .box input[type="checkbox"]:checked + label,
body:not(.join-at-slide2) .content-box .box input[type="radio"]:checked + label {
  background: #ffe600 !important;
  color: #1a2236 !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Sonstiges, Hinweis, Buttons: immer unten im Kasten (nicht mitten in der Grid-Mitte) */
body.join-form-fluid .content-box .kommentarFeld,
body.join-form-fluid .content-box .kommentarFeld.box,
body.join-form-fluid .content-box textarea.kommentarFeld.box,
body:not(.join-at-slide2) .content-box .kommentarFeld,
body:not(.join-at-slide2) .content-box .kommentarFeld.box,
body:not(.join-at-slide2) .content-box textarea.kommentarFeld.box {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 97 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(40px, 7vh, 72px) !important;
  margin: 0 0 clamp(3px, 0.8vh, 6px) 0 !important;
  font-size: clamp(0.9rem, 2.5vw, 1.05rem) !important;
  padding: clamp(7px, 1.3vw, 12px) !important;
}

body.join-form-fluid .content-box .multiple-choice-hint,
body:not(.join-at-slide2) .content-box .multiple-choice-hint {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 98 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(6px, 1.2vh, 12px) !important;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem) !important;
  text-align: center !important;
}

body.join-form-fluid .content-box .btn-container,
body.join-form-fluid .welcome-box .buttons,
body:not(.join-at-slide2) .content-box .btn-container,
body:not(.join-at-slide2) .welcome-box .buttons {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 99 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px, 2vw, 10px) !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
}

body.join-form-fluid .content-box .btn,
body.join-form-fluid .welcome-box .btn,
body:not(.join-at-slide2) .content-box .btn,
body:not(.join-at-slide2) .welcome-box .btn,
body:not(.join-at-slide2) input.weiterButton,
body:not(.join-at-slide2) .weiterButton {
  font-size: clamp(0.8rem, 2.2vw, 1.05rem) !important;
  padding: clamp(7px, 1.25vw, 11px) clamp(13px, 3vw, 28px) !important;
  min-height: 42px !important;
}

body.join-form-fluid #step9 .form-input,
body:not(.join-at-slide2) #step9 .form-input,
body:not(.join-at-slide2) input[type="text"],
body:not(.join-at-slide2) input[type="email"],
body:not(.join-at-slide2) input[type="tel"] {
  font-size: clamp(15px, 2.5vw, 17px) !important;
  min-height: 42px !important;
  padding: clamp(10px, 1.35vw, 14px) clamp(12px, 1.8vw, 16px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body.join-form-fluid #step9 .content-box,
body:not(.join-at-slide2) #step9 .content-box,
body.join-form-fluid #step9 #contact-form > div,
body:not(.join-at-slide2) #step9 #contact-form > div {
  overflow: visible !important;
}

body.join-form-fluid #step9 .form-input:focus,
body.join-form-fluid #step9 .form-input:focus-visible,
body:not(.join-at-slide2) #step9 .form-input:focus,
body:not(.join-at-slide2) #step9 .form-input:focus-visible {
  border: 2px solid #ffe600 !important;
  transform: translateY(-2px) !important;
}

.join-site-header .lang-btn,
.join-site-header .home-btn {
  color: #fff !important;
  opacity: 1 !important;
}

/* Footer breit (PC): join-header.css */

/* --- Footer schmal: unter dem Kasten --- */
body.join-form-fluid.join-footer-compact .main-container > .footer-links,
body:not(.join-at-slide2).join-footer-compact .main-container > .footer-links {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: min(92vw, 760px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: clamp(10px, 2.4vh, 18px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  padding: 0 clamp(8px, 2vw, 12px) max(8px, env(safe-area-inset-bottom)) !important;
  text-align: center !important;
  z-index: 2 !important;
}

body.join-form-fluid.join-footer-compact .main-container,
body:not(.join-at-slide2).join-footer-compact .main-container {
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* Querformat-Handy: keine Mini-Box aus style.css – gleiches Grid, nur kleiner skaliert */
@media (max-width: 1024px) and (max-height: 540px) and (orientation: landscape) {
  body.join-form-fluid:not(.join-at-slide2) .content-box,
  body.join-form-fluid:not(.join-at-slide2) .welcome-box {
    padding: clamp(10px, 2.5vw, 18px) clamp(10px, 2.5vw, 16px) !important;
  }

  body.join-form-fluid:not(.join-at-slide2) .content-box .box label,
  body.join-form-fluid:not(.join-at-slide2) .box label {
    font-size: clamp(0.76rem, 3vw, 0.95rem) !important;
    padding: clamp(4px, 0.9vw, 7px) !important;
  }

  body.join-form-fluid:not(.join-at-slide2) .content-box .multiple-choice-hint {
    order: 98 !important;
    grid-column: 1 / -1 !important;
  }

  body.join-form-fluid:not(.join-at-slide2) .content-box .btn-container {
    order: 99 !important;
    grid-column: 1 / -1 !important;
  }
}

/* join-mobile-landscape / Tablet-Grid fuer Formular abschalten (falls Klasse noch gesetzt) */
body.join-form-fluid.join-mobile-landscape .content-box,
body.join-form-fluid.join-mobile-landscape .welcome-box {
  display: grid !important;
}

body.join-form-fluid.join-mobile-landscape .content-box .multiple-choice-hint,
body.join-form-fluid.join-mobile-landscape .content-box .btn-container,
body.join-form-fluid.join-mobile-landscape .content-box .kommentarFeld {
  grid-column: 1 / -1 !important;
  order: unset;
}

body.join-form-fluid.join-mobile-landscape .content-box .multiple-choice-hint {
  order: 98 !important;
}

body.join-form-fluid.join-mobile-landscape .content-box .kommentarFeld,
body.join-form-fluid.join-mobile-landscape .content-box textarea.kommentarFeld.box {
  order: 97 !important;
}

body.join-form-fluid.join-mobile-landscape .content-box .btn-container {
  order: 99 !important;
}

/* Grosses PC: ~2–4 mm weniger Abstand → kein Mini-Scrollbalken */
@media (min-width: 900px) and (min-height: 700px) and (pointer: fine) {
  body.join-form-fluid .content-box,
  body.join-form-fluid .welcome-box,
  body:not(.join-at-slide2) .content-box,
  body:not(.join-at-slide2) .welcome-box {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    padding-top: clamp(8px, 1.8vw, 16px) !important;
    padding-bottom: clamp(5px, 1.2vw, 9px) !important;
  }

  body.join-form-fluid .welcome-box,
  body:not(.join-at-slide2) .welcome-box {
    padding-top: clamp(16px, 3.6vw, 40px) !important;
    padding-bottom: clamp(12px, 3vw, 36px) !important;
  }

  body.join-form-fluid .content-box h1,
  body.join-form-fluid .welcome-box h1,
  body:not(.join-at-slide2) .content-box h1,
  body:not(.join-at-slide2) .welcome-box h1 {
    margin-bottom: clamp(5px, 1.2vh, 14px) !important;
  }

  body.join-form-fluid .content-box .multiple-choice-hint,
  body:not(.join-at-slide2) .content-box .multiple-choice-hint {
    margin-bottom: clamp(4px, 1vh, 10px) !important;
  }

  body.join-form-fluid .content-box .btn-container,
  body.join-form-fluid .welcome-box .buttons,
  body:not(.join-at-slide2) .content-box .btn-container,
  body:not(.join-at-slide2) .welcome-box .buttons {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.join-form-fluid .content-box .btn,
  body.join-form-fluid .welcome-box .btn,
  body:not(.join-at-slide2) .content-box .btn,
  body:not(.join-at-slide2) .welcome-box .btn {
    padding-top: clamp(6px, 1.1vw, 10px) !important;
    padding-bottom: clamp(6px, 1.1vw, 10px) !important;
  }
}

/* Step 8: Antwort + kurze Definition */
#step8 .join-answer-with-def {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: clamp(3px, 0.6vh, 6px) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

#step8 .join-answer-title {
  display: block !important;
  font-weight: 600 !important;
  font-size: clamp(0.78rem, 2.4vw, 15px) !important;
  letter-spacing: clamp(0.4px, 0.2vw, 1.5px) !important;
}

#step8 .join-answer-def {
  display: block !important;
  font-weight: 400 !important;
  font-size: clamp(0.65rem, 1.9vw, 12px) !important;
  opacity: 0.92 !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}

/* Ladebildschirme: zentrierter Text, kein 2-Spalten-Grid der Formular-Kästen */
body.join-form-fluid #loader .content-box,
body.join-form-fluid #loader2 .content-box,
body:not(.join-at-slide2) #loader .content-box,
body:not(.join-at-slide2) #loader2 .content-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  width: min(92vw, 700px) !important;
  max-width: min(92vw, 700px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#loader .content-box > div:first-child,
#loader2 .content-box > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 3 !important;
}

#loader .content-box > div:last-child,
#loader2 .content-box > div:last-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

#loader .content-box h1,
#loader .content-box h4,
#loader2 .content-box h1 {
  grid-column: auto !important;
  width: 100% !important;
  text-align: center !important;
}

/* Mobile/Tablet: Auswahl-Text sicher mittig (überschreibt spätere Layout-Regeln) */
html.join-layout-mobile body.join-form-fluid .content-box .box:has(> input[type="checkbox"]) > label,
html.join-layout-mobile body.join-form-fluid .content-box .box:has(> input[type="radio"]) > label,
html.join-layout-mobile body:not(.join-at-slide2) .content-box .box:has(> input[type="checkbox"]) > label,
html.join-layout-mobile body:not(.join-at-slide2) .content-box .box:has(> input[type="radio"]) > label,
html.join-layout-tablet body.join-form-fluid .content-box .box:has(> input[type="checkbox"]) > label,
html.join-layout-tablet body.join-form-fluid .content-box .box:has(> input[type="radio"]) > label,
html.join-layout-tablet body:not(.join-at-slide2) .content-box .box:has(> input[type="checkbox"]) > label,
html.join-layout-tablet body:not(.join-at-slide2) .content-box .box:has(> input[type="radio"]) > label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}