/**
 * Meet 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.meet-form-fluid,
  body:not(.meet-at-slide2) {
    display: block !important;
    align-items: stretch !important;
  }

  body.meet-form-fluid .main-container,
  body:not(.meet-at-slide2) .main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !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.meet-form-fluid .container-steps,
  body.meet-form-fluid #user-info,
  body:not(.meet-at-slide2) .container-steps,
  body:not(.meet-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.meet-form-fluid .welcome-box,
  body.meet-form-fluid .content-box,
  body.meet-form-fluid #loader2 .content-box,
  body:not(.meet-at-slide2) .welcome-box,
  body:not(.meet-at-slide2) .content-box,
  body:not(.meet-at-slide2) #loader2 .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.meet-form-fluid .welcome-box,
  body:not(.meet-at-slide2) .welcome-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

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

/* --- Kasten: Mittelgroesse (lesbar, Kopf bleibt sichtbar) --- */
body.meet-form-fluid .welcome-box,
body.meet-form-fluid .content-box,
body.meet-form-fluid #loader2 .content-box,
body:not(.meet-at-slide2) .welcome-box,
body:not(.meet-at-slide2) .content-box,
body:not(.meet-at-slide2) #loader2 .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.meet-form-fluid .welcome-box,
body:not(.meet-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.meet-form-fluid #step9 .content-box,
body:not(.meet-at-slide2) #step9 .content-box {
  grid-template-columns: 1fr !important;
}

