/* ==========================================================
   PACE-yourself
   Survey-Styling + Fullscreen Landingpage
   ========================================================== */


/* ==========================================================
   1. HINTERGRUND DER NORMALEN FRAGEBOGENSEITEN
   ========================================================== */

/* Hintergrund wirklich über die gesamte Browserbreite */

html:not(:has(.pace-landing-hero)),
body:not(:has(.pace-landing-hero)) {
  min-height: 100% !important;

  margin: 0 !important;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(69, 126, 115, 0.11) 0%,
      rgba(69, 126, 115, 0) 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(91, 133, 113, 0.09) 0%,
      rgba(91, 133, 113, 0) 32%
    ),
    linear-gradient(
      145deg,
      #f1f5f3 0%,
      #eaf1ee 52%,
      #f4f6f4 100%
    ) !important;

  background-image:
    radial-gradient(
      circle at 12% 8%,
      rgba(69, 126, 115, 0.11) 0%,
      rgba(69, 126, 115, 0) 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(91, 133, 113, 0.09) 0%,
      rgba(91, 133, 113, 0) 32%
    ),
    linear-gradient(
      145deg,
      #f1f5f3 0%,
      #eaf1ee 52%,
      #f4f6f4 100%
    ) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}


/* ----------------------------------------------------------
   formr-eigene Hintergrundflächen transparent machen
   ---------------------------------------------------------- */

body:not(:has(.pace-landing-hero)) .run,
body:not(:has(.pace-landing-hero)) .run-container,
body:not(:has(.pace-landing-hero)) .run_unit,
body:not(:has(.pace-landing-hero)) main,
body:not(:has(.pace-landing-hero)) .main,
body:not(:has(.pace-landing-hero)) .container,
body:not(:has(.pace-landing-hero)) .container-fluid {
  background: transparent !important;
  background-image: none !important;
}


/* ==========================================================
   2. NORMALE FRAGEBOGENSEITEN
   ========================================================== */

