/* Temporary layout layer for the Cloudflare-hosted WeWeb export.
   Only /registreren/ and /inloggen/ load this file. The authentication
   form and its existing workflow remain untouched. */

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section:has(> .section-base > form.ww-form-container) {
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center;
  padding: clamp(20px, 3vw, 48px) !important;
  box-sizing: border-box;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) {
  --auth-gutter: clamp(28px, 4vw, 66px);
  display: grid !important;
  grid-template-columns: minmax(0, 47%) minmax(0, 53%);
  grid-template-rows: minmax(24px, 1fr) auto auto auto auto minmax(24px, 1fr);
  align-items: start !important;
  justify-items: center;
  gap: 0 !important;
  width: min(1180px, 100%) !important;
  min-height: 680px !important;
  padding: 12px !important;
  margin: 0 auto !important;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #e7e3dc;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 80px rgb(23 33 26 / 8%);
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container)::before {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 1 / 7;
  align-self: stretch;
  justify-self: stretch;
  min-height: 656px;
  border-radius: 22px;
  background: #dce6d7 url('/assets/samen-helpen.jpg') center center / cover no-repeat;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > h1,
body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > p,
body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > form,
body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > a {
  grid-column: 2;
  justify-self: center;
  width: min(480px, calc(100% - 2 * var(--auth-gutter))) !important;
  max-width: none !important;
  box-sizing: border-box;
  text-align: left !important;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > h1 {
  grid-row: 2;
  font-size: clamp(32px, 3.4vw, 44px) !important;
  line-height: 1.13 !important;
  margin: 0 !important;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > p {
  grid-row: 3;
  margin: 12px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > form {
  grid-row: 4;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > a {
  grid-row: 5;
  margin: 25px 0 0 !important;
  text-align: center !important;
  font-size: 14px !important;
}

@media (max-width: 800px) {
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section:has(> .section-base > form.ww-form-container) {
    padding: 16px !important;
  }

  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) {
    --auth-gutter: 24px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(185px, 32vh) auto auto auto auto;
    min-height: 0 !important;
    padding: 10px 10px 28px !important;
    border-radius: 24px;
  }

  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container)::before {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    border-radius: 17px;
    background-position: center 45%;
  }

  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > h1,
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > p,
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > form,
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > a {
    grid-column: 1;
    width: min(480px, calc(100% - 2 * var(--auth-gutter))) !important;
  }

  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > h1 {
    grid-row: 2;
    margin-top: 28px !important;
  }

  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > p { grid-row: 3; }
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > form { grid-row: 4; }
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) > a { grid-row: 5; }
}

@media (prefers-reduced-motion: reduce) {
  body:is(:has(#app .website-wrapper[ww-page-id="e5a6dee1-7fff-464e-8427-4b0e1d14468d"]), :has(#app .website-wrapper[ww-page-id="84def987-e20a-4567-8494-8e17e0d378f0"])) .ww-section > .section-base:has(> form.ww-form-container) * {
    scroll-behavior: auto !important;
  }
}