body.meet-form-fluid .welcome-box h1,
body.meet-form-fluid .content-box h1,
body:not(.meet-at-slide2) .welcome-box h1,
body:not(.meet-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.meet-form-fluid .content-box .box label,
body.meet-form-fluid .box label,
body:not(.meet-at-slide2) .content-box .box label,
body:not(.meet-at-slide2) .box label {
  font-size: clamp(0.78rem, 2.4vw, 15px) !important;
  line-height: 1.26 !important;
  padding: clamp(5px, 0.9vw, 8px) !important;
  letter-spacing: clamp(0.4px, 0.2vw, 1.5px) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

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

/* Sonstiges, Hinweis, Buttons: immer unten im Kasten (nicht mitten in der Grid-Mitte) */
body.meet-form-fluid .content-box .kommentarFeld,
body.meet-form-fluid .content-box .kommentarFeld.box,
body.meet-form-fluid .content-box textarea.kommentarFeld.box,
body:not(.meet-at-slide2) .content-box .kommentarFeld,
body:not(.meet-at-slide2) .content-box .kommentarFeld.box,
body:not(.meet-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.meet-form-fluid .content-box .multiple-choice-hint,
body:not(.meet-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.meet-form-fluid .content-box .btn-container,
body.meet-form-fluid .welcome-box .buttons,
body:not(.meet-at-slide2) .content-box .btn-container,
body:not(.meet-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.meet-form-fluid .content-box .btn,
body.meet-form-fluid .welcome-box .btn,
body:not(.meet-at-slide2) .content-box .btn,
body:not(.meet-at-slide2) .welcome-box .btn,
body:not(.meet-at-slide2) input.weiterButton,
body:not(.meet-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.meet-form-fluid #step9 .form-input,
body:not(.meet-at-slide2) #step9 .form-input,
body:not(.meet-at-slide2) input[type="text"],
body:not(.meet-at-slide2) input[type="email"],
body:not(.meet-at-slide2) input[type="tel"] {
  font-size: clamp(15px, 2.5vw, 17px) !important;
  min-height: 42px !important;
  padding: clamp(7px, 1.35vw, 11px) clamp(9px, 1.8vw, 13px) !important;
}

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

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

/* --- Footer schmal: unter dem Kasten --- */
body.meet-form-fluid.meet-footer-compact .main-container > .footer-links,
body:not(.meet-at-slide2).meet-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.meet-form-fluid.meet-footer-compact .main-container,
body:not(.meet-at-slide2).meet-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.meet-form-fluid:not(.meet-at-slide2) .content-box,
  body.meet-form-fluid:not(.meet-at-slide2) .welcome-box {
    padding: clamp(10px, 2.5vw, 18px) clamp(10px, 2.5vw, 16px) !important;
  }

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

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

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

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

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

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

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

body.meet-form-fluid.meet-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.meet-form-fluid .content-box,
  body.meet-form-fluid .welcome-box,
  body:not(.meet-at-slide2) .content-box,
  body:not(.meet-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.meet-form-fluid .welcome-box,
  body:not(.meet-at-slide2) .welcome-box {
    padding-top: clamp(16px, 3.6vw, 40px) !important;
    padding-bottom: clamp(12px, 3vw, 36px) !important;
  }

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

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

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

  body.meet-form-fluid .content-box .btn,
  body.meet-form-fluid .welcome-box .btn,
  body:not(.meet-at-slide2) .content-box .btn,
  body:not(.meet-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;
}

/* Meet: einspaltige Steps (Textarea, Kontaktformular, Loader) */
/* Step 5: einspaltig, kein Ueberlauf nach rechts */
body.meet-form-fluid #step5,
body:not(.meet-at-slide2) #step5 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step5 .content-box,
body:not(.meet-at-slide2) #step5 .content-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  grid-template-columns: 1fr !important;
  width: min(calc(100vw - 24px), 640px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step5 .content-box h1,
body:not(.meet-at-slide2) #step5 .content-box h1 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(0.95rem, 4vw, 1.35rem) !important;
  line-height: 1.2 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

body.meet-form-fluid #step5 .content-box .kommentarFeld,
body.meet-form-fluid #step5 .content-box textarea.kommentarFeld.box,
body:not(.meet-at-slide2) #step5 .content-box .kommentarFeld,
body:not(.meet-at-slide2) #step5 .content-box textarea.kommentarFeld.box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step5 .content-box .btn-container,
body:not(.meet-at-slide2) #step5 .content-box .btn-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step10 .content-box,
body.meet-form-fluid #loader .content-box,
body.meet-form-fluid #loader2 .content-box,
body:not(.meet-at-slide2) #step10 .content-box,
body:not(.meet-at-slide2) #loader .content-box,
body:not(.meet-at-slide2) #loader2 .content-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(92vw, 700px) !important;
  max-width: min(92vw, 700px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Kontaktformular (step10): kein horizontaler Ueberlauf auf dem Handy */
body.meet-form-fluid #step10,
body:not(.meet-at-slide2) #step10 {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step10 .content-box,
body:not(.meet-at-slide2) #step10 .content-box {
  width: 100% !important;
  max-width: min(92vw, 640px) !important;
  min-width: 0 !important;
  padding: clamp(16px, 4vw, 32px) clamp(12px, 3vw, 20px) clamp(14px, 3vw, 24px) !important;
}

body.meet-form-fluid #step10 .content-box h1,
body:not(.meet-at-slide2) #step10 .content-box h1 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(0.95rem, 4.2vw, 1.35rem) !important;
  line-height: 1.2 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

body.meet-form-fluid #step10 .row,
body:not(.meet-at-slide2) #step10 .row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
}

body.meet-form-fluid #step10 .row > [class*='col'],
body:not(.meet-at-slide2) #step10 .row > [class*='col'] {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.meet-form-fluid #step10 .input-group,
body:not(.meet-at-slide2) #step10 .input-group {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.meet-form-fluid #step10 .form-control,
body:not(.meet-at-slide2) #step10 .form-control {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  width: 1% !important;
}

body.meet-form-fluid #step10 .form-check,
body:not(.meet-at-slide2) #step10 .form-check {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step10 .form-check-label,
body:not(.meet-at-slide2) #step10 .form-check-label {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

body.meet-form-fluid #step10 .last-btn,
body:not(.meet-at-slide2) #step10 .last-btn {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.meet-form-fluid #step5 .kommentarFeld,
body.meet-form-fluid #step10 .row,
body.meet-form-fluid #step10 .mb-3,
body.meet-form-fluid #step10 .form-check,
body.meet-form-fluid #step10 .last-btn,
body:not(.meet-at-slide2) #step5 .kommentarFeld,
body:not(.meet-at-slide2) #step10 .row,
body:not(.meet-at-slide2) #step10 .mb-3,
body:not(.meet-at-slide2) #step10 .form-check,
body:not(.meet-at-slide2) #step10 .last-btn {
  width: 100% !important;
  max-width: 100% !important;
}

body.meet-form-fluid #step4 .content-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}