.run_unit_type_Survey {
  min-height: 100vh;

  color: #20282d;

  background: transparent !important;
  background-image: none !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 16px;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   Weiße Survey-Fläche
   ---------------------------------------------------------- */

.run_unit_type_Survey form {
  width: calc(100% - 48px);
  max-width: 1220px;

  margin: 34px auto 55px;

  padding:
    38px
    46px
    42px;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid
    rgba(31, 55, 52, 0.08);

  border-radius: 16px;

  box-shadow:
    0 8px 30px rgba(28, 47, 43, 0.07),
    0 1px 3px rgba(28, 47, 43, 0.04);
}


/* ----------------------------------------------------------
   Überschriften
   ---------------------------------------------------------- */

.run_unit_type_Survey h1,
.run_unit_type_Survey h2,
.run_unit_type_Survey h3 {
  color: #20282d;

  line-height: 1.3;

  letter-spacing: -0.012em;
}


.run_unit_type_Survey h1 {
  margin-top: 0;
  margin-bottom: 12px;

  font-size: 28px;
  font-weight: 650;
}


.run_unit_type_Survey h2 {
  margin-top: 8px;
  margin-bottom: 10px;

  font-size: 21px;
  font-weight: 620;
}


.run_unit_type_Survey h3 {
  margin-top: 6px;
  margin-bottom: 9px;

  font-size: 17px;
  font-weight: 620;
}


.run_unit_type_Survey p {
  color: #536068;

  line-height: 1.68;
}


/* ----------------------------------------------------------
   Vertikale Abstände zwischen Fragen
   ---------------------------------------------------------- */

.run_unit_type_Survey .form-group,
.run_unit_type_Survey fieldset,
.run_unit_type_Survey .survey-item,
.run_unit_type_Survey .formr-item {
  margin-bottom: 30px;
}


/* ----------------------------------------------------------
   Textfelder und Auswahlmenüs
   ---------------------------------------------------------- */

.run_unit_type_Survey input[type="text"],
.run_unit_type_Survey input[type="email"],
.run_unit_type_Survey input[type="number"],
.run_unit_type_Survey textarea,
.run_unit_type_Survey select,
.run_unit_type_Survey .form-control {
  min-height: 44px;

  padding:
    10px
    13px;

  border:
    1px solid
    #c8d0d5;

  border-radius: 8px;

  background: #ffffff;

  color: #273238;

  box-shadow: none;

  font-size: 16px;
}


.run_unit_type_Survey textarea {
  min-height: 120px;

  resize: vertical;
}


.run_unit_type_Survey input[type="text"]:focus,
.run_unit_type_Survey input[type="email"]:focus,
.run_unit_type_Survey input[type="number"]:focus,
.run_unit_type_Survey textarea:focus,
.run_unit_type_Survey select:focus,
.run_unit_type_Survey .form-control:focus {
  outline: none;

  border-color: #2f6f6d;

  box-shadow:
    0 0 0 3px
    rgba(47, 111, 109, 0.14);
}


/* ----------------------------------------------------------
   Weiter- und Ergebnis-Buttons

   Nur echte Submit-Elemente.
   Das native rating_button-Layout bleibt unangetastet.
   ---------------------------------------------------------- */

.run_unit_type_Survey button[type="submit"],
.run_unit_type_Survey input[type="submit"] {
  min-height: 46px;

  padding:
    11px
    22px;

  border:
    1px solid
    #2f6f6d;

  border-radius: 8px;

  background: #2f6f6d;

  color: #ffffff;

  box-shadow: none;

  font-size: 15px;
  font-weight: 620;
}


.run_unit_type_Survey button[type="submit"]:hover,
.run_unit_type_Survey input[type="submit"]:hover {
  border-color: #245b59;

  background: #245b59;

  color: #ffffff;
}


/* ----------------------------------------------------------
   Fortschrittsanzeige
   ---------------------------------------------------------- */

.run_unit_type_Survey .progress {
  height: 6px;

  margin-bottom: 28px;

  overflow: hidden;

  border-radius: 999px;

  background: #e2e7e9;

  box-shadow: none;
}


.run_unit_type_Survey .progress-bar {
  border-radius: 999px;

  background: #2f6f6d;

  box-shadow: none;
}


/* ----------------------------------------------------------
   Fehlermeldungen
   ---------------------------------------------------------- */

.run_unit_type_Survey .required,
.run_unit_type_Survey .text-danger,
.run_unit_type_Survey .has-error .help-block {
  color: #9f3f3f;
}


.run_unit_type_Survey .has-error .form-control {
  border-color: #a85555;
}


/* ==========================================================
   3. NORMALE FRAGEBOGENSEITEN – MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .run_unit_type_Survey {
    font-size: 15px;
  }


  .run_unit_type_Survey form {
    width: calc(100% - 24px);

    margin:
      14px
      auto
      30px;

    padding:
      24px
      18px
      30px;

    border-radius: 12px;

    box-shadow:
      0 5px 20px
      rgba(28, 47, 43, 0.06);
  }


  .run_unit_type_Survey h1 {
    font-size: 24px;
  }


  .run_unit_type_Survey h2 {
    font-size: 19px;
  }


  .run_unit_type_Survey h3 {
    font-size: 16px;
  }


  .run_unit_type_Survey .form-group,
  .run_unit_type_Survey fieldset,
  .run_unit_type_Survey .survey-item,
  .run_unit_type_Survey .formr-item {
    margin-bottom: 25px;
  }


  .run_unit_type_Survey button[type="submit"],
  .run_unit_type_Survey input[type="submit"] {
    width: 100%;
  }
}



/* ==========================================================
   4. FULLSCREEN LANDINGPAGE
   Nur aktiv, wenn .pace-landing-hero vorhanden ist
   ========================================================== */


/* ----------------------------------------------------------
   Browserseite vollständig übernehmen
   ---------------------------------------------------------- */

html:has(.pace-landing-hero),
body:has(.pace-landing-hero) {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #08110e !important;
}


/* ----------------------------------------------------------
   Hero über den kompletten sichtbaren Viewport
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-hero {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  z-index: 1000 !important;

  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;

  margin: 0 !important;

  padding:
    58px
    28px
    132px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border: 0 !important;
  border-radius: 0 !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(5, 14, 11, 0.40) 0%,
      rgba(5, 14, 11, 0.52) 50%,
      rgba(5, 14, 11, 0.69) 100%
    ),
    url(
      "https://pace-yourself.bnitm.de/assets/tmp/admin/y9BVdp9QNUVMg_yyZmG5/PACE_hero_forest_web.jpg?v=1786535163"
    ) !important;

  background-size: cover !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;

  text-align: center !important;
}


/* ----------------------------------------------------------
   Dezente Vignette
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-hero::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.01) 0%,
      rgba(0, 0, 0, 0.18) 100%
    ) !important;

  pointer-events: none !important;
}


/* ----------------------------------------------------------
   Hero-Inhalt
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-content {
  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;
  max-width: 1000px !important;

  margin:
    0
    auto !important;

  color: #ffffff !important;

  text-align: center !important;
}


/* ----------------------------------------------------------
   PACE-yourself
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-kicker {
  margin:
    0
    0
    20px !important;

  color:
    rgba(255, 255, 255, 0.88) !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.18em !important;

  text-transform: uppercase !important;

  text-align: center !important;
}


/* ----------------------------------------------------------
   Landingpage-Headline
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-content h1,
body:has(.pace-landing-hero) .pace-landing-hero > h1 {
  width: 100% !important;
  max-width: 950px !important;

  margin:
    0
    auto !important;

  color: #ffffff !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif !important;

  font-size:
    clamp(
      42px,
      5vw,
      70px
    ) !important;

  font-weight: 720 !important;

  line-height: 1.07 !important;

  letter-spacing: -0.035em !important;

  text-align: center !important;

  text-shadow:
    0
    3px
    24px
    rgba(0, 0, 0, 0.27) !important;
}


/* ----------------------------------------------------------
   Landingpage-Unterzeile
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-lead,
body:has(.pace-landing-hero) .pace-landing-hero > p.pace-landing-lead {
  width: 100% !important;
  max-width: 780px !important;

  margin:
    24px
    auto
    0 !important;

  color:
    rgba(255, 255, 255, 0.94) !important;

  font-size: 20px !important;
  font-weight: 400 !important;

  line-height: 1.55 !important;

  text-align: center !important;

  text-shadow:
    0
    2px
    16px
    rgba(0, 0, 0, 0.28) !important;
}


/* ----------------------------------------------------------
   Drei Bereiche
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-meta,
body:has(.pace-landing-hero) .pace-landing-domains {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 10px 0 !important;

  margin:
    34px
    auto
    0 !important;

  color:
    rgba(255, 255, 255, 0.90) !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  text-align: center !important;
}


body:has(.pace-landing-hero) .pace-landing-meta span,
body:has(.pace-landing-hero) .pace-landing-domains span {
  display: inline-flex !important;

  align-items: center !important;
}


body:has(.pace-landing-hero) .pace-landing-meta span:not(:last-child)::after,
body:has(.pace-landing-hero) .pace-landing-domains span:not(:last-child)::after {
  content: "•" !important;

  margin:
    0
    18px !important;

  color:
    rgba(255, 255, 255, 0.50) !important;
}


/* ----------------------------------------------------------
   Hinweis zur freiwilligen Forschungsnutzung
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace-landing-note,
body:has(.pace-landing-hero) .pace-landing-hero > div:not(.pace-landing-kicker):not(.pace-landing-domains):not(.pace-landing-content) {
  width: 100% !important;
  max-width: 760px !important;

  margin:
    22px
    auto
    0 !important;

  color:
    rgba(255, 255, 255, 0.84) !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.55 !important;

  text-align: center !important;

  text-shadow:
    0
    1px
    12px
    rgba(0, 0, 0, 0.28) !important;
}



/* ==========================================================
   5. LANDINGPAGE-STARTBUTTON
   ========================================================== */

body:has(.pace-landing-hero) .pace_landing_cta {
  position: fixed !important;

  left: 50% !important;
  bottom: 46px !important;

  z-index: 2000 !important;

  transform:
    translateX(-50%) !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  text-align: center !important;
}


/* ----------------------------------------------------------
   formr-Wrapper um den Button neutralisieren
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace_landing_cta .form-group,
body:has(.pace-landing-hero) .pace_landing_cta .controls,
body:has(.pace-landing-hero) .pace_landing_cta div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  background: transparent !important;
}


/* ----------------------------------------------------------
   Startbutton selbst
   ---------------------------------------------------------- */

body:has(.pace-landing-hero) .pace_landing_cta button,
body:has(.pace-landing-hero) .pace_landing_cta input[type="submit"],
body:has(.pace-landing-hero) .pace_landing_cta .btn {
  min-width: 255px !important;
  min-height: 60px !important;

  margin: 0 !important;

  padding:
    15px
    30px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.70) !important;

  border-radius: 9px !important;

  background:
    rgba(250, 249, 244, 0.97) !important;

  color: #17312c !important;

  box-shadow:
    0
    12px
    34px
    rgba(0, 0, 0, 0.27) !important;

  font-size: 18px !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease !important;
}


body:has(.pace-landing-hero) .pace_landing_cta button:hover,
body:has(.pace-landing-hero) .pace_landing_cta input[type="submit"]:hover,
body:has(.pace-landing-hero) .pace_landing_cta .btn:hover {
  background: #ffffff !important;

  transform:
    translateY(-2px) !important;

  box-shadow:
    0
    16px
    40px
    rgba(0, 0, 0, 0.31) !important;
}



/* ==========================================================
   6. FORMRS EIGENE ELEMENTE AUF DER LANDINGPAGE VERBERGEN
   ========================================================== */


/* normale Survey-Card auf der Landingpage aufheben */

body:has(.pace-landing-hero) .run_unit_type_Survey form,
body:has(.pace-landing-hero) .container,
body:has(.pace-landing-hero) .container-fluid,
body:has(.pace-landing-hero) form {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* Fortschrittsbalken auf Landingpage entfernen */

body:has(.pace-landing-hero) .progress {
  display: none !important;
}


/* zusätzliche Landingpage-Bereiche nicht im Hero anzeigen */

body:has(.pace-landing-hero) .pace-landing-info,
body:has(.pace-landing-hero) .pace-landing-partners {
  display: none !important;
}


/* formr-Footer / Kontaktbereich */

body:has(.pace-landing-hero) footer,
body:has(.pace-landing-hero) #footer,
body:has(.pace-landing-hero) .footer,
body:has(.pace-landing-hero) .formr-footer,
body:has(.pace-landing-hero) .run-footer,
body:has(.pace-landing-hero) .study-footer,
body:has(.pace-landing-hero) .navbar-fixed-bottom {
  display: none !important;
}



/* ==========================================================
   7. LANDINGPAGE – MOBILE
   ========================================================== */

@media (max-width: 700px) {

  body:has(.pace-landing-hero) .pace-landing-hero {
    width: 100vw !important;

    height: 100svh !important;
    min-height: 100svh !important;

    padding:
      34px
      20px
      120px !important;

    background-position:
      center center !important;
  }


  body:has(.pace-landing-hero) .pace-landing-kicker {
    margin-bottom: 16px !important;

    font-size: 11px !important;

    line-height: 1.35 !important;
  }


  body:has(.pace-landing-hero) .pace-landing-content h1,
body:has(.pace-landing-hero) .pace-landing-hero > h1 {
    font-size: 39px !important;

    line-height: 1.08 !important;

    letter-spacing: -0.03em !important;
  }


  body:has(.pace-landing-hero) .pace-landing-lead,
body:has(.pace-landing-hero) .pace-landing-hero > p.pace-landing-lead {
    margin-top: 19px !important;

    font-size: 17px !important;

    line-height: 1.5 !important;
  }


  body:has(.pace-landing-hero) .pace-landing-meta,
body:has(.pace-landing-hero) .pace-landing-domains {
    flex-direction: column !important;

    gap: 6px !important;

    margin-top: 25px !important;
  }


  body:has(.pace-landing-hero) .pace-landing-meta span::after,
  body:has(.pace-landing-hero) .pace-landing-domains span::after {
    display: none !important;
  }


  body:has(.pace-landing-hero) .pace-landing-note,
body:has(.pace-landing-hero) .pace-landing-hero > div:not(.pace-landing-kicker):not(.pace-landing-domains):not(.pace-landing-content) {
    max-width: 520px !important;

    margin-top: 18px !important;

    font-size: 12px !important;

    line-height: 1.5 !important;
  }


  body:has(.pace-landing-hero) .pace_landing_cta {
    bottom: 27px !important;

    width:
      calc(100% - 40px) !important;
  }


  body:has(.pace-landing-hero) .pace_landing_cta button,
  body:has(.pace-landing-hero) .pace_landing_cta input[type="submit"],
  body:has(.pace-landing-hero) .pace_landing_cta .btn {
    width: 100% !important;

    max-width: 340px !important;

    min-height: 56px !important;

    font-size: 17px !important;
  }
}


/* ==========================================================
   FORMRS ÄUSSERE WEISSE SEITENLINIEN ENTFERNEN
   ========================================================== */

body:not(:has(.pace-landing-hero)) .container,
body:not(:has(.pace-landing-hero)) .container-fluid,
body:not(:has(.pace-landing-hero)) .run,
body:not(:has(.pace-landing-hero)) .run-container,
body:not(:has(.pace-landing-hero)) .run_unit,
body:not(:has(.pace-landing-hero)) main,
body:not(:has(.pace-landing-hero)) .main {

  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;
}


/* Eventuelle Pseudo-Elemente des formr-Wrappers ebenfalls entfernen */

body:not(:has(.pace-landing-hero)) .container::before,
body:not(:has(.pace-landing-hero)) .container::after,
body:not(:has(.pace-landing-hero)) .container-fluid::before,
body:not(:has(.pace-landing-hero)) .container-fluid::after,
body:not(:has(.pace-landing-hero)) .run::before,
body:not(:has(.pace-landing-hero)) .run::after,
body:not(:has(.pace-landing-hero)) .run-container::before,
body:not(:has(.pace-landing-hero)) .run-container::after {

  border: 0 !important;

  box-shadow: none !important;

  background: transparent !important;
}